add : core component : input field

app/client/src/constants/WidgetConstants.tsx

@@ -1,10 +1,30 @@
-export type WidgetType = "TEXT_WIDGET" | "IMAGE_WIDGET" | "CONTAINER_WIDGET" | "LIST_WIDGET" | "INPUT_TEXT_WIDGET"
-export type ContainerOrientation = "HORIZONTAL" | "VERTICAL"
-export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION"
-export type CSSUnit = "px" | "cm" | "mm" | "in" | "pt" | "pc" | "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax" | "%"
+export type WidgetType =
+	| "TEXT_WIDGET"
+	| "IMAGE_WIDGET"
+	| "CONTAINER_WIDGET"
+	| "LIST_WIDGET"
+	| "INPUT_TEXT_WIDGET";
+export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";
+export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION";
+export type CSSUnit =
+	| "px"
+	| "cm"
+	| "mm"
+	| "in"
+	| "pt"
+	| "pc"
+	| "em"
+	| "ex"
+	| "ch"
+	| "rem"
+	| "vw"
+	| "vh"
+	| "vmin"
+	| "vmax"
+	| "%";
 
 export const CSSUnits: { [id: string]: CSSUnit } = {
-    PIXEL: "px",
-    RELATIVE_FONTSIZE: "em",
-    RELATIVE_PARENT: "%"
-}
+	PIXEL: "px",
+	RELATIVE_FONTSIZE: "em",
+	RELATIVE_PARENT: "%"
+};

app/client/src/editorComponents/InputTextComponent.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { IComponentProps } from "./BaseComponent";
+import styled from "../constants/DefaultTheme";
+
+const InputTextContainer = styled("span")<IInputTextComponentProps>`
+  color: ${props => props.theme.primaryColor};
+  position: ${props => props.style.positionType};
+  left: ${props => {
+    return props.style.xPosition + props.style.xPositionUnit;
+  }};
+  top: ${props => {
+    return props.style.yPosition + props.style.yPositionUnit;
+  }};
+`;
+
+class InputTextComponent extends React.Component<IInputTextComponentProps> {
+  render() {
+    return (
+      <InputTextContainer {...this.props}>
+        <input
+          placeholder={this.props.placeholder}
+          type={this.props.type}
+          id={this.props.id}
+          required={this.props.required}
+          minLength={this.props.minLength}
+          maxLength={this.props.maxLength}
+          size={this.props.size}
+        />
+      </InputTextContainer>
+    );
+  }
+}
+
+export interface IInputTextComponentProps extends IComponentProps {
+  id?: string;
+  type?: string;
+  placeholder?: string;
+  ellipsize?: boolean;
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  size?: number;
+}
+
+export default InputTextComponent;

app/client/src/mockResponses/CanvasResponse.ts

@@ -1,6 +1,8 @@
 import { CanvasReduxState } from "../reducers/uiReducers/canvasReducer";
 import { IWidgetProps } from "../widgets/BaseWidget";
-import ContainerWidget, { IContainerWidgetProps } from "../widgets/ContainerWidget";
+import ContainerWidget, {
+  IContainerWidgetProps
+} from "../widgets/ContainerWidget";
 
 const CanvasResponse: IContainerWidgetProps<any> = {
   widgetId: "0",
@@ -15,16 +17,22 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       leftColumn: 5,
       bottomRow: 5,
       rightColumn: 5,
-      text: "hey"
+      text: "Lorem Ipsum"
     },
     {
       widgetId: "1",
-      widgetType: "TEXT_WIDGET",
-      topRow: 6,
-      leftColumn: 5,
+      widgetType: "INPUT_TEXT_WIDGET",
+      topRow: 1,
+      leftColumn: 1,
       bottomRow: 5,
       rightColumn: 5,
-      text: "hey2"
+      placeholder: "Lorem Ipsum",
+      id: "sample_id",
+      type: "number",
+      required: false,
+      minLength: "4",
+      maxLength: "12",
+      size: "30"
     }
   ],
   topRow: 0,
@@ -33,6 +41,6 @@ const CanvasResponse: IContainerWidgetProps<any> = {
   rightColumn: 1200,
   parentColumnSpace: 1,
   parentRowSpace: 1
-}
+};
 
-export default CanvasResponse
+export default CanvasResponse;

app/client/src/utils/WidgetRegistry.tsx

@@ -1,33 +1,36 @@
-import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget"
+import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget";
 import ContainerWidget, {
   IContainerWidgetProps
-} from "../widgets/ContainerWidget"
-import TextWidget, {
-  ITextWidgetProps
-} from "../widgets/TextWidget"
-import WidgetFactory from "./WidgetFactory"
-import React from "react"
+} from "../widgets/ContainerWidget";
+import TextWidget, { ITextWidgetProps } from "../widgets/TextWidget";
+import InputTextWidget, {
+  IInputTextWidgetProps
+} from "../widgets/InputTextWidget";
+import WidgetFactory from "./WidgetFactory";
+import React from "react";
 
 class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
-    
     WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
       buildWidget(
         widgetData: IContainerWidgetProps<IWidgetProps>
       ): JSX.Element {
-        return <ContainerWidget {...widgetData }/>
+        return <ContainerWidget {...widgetData} />;
       }
-    })
+    });
 
     WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", {
