Merge branch 'feature/widget_properties' into 'release'

Feature/widget properties

See merge request theappsmith/internal-tools-client!19

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[];
 }

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"
+  | "DATE_PICKER_WIDGET"
-  | "TAG_INPUT_WIDGET"
+  | "TABLE_WIDGET"
-  | "NUMERIC_INPUT_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"

app/client/src/editorComponents/CheckboxComponent.tsx

@@ -5,25 +5,17 @@ import { Container } from "./ContainerComponent";
 class CheckboxComponent extends React.Component<ICheckboxComponentProps> {
   render() {
     return (
-      <Container {...this.props}>
-        {this.props.items.map(item => (
           <Checkbox
-            label={item.label}
+            label={this.props.label}
-            defaultIndeterminate={item.defaultIndeterminate}
+            defaultIndeterminate={this.props.defaultCheckedState}
-            value={item.value}
+            />
-          />
-        ))}
-      </Container>
     );
   }
 }
 
 export interface ICheckboxComponentProps extends ComponentProps {
-  items: Array<{
+  label: string
-    label: string;
+  defaultCheckedState: boolean
-    defaultIndeterminate: boolean;
-    value: number | string;
-  }>;
 }
 
 export default CheckboxComponent;

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<RadioGroupComponentProps> {
   render() {
     return (
       <Container {...this.props}>
-        <RadioGroup
+        <div/>
-          inline={this.props.inline}
-          label={this.props.label}
-          name={this.props.name}
-          onChange={this.props.handleRadioChange}
-          selectedValue={this.props.selectedValue}
-          disabled={this.props.disabled}
-          className={this.props.className}
-          options={this.props.options}
-        >
-          {this.props.items.map(item => (
-            <Radio label={item.label} value={item.value} />
-          ))}
-        </RadioGroup>
       </Container>
     )
   }
 }
 
 export interface RadioGroupComponentProps extends ComponentProps {
-  label: string;
+  label: string
-  inline: boolean;
+  options: RadioOption[]
-  selectedValue: string | number;
+  defaultOptionValue: string
-  handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void;
-  disabled: boolean;
-  className: string;
-  name: string;
-  options: IOptionProps[];
-  items: Array<{
-    label: string;
-    value: number | string;
-  }>;
 }
 
 export default RadioGroupComponent

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: [

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;

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 (
     <React.Fragment>
       <EditorDragLayer />
-    <ArtBoard ref={drop} cellSize={(Math.floor(width / 16) - 1)+ "px"}>
+      <ArtBoard ref={drop} cellSize={(Math.floor(width / 16) - 1) + "px"}>
-      <ArtBoardBackgroundMask ref={artBoardMask}></ArtBoardBackgroundMask>
+        <ArtBoardBackgroundMask ref={artBoardMask}></ArtBoardBackgroundMask>
-      {props.pageWidget && WidgetFactory.createWidget(props.pageWidget)}
+        {props.pageWidget && WidgetFactory.createWidget(props.pageWidget)}
-    </ArtBoard>
+      </ArtBoard>
     </React.Fragment>
   )
 }

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,

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

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<ButtonWidgetProps> & WidgetConfigProps
+  TEXT_WIDGET: Partial<TextWidgetProps> & WidgetConfigProps
+  IMAGE_WIDGET: Partial<ImageWidgetProps> & WidgetConfigProps
+  INPUT_WIDGET: Partial<InputWidgetProps> & WidgetConfigProps
+  SWITCH_WIDGET: Partial<SwitchWidgetProps> & WidgetConfigProps
+  CONTAINER_WIDGET: Partial<ContainerWidgetProps<IWidgetProps>> & WidgetConfigProps
+  SPINNER_WIDGET: Partial<SpinnerWidget> & WidgetConfigProps
+  DATE_PICKER_WIDGET: Partial<DatePickerWidgetProps> & WidgetConfigProps
+  TABLE_WIDGET: Partial<TableWidgetProps> & WidgetConfigProps
+  DROP_DOWN_WIDGET: Partial<DropdownWidgetProps> & WidgetConfigProps
+  CHECKBOX_WIDGET: Partial<CheckboxWidgetProps> & WidgetConfigProps
+  RADIO_GROUP_WIDGET: Partial<RadioGroupWidgetProps> & WidgetConfigProps
+  ALERT_WIDGET: Partial<AlertWidgetProps> & WidgetConfigProps
+}
+
+const widgetConfigReducer = createReducer(initialState, {
+  [ActionTypes.LOAD_WIDGET_CONFIG]: (
+    state: WidgetConfigReducerState,
+    action: ReduxAction<LoadWidgetConfigPayload>
+  ) => {
+    return { ...action.payload.widgets }
+  }
+})
+
+export default widgetConfigReducer

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"

app/client/src/utils/WidgetRegistry.tsx

@@ -3,19 +3,10 @@ import ContainerWidget, {
   ContainerWidgetProps
 } from "../widgets/ContainerWidget"
 import TextWidget, { TextWidgetProps } from "../widgets/TextWidget"
