From cd1b08856888d5c58ca5b1fcd0220c28cc7147db Mon Sep 17 00:00:00 2001 From: Nikhil Nandagopal Date: Thu, 12 Sep 2019 13:41:25 +0530 Subject: [PATCH] added widget config reducer --- app/client/src/constants/ActionConstants.tsx | 6 ++ app/client/src/constants/WidgetConstants.tsx | 24 ++++-- .../editorComponents/CheckboxComponent.tsx | 18 ++-- .../editorComponents/RadioGroupComponent.tsx | 31 ++----- .../mockResponses/WidgetCardsPaneResponse.tsx | 5 -- .../mockResponses/WidgetConfigResponse.tsx | 86 +++++++++++++++++++ app/client/src/pages/Editor/Canvas.tsx | 10 +-- .../src/pages/Editor/EditorDragLayer.tsx | 1 + ...sReducers.tsx => canvasWidgetsReducer.tsx} | 0 .../src/reducers/entityReducers/index.tsx | 2 +- .../widgetConfigReducer.tsx.tsx | 55 ++++++++++++ app/client/src/reducers/index.tsx | 2 +- app/client/src/utils/WidgetRegistry.tsx | 51 ++--------- app/client/src/widgets/AlertWidget.tsx | 28 ++++++ app/client/src/widgets/BaseWidget.tsx | 6 +- app/client/src/widgets/BreadcrumbsWidget.tsx | 39 --------- app/client/src/widgets/ButtonWidget.tsx | 4 +- app/client/src/widgets/CalloutWidget.tsx | 35 -------- app/client/src/widgets/CheckboxWidget.tsx | 12 ++- app/client/src/widgets/DatePickerWidget.tsx | 34 ++++++++ app/client/src/widgets/DropdownWidget.tsx | 31 +++++++ app/client/src/widgets/IconWidget.tsx | 34 -------- app/client/src/widgets/ImageWidget.tsx | 26 ++++++ app/client/src/widgets/InputGroupWidget.tsx | 54 ------------ app/client/src/widgets/InputWidget.tsx | 32 +++++++ app/client/src/widgets/NumericInputWidget.tsx | 69 --------------- app/client/src/widgets/RadioGroupWidget.tsx | 34 +++----- app/client/src/widgets/SwitchWidget.tsx | 26 ++++++ app/client/src/widgets/TableWidget.tsx | 27 ++++++ app/client/src/widgets/TagInputWidget.tsx | 44 ---------- app/client/src/widgets/TextWidget.tsx | 4 +- 31 files changed, 417 insertions(+), 413 deletions(-) create mode 100644 app/client/src/mockResponses/WidgetConfigResponse.tsx rename app/client/src/reducers/entityReducers/{canvasWidgetsReducers.tsx => canvasWidgetsReducer.tsx} (100%) create mode 100644 app/client/src/reducers/entityReducers/widgetConfigReducer.tsx.tsx create mode 100644 app/client/src/widgets/AlertWidget.tsx delete mode 100644 app/client/src/widgets/BreadcrumbsWidget.tsx delete mode 100644 app/client/src/widgets/CalloutWidget.tsx create mode 100644 app/client/src/widgets/DatePickerWidget.tsx create mode 100644 app/client/src/widgets/DropdownWidget.tsx delete mode 100644 app/client/src/widgets/IconWidget.tsx create mode 100644 app/client/src/widgets/ImageWidget.tsx delete mode 100644 app/client/src/widgets/InputGroupWidget.tsx create mode 100644 app/client/src/widgets/InputWidget.tsx delete mode 100644 app/client/src/widgets/NumericInputWidget.tsx create mode 100644 app/client/src/widgets/SwitchWidget.tsx create mode 100644 app/client/src/widgets/TableWidget.tsx delete mode 100644 app/client/src/widgets/TagInputWidget.tsx diff --git a/app/client/src/constants/ActionConstants.tsx b/app/client/src/constants/ActionConstants.tsx index b2ed304c9c..7f6feca97a 100644 --- a/app/client/src/constants/ActionConstants.tsx +++ b/app/client/src/constants/ActionConstants.tsx @@ -19,6 +19,7 @@ export type ActionType = | "ERROR_FETCHING_WIDGET_CARDS" | "ADD_PAGE_WIDGET" | "REMOVE_PAGE_WIDGET" + | "LOAD_WIDGET_CONFIG" export const ActionTypes: { [id: string]: ActionType } = { UPDATE_CANVAS: "UPDATE_CANVAS", @@ -32,6 +33,7 @@ export const ActionTypes: { [id: string]: ActionType } = { ZOOM_OUT_CANVAS: "ZOOM_OUT_CANVAS", UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION", REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION", + LOAD_WIDGET_CONFIG: "LOAD_WIDGET_CONFIG", PUBLISH: "PUBLISH", FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS", SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS", @@ -50,6 +52,10 @@ export interface LoadCanvasPayload { widgets: { [widgetId: string]: IWidgetProps }; } +export interface LoadWidgetConfigPayload { + [widgetId: string]: IWidgetProps +} + export interface LoadWidgetPanePayload { widgets: IWidgetProps[]; } diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx index e362d67dd6..d2c77b3852 100644 --- a/app/client/src/constants/WidgetConstants.tsx +++ b/app/client/src/constants/WidgetConstants.tsx @@ -2,25 +2,31 @@ export type WidgetType = | "TEXT_WIDGET" | "IMAGE_WIDGET" | "CONTAINER_WIDGET" - | "LIST_WIDGET" - | "CALLOUT_WIDGET" - | "ICON_WIDGET" - | "INPUT_GROUP_WIDGET" | "SPINNER_WIDGET" | "BUTTON_WIDGET" - | "BREADCRUMBS_WIDGET" - | "TAG_INPUT_WIDGET" - | "NUMERIC_INPUT_WIDGET" + | "DATE_PICKER_WIDGET" + | "TABLE_WIDGET" + | "DROP_DOWN_WIDGET" | "CHECKBOX_WIDGET" | "RADIO_GROUP_WIDGET" | "INPUT_WIDGET" - | "TOGGLE_WIDGET" + | "SWITCH_WIDGET" + | "ALERT_WIDGET" export const WidgetTypes: {[id: string]: WidgetType } = { BUTTON_WIDGET: "BUTTON_WIDGET", TEXT_WIDGET: "TEXT_WIDGET", + IMAGE_WIDGET: "IMAGE_WIDGET", INPUT_WIDGET: "INPUT_WIDGET", - TOGGLE_WIDGET: "TOGGLE_WIDGET", + SWITCH_WIDGET: "SWITCH_WIDGET", + CONTAINER_WIDGET: "CONTAINER_WIDGET", + SPINNER_WIDGET: "SPINNER_WIDGET", + DATE_PICKER_WIDGET: "DATE_PICKER_WIDGET", + TABLE_WIDGET: "TABLE_WIDGET", + DROP_DOWN_WIDGET: "DROP_DOWN_WIDGET", + CHECKBOX_WIDGET: "CHECKBOX_WIDGET", + RADIO_GROUP_WIDGET: "RADIO_GROUP_WIDGET", + ALERT_WIDGET: "ALERT_WIDGET" } export type ContainerOrientation = "HORIZONTAL" | "VERTICAL" diff --git a/app/client/src/editorComponents/CheckboxComponent.tsx b/app/client/src/editorComponents/CheckboxComponent.tsx index c2d1bace36..aa31dad639 100644 --- a/app/client/src/editorComponents/CheckboxComponent.tsx +++ b/app/client/src/editorComponents/CheckboxComponent.tsx @@ -5,25 +5,17 @@ import { Container } from "./ContainerComponent"; class CheckboxComponent extends React.Component { render() { return ( - - {this.props.items.map(item => ( - ))} - + label={this.props.label} + defaultIndeterminate={this.props.defaultCheckedState} + /> ); } } export interface ICheckboxComponentProps extends ComponentProps { - items: Array<{ - label: string; - defaultIndeterminate: boolean; - value: number | string; - }>; + label: string + defaultCheckedState: boolean } export default CheckboxComponent; diff --git a/app/client/src/editorComponents/RadioGroupComponent.tsx b/app/client/src/editorComponents/RadioGroupComponent.tsx index 61c7eae7cb..9e8f325245 100644 --- a/app/client/src/editorComponents/RadioGroupComponent.tsx +++ b/app/client/src/editorComponents/RadioGroupComponent.tsx @@ -2,42 +2,21 @@ import * as React from "react" import { ComponentProps } from "./BaseComponent" import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core" import { Container } from "./ContainerComponent" +import { RadioOption } from '../widgets/RadioGroupWidget'; class RadioGroupComponent extends React.Component { render() { return ( - - {this.props.items.map(item => ( - - ))} - +
) } } export interface RadioGroupComponentProps extends ComponentProps { - label: string; - inline: boolean; - selectedValue: string | number; - handleRadioChange: (event: React.FormEvent) => void; - disabled: boolean; - className: string; - name: string; - options: IOptionProps[]; - items: Array<{ - label: string; - value: number | string; - }>; + label: string + options: RadioOption[] + defaultOptionValue: string } export default RadioGroupComponent diff --git a/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx b/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx index 6ff551266f..d868139fd9 100644 --- a/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx +++ b/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx @@ -14,11 +14,6 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = { widgetType: "BUTTON_WIDGET", icon: "appsmith-widget-button", label: "Button", - }, - { - widgetType: "CALLOUT_WIDGET", - icon: "appsmith-widget-alert", - label: "Callout", } ], view: [ diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx new file mode 100644 index 0000000000..07d9840d50 --- /dev/null +++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx @@ -0,0 +1,86 @@ +import { WidgetConfigReducerState } from '../reducers/entityReducers/widgetConfigReducer.tsx'; + +const WidgetConfigResponse: WidgetConfigReducerState = { + BUTTON_WIDGET: { + text: "Submit", + buttonStyle: "PRIMARY_BUTTON", + rows: 1, + columns: 2 + }, + TEXT_WIDGET: { + text: "Not all labels are bad!", + textStyle: "LABEL", + rows: 1, + columns: 3 + }, + IMAGE_WIDGET: { + defaultImage: "", + imageShape: "RECTANGLE", + image: "", + rows: 3, + columns: 3 + }, + INPUT_WIDGET: { + inputType: "TEXT", + label: "Label me", + rows: 1, + columns: 3 + }, + SWITCH_WIDGET: { + isOn: false, + label: "Turn me on", + rows: 1, + columns: 4 + }, + CONTAINER_WIDGET: { + backgroundColor: "#FFFFFF", + rows: 1, + columns: 4 + }, + SPINNER_WIDGET: { + rows: 1, + columns: 1 + }, + DATE_PICKER_WIDGET: { + enableTime: false, + datePickerType: "DATE_PICKER", + rows: 1, + columns: 3, + label: "Date" + }, + TABLE_WIDGET: { + rows: 5, + columns: 7, + label: "Don't table me!" + }, + DROP_DOWN_WIDGET: { + rows: 1, + columns: 3, + type: "SINGLE_SELECT", + label: "Pick me!" + }, + CHECKBOX_WIDGET:{ + rows: 1, + columns: 3, + label: "Label - CHECK!", + defaultCheckedState: true + }, + RADIO_GROUP_WIDGET: { + rows: 3, + columns: 3, + label: "Alpha - come in!", + options: [{ label: "Alpha", value: "1" }, { label: "Bravo", value: "2", }, { label: "Charlie", value: "3", }], + defaultOptionValue: "1" + }, + ALERT_WIDGET: { + alertType: "NOTIFICATION", + intent: "SUCCESS", + rows: 3, + columns: 3, + header: "", + message: "" + } +}; + + +export default WidgetConfigResponse; diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index 3a23ee369a..8e15d23014 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/app/client/src/pages/Editor/Canvas.tsx @@ -60,7 +60,7 @@ const Canvas = (props: CanvasProps) => { }, }) - useLayoutEffect(()=> { + useLayoutEffect(() => { const el = artBoardMask.current if (el) { const rect = el.getBoundingClientRect() @@ -71,10 +71,10 @@ const Canvas = (props: CanvasProps) => { return ( - - - {props.pageWidget && WidgetFactory.createWidget(props.pageWidget)} - + + + {props.pageWidget && WidgetFactory.createWidget(props.pageWidget)} + ) } diff --git a/app/client/src/pages/Editor/EditorDragLayer.tsx b/app/client/src/pages/Editor/EditorDragLayer.tsx index b77237bcaa..a4a1b07e35 100644 --- a/app/client/src/pages/Editor/EditorDragLayer.tsx +++ b/app/client/src/pages/Editor/EditorDragLayer.tsx @@ -61,6 +61,7 @@ const EditorDragLayer: React.FC = () => { function renderItem() { return WidgetFactory.createWidget({ widgetType: itemType as WidgetType, + widgetName: "", widgetId: item.key, topRow: 10, leftColumn: 10, diff --git a/app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx b/app/client/src/reducers/entityReducers/canvasWidgetsReducer.tsx similarity index 100% rename from app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx rename to app/client/src/reducers/entityReducers/canvasWidgetsReducer.tsx diff --git a/app/client/src/reducers/entityReducers/index.tsx b/app/client/src/reducers/entityReducers/index.tsx index 8601b059db..82782c1d2a 100644 --- a/app/client/src/reducers/entityReducers/index.tsx +++ b/app/client/src/reducers/entityReducers/index.tsx @@ -1,5 +1,5 @@ import { combineReducers } from "redux" -import canvasWidgetsReducer from "./canvasWidgetsReducers" +import canvasWidgetsReducer from "./canvasWidgetsReducer" const entityReducer = combineReducers({ canvasWidgets: canvasWidgetsReducer }) export default entityReducer diff --git a/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx.tsx b/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx.tsx new file mode 100644 index 0000000000..b7d3242d8e --- /dev/null +++ b/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx.tsx @@ -0,0 +1,55 @@ +import { createReducer } from "../../utils/AppsmithUtils" +import { + ActionTypes, + ReduxAction, + LoadWidgetConfigPayload +} from "../../constants/ActionConstants" +import { IWidgetProps } from "../../widgets/BaseWidget" +import WidgetConfigResponse from '../../mockResponses/WidgetConfigResponse'; +import { ButtonWidgetProps } from '../../widgets/ButtonWidget'; +import { TextWidgetProps } from '../../widgets/TextWidget'; +import { ContainerWidgetProps } from '../../widgets/ContainerWidget'; +import { ImageWidgetProps } from '../../widgets/ImageWidget'; +import { InputWidgetProps } from '../../widgets/InputWidget'; +import { SwitchWidgetProps } from '../../widgets/SwitchWidget'; +import SpinnerWidget from '../../widgets/SpinnerWidget'; +import { DatePickerWidgetProps } from '../../widgets/DatePickerWidget'; +import { TableWidgetProps } from '../../widgets/TableWidget'; +import { DropdownWidgetProps } from '../../widgets/DropdownWidget'; +import { CheckboxWidgetProps } from '../../widgets/CheckboxWidget'; +import { RadioGroupWidgetProps } from '../../widgets/RadioGroupWidget'; +import { AlertWidgetProps } from '../../widgets/AlertWidget'; + +const initialState: WidgetConfigReducerState = WidgetConfigResponse + +export interface WidgetConfigProps { + rows: number + columns: number +} + +export interface WidgetConfigReducerState { + BUTTON_WIDGET: Partial & WidgetConfigProps + TEXT_WIDGET: Partial & WidgetConfigProps + IMAGE_WIDGET: Partial & WidgetConfigProps + INPUT_WIDGET: Partial & WidgetConfigProps + SWITCH_WIDGET: Partial & WidgetConfigProps + CONTAINER_WIDGET: Partial> & WidgetConfigProps + SPINNER_WIDGET: Partial & WidgetConfigProps + DATE_PICKER_WIDGET: Partial & WidgetConfigProps + TABLE_WIDGET: Partial & WidgetConfigProps + DROP_DOWN_WIDGET: Partial & WidgetConfigProps + CHECKBOX_WIDGET: Partial & WidgetConfigProps + RADIO_GROUP_WIDGET: Partial & WidgetConfigProps + ALERT_WIDGET: Partial & WidgetConfigProps +} + +const widgetConfigReducer = createReducer(initialState, { + [ActionTypes.LOAD_WIDGET_CONFIG]: ( + state: WidgetConfigReducerState, + action: ReduxAction + ) => { + return { ...action.payload.widgets } + } +}) + +export default widgetConfigReducer diff --git a/app/client/src/reducers/index.tsx b/app/client/src/reducers/index.tsx index 5b42b897f5..4a031876e4 100644 --- a/app/client/src/reducers/index.tsx +++ b/app/client/src/reducers/index.tsx @@ -2,7 +2,7 @@ import { combineReducers } from "redux" import entityReducer from "./entityReducers" import uiReducer from "./uiReducers" import { CanvasReduxState } from "./uiReducers/canvasReducer" -import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers" +import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducer" import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer" import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer" import { EditorReduxState } from "./uiReducers/editorReducer" diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx index 1971eec473..748d102251 100644 --- a/app/client/src/utils/WidgetRegistry.tsx +++ b/app/client/src/utils/WidgetRegistry.tsx @@ -3,19 +3,10 @@ import ContainerWidget, { ContainerWidgetProps } from "../widgets/ContainerWidget" import TextWidget, { TextWidgetProps } from "../widgets/TextWidget" -import InputGroupWidget, { - InputGroupWidgetProps -} from "../widgets/InputGroupWidget" -import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget" -import IconWidget, { IconWidgetProps } from "../widgets/IconWidget" +import InputWidget, { + InputWidgetProps +} from "../widgets/InputWidget" import SpinnerWidget, { SpinnerWidgetProps } from "../widgets/SpinnerWidget" -import BreadcrumbsWidget, { - BreadcrumbsWidgetProps -} from "../widgets/BreadcrumbsWidget" -import TagInputWidget, { TagInputWidgetProps } from "../widgets/TagInputWidget" -import NumericInputWidget, { - NumericInputWidgetProps -} from "../widgets/NumericInputWidget" import CheckboxWidget, { CheckboxWidgetProps } from "../widgets/CheckboxWidget" import RadioGroupWidget, { RadioGroupWidgetProps @@ -46,45 +37,15 @@ class WidgetBuilderRegistry { } }) - WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", { - buildWidget(widgetData: CalloutWidgetProps): JSX.Element { - return - } - }) - - WidgetFactory.registerWidgetBuilder("ICON_WIDGET", { - buildWidget(widgetData: IconWidgetProps): JSX.Element { - return - } - }) - WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", { buildWidget(widgetData: SpinnerWidgetProps): JSX.Element { return } }) - WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", { - buildWidget(widgetData: InputGroupWidgetProps): JSX.Element { - return - } - }) - - WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", { - buildWidget(widgetData: BreadcrumbsWidgetProps): JSX.Element { - return - } - }) - - WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", { - buildWidget(widgetData: TagInputWidgetProps): JSX.Element { - return - } - }) - - WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", { - buildWidget(widgetData: NumericInputWidgetProps): JSX.Element { - return + WidgetFactory.registerWidgetBuilder("INPUT_WIDGET", { + buildWidget(widgetData: InputWidgetProps): JSX.Element { + return } }) diff --git a/app/client/src/widgets/AlertWidget.tsx b/app/client/src/widgets/AlertWidget.tsx new file mode 100644 index 0000000000..9925ceed27 --- /dev/null +++ b/app/client/src/widgets/AlertWidget.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; +import { WidgetType } from "../constants/WidgetConstants"; +import CalloutComponent from "../editorComponents/CalloutComponent"; + +class AlertWidget extends BaseWidget { + getPageView() { + return ( +
+ ); + } + + getWidgetType(): WidgetType { + return "ALERT_WIDGET"; + } +} + +export type AlertType = "DIALOG" | "NOTIFICATION" +export type MessageIntent = "SUCCESS" | "ERROR" | "INFO" | "WARNING" + +export interface AlertWidgetProps extends IWidgetProps { + alertType: AlertType + intent: MessageIntent + header: string + message: string +} + +export default AlertWidget; diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx index 4ad822b9c8..c8c3adf66f 100644 --- a/app/client/src/widgets/BaseWidget.tsx +++ b/app/client/src/widgets/BaseWidget.tsx @@ -151,9 +151,10 @@ export interface IWidgetBuilder { } export interface IWidgetProps { - widgetType: WidgetType; - key?: string; widgetId: string; + widgetType: WidgetType; + widgetName: string; + key?: string; topRow: number; leftColumn: number; bottomRow: number; @@ -161,6 +162,7 @@ export interface IWidgetProps { parentColumnSpace: number; parentRowSpace: number; renderMode: RenderMode; + isVisible?: boolean } export interface WidgetCardProps { diff --git a/app/client/src/widgets/BreadcrumbsWidget.tsx b/app/client/src/widgets/BreadcrumbsWidget.tsx deleted file mode 100644 index 0ba2802903..0000000000 --- a/app/client/src/widgets/BreadcrumbsWidget.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react" -import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" -import { WidgetType } from "../constants/WidgetConstants" -import { Boundary, IBreadcrumbProps } from "@blueprintjs/core" -import BreadcrumbsComponent from "../editorComponents/BreadcrumbsComponent" - -class BreadcrumbsWidget extends BaseWidget< - BreadcrumbsWidgetProps, - IWidgetState -> { - - getPageView() { - return ( - - ) - } - - getWidgetType(): WidgetType { - return "BREADCRUMBS_WIDGET" - } -} - -export interface BreadcrumbsWidgetProps extends IWidgetProps { - width?: number; - collapseFrom?: Boundary; - className?: string; - minVisibleItems?: number; - items?: IBreadcrumbProps[]; -} - -export default BreadcrumbsWidget diff --git a/app/client/src/widgets/ButtonWidget.tsx b/app/client/src/widgets/ButtonWidget.tsx index 78b90ac75d..b172cf1950 100644 --- a/app/client/src/widgets/ButtonWidget.tsx +++ b/app/client/src/widgets/ButtonWidget.tsx @@ -21,9 +21,11 @@ class ButtonWidget extends BaseWidget { } } +export type ButtonStyle = "PRIMARY_BUTTON" | "SECONDARY_BUTTON" | "SUCCESS_BUTTON" | "DANGER_BUTTON" + export interface ButtonWidgetProps extends IWidgetProps { text?: string; - ellipsize?: boolean; + buttonStyle?: ButtonStyle } export default ButtonWidget diff --git a/app/client/src/widgets/CalloutWidget.tsx b/app/client/src/widgets/CalloutWidget.tsx deleted file mode 100644 index aba29e6743..0000000000 --- a/app/client/src/widgets/CalloutWidget.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; -import { Intent } from "@blueprintjs/core"; -import { WidgetType } from "../constants/WidgetConstants"; -import CalloutComponent from "../editorComponents/CalloutComponent"; - -class CalloutWidget extends BaseWidget { - getPageView() { - return ( - - ); - } - - getWidgetType(): WidgetType { - return "CALLOUT_WIDGET"; - } -} - -export interface CalloutWidgetProps extends IWidgetProps { - id?: string; - title?: string; - description?: string; - intent?: Intent; - ellipsize?: boolean; -} - -export default CalloutWidget; diff --git a/app/client/src/widgets/CheckboxWidget.tsx b/app/client/src/widgets/CheckboxWidget.tsx index 46a1954ed4..b4937d896f 100644 --- a/app/client/src/widgets/CheckboxWidget.tsx +++ b/app/client/src/widgets/CheckboxWidget.tsx @@ -8,24 +8,22 @@ class CheckboxWidget extends BaseWidget { return ( ) } getWidgetType(): WidgetType { - return "ICON_WIDGET" + return "CHECKBOX_WIDGET" } } export interface CheckboxWidgetProps extends IWidgetProps { - items: Array<{ - label: string; - defaultIndeterminate: boolean; - value: number | string; - }>; + label: string + defaultCheckedState: boolean } export default CheckboxWidget diff --git a/app/client/src/widgets/DatePickerWidget.tsx b/app/client/src/widgets/DatePickerWidget.tsx new file mode 100644 index 0000000000..85bc58c8a4 --- /dev/null +++ b/app/client/src/widgets/DatePickerWidget.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; +import { WidgetType } from "../constants/WidgetConstants"; +import { Moment } from 'moment'; + +class DatePickerWidget extends BaseWidget< + DatePickerWidgetProps, + IWidgetState +> { + + getPageView() { + return ( +
+ ); + } + + getWidgetType(): WidgetType { + return "DATE_PICKER_WIDGET"; + } +} + +//Taken from https://blueprintjs.com/docs/#timezone/timezone-picker, needs to be completed with entire list +export type TimeZone = "Asia/Kolkata" | "Pacific/Midway" +export type DatePickerType = "DATE_PICKER" | "DATE_RANGE_PICKER" + +export interface DatePickerWidgetProps extends IWidgetProps { + defaultDate?: Date + timezone?: TimeZone + enableTime: boolean + label: string + datePickerType: DatePickerType +} + +export default DatePickerWidget; diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx new file mode 100644 index 0000000000..1b7b50fd68 --- /dev/null +++ b/app/client/src/widgets/DropdownWidget.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; +import { WidgetType } from "../constants/WidgetConstants"; + +class DropdownWidget extends BaseWidget { + + getPageView() { + return ( +
+ ); + } + + getWidgetType(): WidgetType { + return "DROP_DOWN_WIDGET"; + } +} + +export type SelectionType = "SINGLE_SELECT" | "MULTI_SELECT>" +export interface DropdownOption { + label: string + value: string +} + +export interface DropdownWidgetProps extends IWidgetProps { + placeholder?: string; + label?: string + type: SelectionType + options?: DropdownOption[] +} + +export default DropdownWidget; diff --git a/app/client/src/widgets/IconWidget.tsx b/app/client/src/widgets/IconWidget.tsx deleted file mode 100644 index 24399c560b..0000000000 --- a/app/client/src/widgets/IconWidget.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; -import { WidgetType } from "../constants/WidgetConstants"; -import { Intent } from "@blueprintjs/core"; -import { IconName } from "@blueprintjs/icons"; -import IconComponent from "../editorComponents/IconComponent"; - -class IconWidget extends BaseWidget { - getPageView() { - return ( - - ); - } - - getWidgetType(): WidgetType { - return "ICON_WIDGET"; - } -} - -export interface IconWidgetProps extends IWidgetProps { - icon?: IconName; - iconSize?: number; - ellipsize?: boolean; - intent?: Intent; -} - -export default IconWidget; diff --git a/app/client/src/widgets/ImageWidget.tsx b/app/client/src/widgets/ImageWidget.tsx new file mode 100644 index 0000000000..6e66ad5ba9 --- /dev/null +++ b/app/client/src/widgets/ImageWidget.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" +import { WidgetType } from "../constants/WidgetConstants" + +class ImageWidget extends BaseWidget { + + getPageView() { + return ( +
+ ) + } + + getWidgetType(): WidgetType { + return "IMAGE_WIDGET" + } +} + +export type ImageShape = "RECTANGLE" | "CIRCLE" | "ROUNDED" + +export interface ImageWidgetProps extends IWidgetProps { + image: string + imageShape: ImageShape + defaultImage: string +} + +export default ImageWidget diff --git a/app/client/src/widgets/InputGroupWidget.tsx b/app/client/src/widgets/InputGroupWidget.tsx deleted file mode 100644 index fda9f9cf14..0000000000 --- a/app/client/src/widgets/InputGroupWidget.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; -import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; -import { WidgetType } from "../constants/WidgetConstants"; -import InputGroupComponent from "../editorComponents/InputGroupComponent"; -import { IconName, Intent } from "@blueprintjs/core"; - -class InputGroupWidget extends BaseWidget< - InputGroupWidgetProps, - IWidgetState -> { - - getPageView() { - return ( - - ); - } - - getWidgetType(): WidgetType { - return "INPUT_GROUP_WIDGET"; - } -} - -export interface InputGroupWidgetProps extends IWidgetProps { - className?: string; - disabled?: boolean; - large?: boolean; - intent?: Intent; - defaultValue?: string; - leftIcon?: IconName; - rightElement?: JSX.Element; - round?: boolean; - small?: boolean; - type?: string; - value?: string; - placeholder?: string; -} - -export default InputGroupWidget; diff --git a/app/client/src/widgets/InputWidget.tsx b/app/client/src/widgets/InputWidget.tsx new file mode 100644 index 0000000000..2c5a044d21 --- /dev/null +++ b/app/client/src/widgets/InputWidget.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; +import { WidgetType } from "../constants/WidgetConstants"; + +class InputWidget extends BaseWidget< + InputWidgetProps, + IWidgetState +> { + + getPageView() { + return ( +
+ ); + } + + getWidgetType(): WidgetType { + return "INPUT_WIDGET"; + } +} + +export type InputType = "TEXT" | "NUMBER" | "INTEGER" | "PHONE_NUMBER" | "EMAIL" | "PASSWORD" | "CURRENCY" | "SEARCH" + +export interface InputWidgetProps extends IWidgetProps { + errorMessage?: string + inputType: InputType; + defaultText?: string; + placeholder?: string; + label: string; + focusIndex?: number +} + +export default InputWidget; diff --git a/app/client/src/widgets/NumericInputWidget.tsx b/app/client/src/widgets/NumericInputWidget.tsx deleted file mode 100644 index 75133711e1..0000000000 --- a/app/client/src/widgets/NumericInputWidget.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from "react" -import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" -import { WidgetType } from "../constants/WidgetConstants" -import NumericInputComponent from "../editorComponents/NumericInputComponent" -import { Intent, IconName } from "@blueprintjs/core" - -class NumericInputWidget extends BaseWidget< - NumericInputWidgetProps, - IWidgetState -> { - - getPageView() { - return ( - - ) - } - - getWidgetType(): WidgetType { - return "NUMERIC_INPUT_WIDGET" - } -} - -export interface NumericInputWidgetProps extends IWidgetProps { - className?: string; - disabled?: boolean; - large?: boolean; - intent?: Intent; - defaultValue?: string; - leftIcon?: IconName; - rightElement?: JSX.Element; - allowNumericCharactersOnly?: boolean; - fill?: boolean; - majorStepSize?: number | null; - max?: number; - min?: number; - minorStepSize?: number | null; - onValueChange?: (valueAsNumber: number, valueAsString: string) => void; - onButtonClick?: (valueAsNumber: number, valueAsString: string) => void; - inputRef?: (ref: HTMLInputElement | null) => any; - selectAllOnFocus?: boolean; - selectAllOnIncrement?: boolean; - stepSize?: number; - placeholder?: string; -} - -export default NumericInputWidget diff --git a/app/client/src/widgets/RadioGroupWidget.tsx b/app/client/src/widgets/RadioGroupWidget.tsx index 552fcc9cd9..9f6bedd2d5 100644 --- a/app/client/src/widgets/RadioGroupWidget.tsx +++ b/app/client/src/widgets/RadioGroupWidget.tsx @@ -4,7 +4,7 @@ import { WidgetType } from "../constants/WidgetConstants" import RadioGroupComponent from "../editorComponents/RadioGroupComponent" import { IOptionProps } from "@blueprintjs/core" -class RadioButtonWidget extends BaseWidget< +class RadioGroupWidget extends BaseWidget< RadioGroupWidgetProps, IWidgetState > { @@ -15,14 +15,8 @@ class RadioButtonWidget extends BaseWidget< style={this.getPositionStyle()} widgetId={this.props.widgetId} key={this.props.widgetId} - inline={this.props.inline} label={this.props.label} - name={this.props.name} - handleRadioChange={this.props.handleRadioChange} - selectedValue={this.props.selectedValue} - items={this.props.items} - disabled={this.props.disabled} - className={this.props.className} + defaultOptionValue={this.props.defaultOptionValue} options={this.props.options} /> ) @@ -33,19 +27,15 @@ class RadioButtonWidget extends BaseWidget< } } -export interface RadioGroupWidgetProps extends IWidgetProps { - label: string; - inline: boolean; - selectedValue: string | number; - handleRadioChange: (event: React.FormEvent) => void; - disabled: boolean; - className: string; - name: string; - options: IOptionProps[]; - items: Array<{ - label: string; - value: number | string; - }>; +export interface RadioOption { + label: string + value: string } -export default RadioButtonWidget +export interface RadioGroupWidgetProps extends IWidgetProps { + label: string + options: RadioOption[] + defaultOptionValue: string +} + +export default RadioGroupWidget diff --git a/app/client/src/widgets/SwitchWidget.tsx b/app/client/src/widgets/SwitchWidget.tsx new file mode 100644 index 0000000000..6614163196 --- /dev/null +++ b/app/client/src/widgets/SwitchWidget.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; +import { WidgetType } from "../constants/WidgetConstants"; + +class SwitchWidget extends BaseWidget< + SwitchWidgetProps, + IWidgetState +> { + + getPageView() { + return ( +
+ ); + } + + getWidgetType(): WidgetType { + return "SWITCH_WIDGET"; + } +} + +export interface SwitchWidgetProps extends IWidgetProps { + isOn: boolean + label: string +} + +export default SwitchWidget; diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx new file mode 100644 index 0000000000..9ecdfcd161 --- /dev/null +++ b/app/client/src/widgets/TableWidget.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; +import { WidgetType } from "../constants/WidgetConstants"; +import TextComponent from "../editorComponents/TextComponent"; + +class TableWidget extends BaseWidget { + + getPageView() { + return ( +
+ ); + } + + getWidgetType(): WidgetType { + return "TABLE_WIDGET"; + } +} + +export type PaginationType = "PAGES" | "INFINITE_SCROLL" + +export interface TableWidgetProps extends IWidgetProps { + pageKey?: string; + label: string + tableData?: object[] +} + +export default TableWidget; diff --git a/app/client/src/widgets/TagInputWidget.tsx b/app/client/src/widgets/TagInputWidget.tsx deleted file mode 100644 index 3b1e5db2fa..0000000000 --- a/app/client/src/widgets/TagInputWidget.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; -import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; -import { WidgetType } from "../constants/WidgetConstants"; -import TagInputComponent from "../editorComponents/TagInputComponent"; -import { Intent, ITagProps, HTMLInputProps } from "@blueprintjs/core"; - - -class TagInputWidget extends BaseWidget { - - getPageView() { - return ( - - ); - } - - getWidgetType(): WidgetType { - return "TAG_INPUT_WIDGET"; - } -} - -export interface TagInputWidgetProps extends IWidgetProps { - addOnPaste?: boolean; - className?: string; - disabled?: boolean; - fill?: boolean; - inputProps?: HTMLInputProps; - inputValue?: string; //Controlled value of the element. - intent?: Intent; - large?: boolean; //Whether the tag input should use a large size - onInputChange?: React.FormEventHandler; - placeholder?: string; - rightElement?: JSX.Element; - separator?: string | RegExp | false; - tagProps?: ITagProps; - values?: string[]; //Required field -} - -export default TagInputWidget; diff --git a/app/client/src/widgets/TextWidget.tsx b/app/client/src/widgets/TextWidget.tsx index 1875a603fc..9c45cbb63b 100644 --- a/app/client/src/widgets/TextWidget.tsx +++ b/app/client/src/widgets/TextWidget.tsx @@ -22,9 +22,11 @@ class TextWidget extends BaseWidget { } } +export type TextStyle = "BODY" | "HEADING" | "LABEL" | "SUB_TEXT" + export interface TextWidgetProps extends IWidgetProps { text?: string; - ellipsize?: boolean; + textStyle?: TextStyle tagName?: keyof JSX.IntrinsicElements; }