-      buildWidget(
-        widgetData: ITextWidgetProps
-      ): JSX.Element {
-        return <TextWidget {...widgetData} />
+      buildWidget(widgetData: ITextWidgetProps): JSX.Element {
+        return <TextWidget {...widgetData} />;
       }
-    })
-  
+    });
+
+    WidgetFactory.registerWidgetBuilder("INPUT_TEXT_WIDGET", {
+      buildWidget(widgetData: IInputTextWidgetProps): JSX.Element {
+        return <InputTextWidget {...widgetData} />;
+      }
+    });
   }
 }
 
-export default WidgetBuilderRegistry
+export default WidgetBuilderRegistry;

app/client/src/widgets/ContainerWidget.tsx

@@ -1,46 +1,50 @@
-import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
 import ContainerComponent, {
   IContainerProps
-} from "../editorComponents/ContainerComponent"
-import { ContainerOrientation, WidgetType, CSSUnits } from "../constants/WidgetConstants"
-import WidgetFactory from "../utils/WidgetFactory"
-import React from "react"
-import _ from "lodash"
+} from "../editorComponents/ContainerComponent";
+import {
+  ContainerOrientation,
+  WidgetType,
+  CSSUnits
+} from "../constants/WidgetConstants";
+import WidgetFactory from "../utils/WidgetFactory";
+import React from "react";
+import _ from "lodash";
 
-const DEFAULT_NUM_COLS = 13
-const DEFAULT_NUM_ROWS = 13
+const DEFAULT_NUM_COLS = 13;
+const DEFAULT_NUM_ROWS = 13;
 
 class ContainerWidget extends BaseWidget<
   IContainerWidgetProps<IWidgetProps>,
   IWidgetState
 > {
-  snapColumnSpace: number = 100
-  snapRowSpace: number = 100
+  snapColumnSpace: number = 100;
+  snapRowSpace: number = 100;
 
   constructor(props: IContainerWidgetProps<IWidgetProps>) {
-    super(props)
-    this.renderChildWidget = this.renderChildWidget.bind(this)
+    super(props);
+    this.renderChildWidget = this.renderChildWidget.bind(this);
     this.state = {
       height: 0,
       width: 0
-    }
+    };
   }
 
   componentWillReceiveProps(
     previousProps: IContainerWidgetProps<IWidgetProps>,
     nextProps: IContainerWidgetProps<IWidgetProps>
   ) {
-    super.componentWillReceiveProps(previousProps, nextProps)
+    super.componentWillReceiveProps(previousProps, nextProps);
     this.snapColumnSpace =
-      this.state.width / (nextProps.snapColumns || DEFAULT_NUM_COLS)
+      this.state.width / (nextProps.snapColumns || DEFAULT_NUM_COLS);
     this.snapRowSpace =
-      this.state.height / (nextProps.snapRows || DEFAULT_NUM_ROWS)
+      this.state.height / (nextProps.snapRows || DEFAULT_NUM_ROWS);
   }
 
   renderChildWidget(childWidgetData: IWidgetProps) {
-    childWidgetData.parentColumnSpace = this.snapColumnSpace
-    childWidgetData.parentRowSpace = this.snapRowSpace
-    return WidgetFactory.createWidget(childWidgetData)
+    childWidgetData.parentColumnSpace = this.snapColumnSpace;
+    childWidgetData.parentRowSpace = this.snapRowSpace;
+    return WidgetFactory.createWidget(childWidgetData);
   }
 
   getWidgetView() {
@@ -64,20 +68,20 @@ class ContainerWidget extends BaseWidget<
       >
         {_.map(this.props.children, this.renderChildWidget)}
       </ContainerComponent>
-    )
+    );
   }
 
   getWidgetType(): WidgetType {
-    return "CONTAINER_WIDGET"
+    return "CONTAINER_WIDGET";
   }
 }
 
 export interface IContainerWidgetProps<T extends IWidgetProps>
   extends IWidgetProps {
-  children?: T[]
-  snapColumns?: number
-  snapRows?: number
-  orientation?: ContainerOrientation
+  children?: T[];
+  snapColumns?: number;
+  snapRows?: number;
+  orientation?: ContainerOrientation;
 }
 
-export default ContainerWidget
+export default ContainerWidget;

app/client/src/widgets/InputTextWidget.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import InputTextComponent from "../editorComponents/InputTextComponent";
+import _ from "lodash";
+
+class InputTextWidget extends BaseWidget<IInputTextWidgetProps, IWidgetState> {
+  constructor(widgetProps: IInputTextWidgetProps) {
+    super(widgetProps);
+  }
+
+  getWidgetView() {
+    return (
+      <InputTextComponent
+        style={{
+          positionType: "ABSOLUTE",
+          yPosition: this.props.topRow * this.props.parentRowSpace,
+          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
+          xPositionUnit: CSSUnits.PIXEL,
+          yPositionUnit: CSSUnits.PIXEL
+        }}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        placeholder={this.props.placeholder}
+        id={this.props.id}
+        type={this.props.type}
+        required={this.props.required}
+        minLength={this.props.minLength}
+        maxLength={this.props.maxLength}
+        size={this.props.size}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "TEXT_WIDGET";
+  }
+}
+
+export interface IInputTextWidgetProps extends IWidgetProps {
+  type?: string;
+  id?: string;
+  placeholder?: string;
+  ellipsize?: boolean;
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  size?: number;
+}
+
+export default InputTextWidget;