-import InputGroupWidget, {
+import InputWidget, {
-  InputGroupWidgetProps
+  InputWidgetProps
-} from "../widgets/InputGroupWidget"
+} from "../widgets/InputWidget"
-import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget"
-import IconWidget, { IconWidgetProps } from "../widgets/IconWidget"
 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 <CalloutWidget {...widgetData} />
-      }
-    })
-
-    WidgetFactory.registerWidgetBuilder("ICON_WIDGET", {
-      buildWidget(widgetData: IconWidgetProps): JSX.Element {
-        return <IconWidget {...widgetData} />
-      }
-    })
-
     WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
       buildWidget(widgetData: SpinnerWidgetProps): JSX.Element {
         return <SpinnerWidget {...widgetData} />
       }
     })
 
-    WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", {
+    WidgetFactory.registerWidgetBuilder("INPUT_WIDGET", {
-      buildWidget(widgetData: InputGroupWidgetProps): JSX.Element {
+      buildWidget(widgetData: InputWidgetProps): JSX.Element {
-        return <InputGroupWidget {...widgetData} />
+        return <InputWidget {...widgetData} />
-      }
-    })
-
-    WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", {
-      buildWidget(widgetData: BreadcrumbsWidgetProps): JSX.Element {
-        return <BreadcrumbsWidget {...widgetData} />
-      }
-    })
-
-    WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", {
-      buildWidget(widgetData: TagInputWidgetProps): JSX.Element {
-        return <TagInputWidget {...widgetData} />
-      }
-    })
-
-    WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", {
-      buildWidget(widgetData: NumericInputWidgetProps): JSX.Element {
-        return <NumericInputWidget {...widgetData} />
       }
     })
 

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<AlertWidgetProps, IWidgetState> {
+  getPageView() {
+    return (
+      <div/>
+    );
+  }
+
+  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;

app/client/src/widgets/BaseWidget.tsx

@@ -151,9 +151,10 @@ export interface IWidgetBuilder<T extends IWidgetProps> {
 }
 
 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 {

app/client/src/widgets/BreadcrumbsWidget.tsx

@@ -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 (
-      <BreadcrumbsComponent
-        style={this.getPositionStyle()}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        collapseFrom={this.props.collapseFrom}
-        items={this.props.items}
-        minVisibleItems={this.props.minVisibleItems}
-        className={this.props.className}
-      />
-    )
-  }
-
-  getWidgetType(): WidgetType {
-    return "BREADCRUMBS_WIDGET"
-  }
-}
-
-export interface BreadcrumbsWidgetProps extends IWidgetProps {
-  width?: number;
-  collapseFrom?: Boundary;
-  className?: string;
-  minVisibleItems?: number;
-  items?: IBreadcrumbProps[];
-}
-
-export default BreadcrumbsWidget

app/client/src/widgets/ButtonWidget.tsx

@@ -21,9 +21,11 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, IWidgetState> {
   }
 }
 
+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

app/client/src/widgets/CalloutWidget.tsx

@@ -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<CalloutWidgetProps, IWidgetState> {
-  getPageView() {
-    return (
-      <CalloutComponent
-        style={this.getPositionStyle()}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        id={this.props.id}
-        title={this.props.title}
-        description={this.props.description}
-        intent={this.props.intent}
-      />
-    );
-  }
-
-  getWidgetType(): WidgetType {
-    return "CALLOUT_WIDGET";
-  }
-}
-
-export interface CalloutWidgetProps extends IWidgetProps {
-  id?: string;
-  title?: string;
-  description?: string;
-  intent?: Intent;
-  ellipsize?: boolean;
-}
-
-export default CalloutWidget;

app/client/src/widgets/CheckboxWidget.tsx

@@ -8,24 +8,22 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, IWidgetState> {
     return (
       <CheckboxComponent
         style={this.getPositionStyle()}
+        defaultCheckedState={this.props.defaultCheckedState}
+        label={this.props.label}
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
-        items={this.props.items}
       />
     )
   }
 
   getWidgetType(): WidgetType {
-    return "ICON_WIDGET"
+    return "CHECKBOX_WIDGET"
   }
 }
 
 export interface CheckboxWidgetProps extends IWidgetProps {
-  items: Array<{
+  label: string
-    label: string;
+  defaultCheckedState: boolean
-    defaultIndeterminate: boolean;
-    value: number | string;
-  }>;
 }
 
 export default CheckboxWidget

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 (
+      <div/>
+    );
+  }
+
+  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;

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<DropdownWidgetProps, IWidgetState> {
+
+  getPageView() {
+    return (
+      <div/>
+    );
+  }
+
+  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;

app/client/src/widgets/IconWidget.tsx

@@ -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<IconWidgetProps, IWidgetState> {
-  getPageView() {
-    return (
-      <IconComponent
-        style={this.getPositionStyle()}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        icon={this.props.icon}
-        iconSize={this.props.iconSize}
-        intent={this.props.intent}
-      />
-    );
-  }
-
-  getWidgetType(): WidgetType {
-    return "ICON_WIDGET";
-  }
-}
-
-export interface IconWidgetProps extends IWidgetProps {
-  icon?: IconName;
-  iconSize?: number;
-  ellipsize?: boolean;
-  intent?: Intent;
-}
-
-export default IconWidget;

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<ImageWidgetProps, IWidgetState> {
+
+  getPageView() {
+    return (
+      <div/>
+    )
+  }
+
+  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

app/client/src/widgets/InputGroupWidget.tsx

@@ -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 (
-      <InputGroupComponent
-        style={this.getPositionStyle()}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        className={this.props.className}
-        disabled={this.props.disabled}
-        large={this.props.large}
-        leftIcon={this.props.leftIcon}
-        placeholder={this.props.placeholder}
-        rightElement={this.props.rightElement}
-        round={this.props.round}
-        small={this.props.small}
-        value={this.props.value}
-        intent={this.props.intent}
-        defaultValue={this.props.defaultValue}
-        type={this.props.type}
-      />
-    );
-  }
-
-  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;

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 (
+      <div/>
+    );
+  }
+
+  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;

app/client/src/widgets/NumericInputWidget.tsx

@@ -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 (
-      <NumericInputComponent
-        style={this.getPositionStyle()}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        placeholder="Enter a number..."
-        min={this.props.min}
-        max={this.props.max}
-        className={this.props.className}
-        disabled={this.props.disabled}
-        large={this.props.large}
-        intent={this.props.intent}
-        defaultValue={this.props.defaultValue}
-        leftIcon={this.props.leftIcon}
-        rightElement={this.props.rightElement}
-        allowNumericCharactersOnly={this.props.allowNumericCharactersOnly}
-        fill={this.props.fill}
-        majorStepSize={this.props.majorStepSize}
-        minorStepSize={this.props.minorStepSize}
-        onButtonClick={this.props.onButtonClick}
-        inputRef={this.props.inputRef}
-        selectAllOnFocus={this.props.selectAllOnFocus}
-        selectAllOnIncrement={this.props.selectAllOnIncrement}
-        stepSize={this.props.stepSize}
-      />
-    )
-  }
-
-  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

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}
+        defaultOptionValue={this.props.defaultOptionValue}
-        handleRadioChange={this.props.handleRadioChange}
-        selectedValue={this.props.selectedValue}
-        items={this.props.items}
-        disabled={this.props.disabled}
-        className={this.props.className}
         options={this.props.options}
       />
     )
@@ -33,19 +27,15 @@ class RadioButtonWidget extends BaseWidget<
   }
 }
 
-export interface RadioGroupWidgetProps extends IWidgetProps {
+export interface RadioOption {
-  label: string;
+  label: string
-  inline: boolean;
+  value: string
-  selectedValue: string | number;
-  handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void;
-  disabled: boolean;
-  className: string;
-  name: string;
-  options: IOptionProps[];
-  items: Array<{
-    label: string;
-    value: number | string;
-  }>;
 }
 
-export default RadioButtonWidget
+export interface RadioGroupWidgetProps extends IWidgetProps {
+  label: string
+  options: RadioOption[]
+  defaultOptionValue: string
+}
+
+export default RadioGroupWidget

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 (
+      <div/>
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "SWITCH_WIDGET";
+  }
+}
+
+export interface SwitchWidgetProps extends IWidgetProps {
+  isOn: boolean
+  label: string
+}
+
+export default SwitchWidget;

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<TableWidgetProps, IWidgetState> {
+
+  getPageView() {
+    return (
+      <div/>
+    );
+  }
+
+  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;

app/client/src/widgets/TagInputWidget.tsx

@@ -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<TagInputWidgetProps, IWidgetState> {
-
-  getPageView() {
-    return (
-      <TagInputComponent
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        style={this.getPositionStyle()}
-        placeholder={this.props.placeholder}
-        values={this.props.values}
-      />
-    );
-  }
-
-  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 <input> element.
-  intent?: Intent;
-  large?: boolean; //Whether the tag input should use a large size
-  onInputChange?: React.FormEventHandler<HTMLInputElement>;
-  placeholder?: string;
-  rightElement?: JSX.Element;
-  separator?: string | RegExp | false;
-  tagProps?: ITagProps;
-  values?: string[]; //Required field
-}
-
-export default TagInputWidget;

app/client/src/widgets/TextWidget.tsx

@@ -22,9 +22,11 @@ class TextWidget extends BaseWidget<TextWidgetProps, IWidgetState> {
   }
 }
 
+export type TextStyle = "BODY" | "HEADING" | "LABEL" | "SUB_TEXT"
+
 export interface TextWidgetProps extends IWidgetProps {
   text?: string;
-  ellipsize?: boolean;
+  textStyle?: TextStyle
   tagName?: keyof JSX.IntrinsicElements;
 }