diff --git a/app/client/package-lock.json b/app/client/package-lock.json index ca45726114..eb991bde32 100644 --- a/app/client/package-lock.json +++ b/app/client/package-lock.json @@ -1077,6 +1077,11 @@ "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.3.13.tgz", "integrity": "sha512-ePl4l+7dLLmCucIwgQHAgjiepY++qcI6nb8eAwGNkB6OxmTe3Z9rQU3rSpomqu42PCCnlThZbOoxsf+qylJsLA==" }, + "@types/lodash": { + "version": "4.14.120", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.120.tgz", + "integrity": "sha512-jQ21kQ120mo+IrDs1nFNVm/AsdFxIx2+vZ347DbogHJPd/JzKNMOqU6HCYin1W6v8l5R9XSO2/e9cxmn7HAnVw==" + }, "@types/moment-timezone": { "version": "0.5.10", "resolved": "https://registry.npmjs.org/@types/moment-timezone/-/moment-timezone-0.5.10.tgz", diff --git a/app/client/package.json b/app/client/package.json index cdb430df5c..b60e80392c 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -8,6 +8,7 @@ "@blueprintjs/icons": "^3.5.0", "@blueprintjs/table": "^3.4.0", "@types/jest": "^23.3.13", + "@types/lodash": "^4.14.120", "@types/moment-timezone": "^0.5.10", "@types/node": "^10.12.18", "@types/react": "^16.8.2", diff --git a/app/client/src/App.tsx b/app/client/src/App.tsx index a3205f3091..ad404d2811 100755 --- a/app/client/src/App.tsx +++ b/app/client/src/App.tsx @@ -1,12 +1,6 @@ import React, { Component } from 'react'; import logo from './assets/images/logo.svg'; import './App.css'; -import { createStore } from 'redux' -import appReducer from './reducers'; -import WidgetBuilderRegistry from "./utils/WidgetRegistry" - -WidgetBuilderRegistry.registerWidgetBuilders() -const store = createStore(appReducer) class App extends Component { render() { diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index af937453cb..53928be6fe 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/app/client/src/editorComponents/ContainerComponent.tsx @@ -4,8 +4,8 @@ import { ContainerOrientation } from "../constants/WidgetConstants" import styled from "styled-components" const Container = styled.div` - background: papayawhip; - color: ${props => (props.theme ? props.theme.colors.text : "white")}; + background: "black"; + color: "black"; ` class ContainerComponent extends BaseComponent { @@ -24,11 +24,11 @@ class ContainerComponent extends BaseComponent { export interface IContainerProps extends IComponentProps { children?: React.Component[] - snapColumnSpace: number - snapRowSpace: number - snapColumns: number - snapRows: number - orientation: ContainerOrientation + snapColumnSpace?: number + snapRowSpace?: number + snapColumns?: number + snapRows?: number + orientation?: ContainerOrientation } export default ContainerComponent diff --git a/app/client/src/editorComponents/TextComponent.tsx b/app/client/src/editorComponents/TextComponent.tsx index 8f54318b40..549951ed72 100644 --- a/app/client/src/editorComponents/TextComponent.tsx +++ b/app/client/src/editorComponents/TextComponent.tsx @@ -10,8 +10,8 @@ class TextComponent extends React.Component { } export interface ITextComponentProps extends IComponentProps { - text: string - ellipsize: boolean + text?: string + ellipsize?: boolean } export default TextComponent diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx index 81fbbad191..f7834b1861 100755 --- a/app/client/src/index.tsx +++ b/app/client/src/index.tsx @@ -1,20 +1,28 @@ import React from "react" import ReactDOM from "react-dom" +import { Provider } from "react-redux" import "./index.css" import App from "./App" import Editor from "./pages/Editor" import PageNotFound from "./pages/PageNotFound" import * as serviceWorker from "./serviceWorker" import { BrowserRouter, Route, Switch } from "react-router-dom" +import { createStore } from "redux" +import appReducer from "./reducers" +import WidgetBuilderRegistry from "./utils/WidgetRegistry" +WidgetBuilderRegistry.registerWidgetBuilders() +const store = createStore(appReducer) ReactDOM.render( - - - - - - - , + + + + + + + + + , document.getElementById("root") ) diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index 3fe4c9e57c..95513dc98e 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/app/client/src/pages/Editor/Canvas.tsx @@ -10,7 +10,7 @@ class Canvas extends Component<{ canvas: CanvasReduxState }> { if (canvasWidgetData) { const canvasWidget = WidgetFactory.createWidget(canvasWidgetData) return canvasWidget.getWidgetView() - } else return undefined + } else return
} } diff --git a/app/client/src/reducers/uiReducers/canvasReducer.tsx b/app/client/src/reducers/uiReducers/canvasReducer.tsx index 656e4407d8..2772d52210 100644 --- a/app/client/src/reducers/uiReducers/canvasReducer.tsx +++ b/app/client/src/reducers/uiReducers/canvasReducer.tsx @@ -7,7 +7,29 @@ import { import { IContainerWidgetProps } from "../../widgets/ContainerWidget" const initialState: CanvasReduxState = { - canvasWidgetProps: undefined + canvasWidgetProps: { + widgetId: "0", + widgetType: "CONTAINER_WIDGET", + children: [ + { + widgetId: "1", + widgetType: "TEXT_WIDGET", + //text: "Hello World", + topRow: 0, + leftColumn: 0, + bottomRow: 5, + rightColumn: 5, + parentColumnSpace: 100, + parentRowSpace: 100 + } + ], + topRow: 0, + bottomRow: 100, + leftColumn: 0, + rightColumn: 100, + parentColumnSpace: 1, + parentRowSpace: 1 + } } const canvasReducer = createReducer(initialState, { diff --git a/app/client/src/utils/WidgetFactory.tsx b/app/client/src/utils/WidgetFactory.tsx index a7538a8b74..edbe365348 100644 --- a/app/client/src/utils/WidgetFactory.tsx +++ b/app/client/src/utils/WidgetFactory.tsx @@ -4,7 +4,7 @@ import { IComponentProps } from "../editorComponents/BaseComponent"; class WidgetFactory { - static widgetMap: Map> + static widgetMap: Map> = new Map() static registerWidgetBuilder(widgetType: WidgetType, widgetBuilder: IWidgetBuilder) { this.widgetMap.set(widgetType, widgetBuilder) diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx index bc1d758601..e056ee6bc3 100644 --- a/app/client/src/utils/WidgetRegistry.tsx +++ b/app/client/src/utils/WidgetRegistry.tsx @@ -2,11 +2,16 @@ import BaseWidget from "../widgets/BaseWidget" import ContainerWidget, { IContainerWidgetProps } from "../widgets/ContainerWidget" +import TextWidget, { + ITextWidgetProps +} from "../widgets/TextWidget" import { IContainerProps } from "../editorComponents/ContainerComponent" import WidgetFactory from "./WidgetFactory" +import { ITextComponentProps } from "../editorComponents/TextComponent"; class WidgetBuilderRegistry { static registerWidgetBuilders() { + WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", { buildWidget( widgetData: IContainerWidgetProps @@ -14,6 +19,15 @@ class WidgetBuilderRegistry { return new ContainerWidget(widgetData) } }) + + WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", { + buildWidget( + widgetData: ITextWidgetProps + ): BaseWidget { + return new TextWidget(widgetData) + } + }) + } } diff --git a/app/client/src/widgets/ContainerWidget.tsx b/app/client/src/widgets/ContainerWidget.tsx index 4a09bb1630..9bf158f30a 100644 --- a/app/client/src/widgets/ContainerWidget.tsx +++ b/app/client/src/widgets/ContainerWidget.tsx @@ -12,12 +12,10 @@ class ContainerWidget extends BaseWidget< > { constructor(widgetProps: IContainerWidgetProps) { super(widgetProps) - if (this.widgetData) { - this.widgetData.snapColumns = 13 - this.widgetData.snapColumnSpace = this.width / this.widgetData.snapColumns - this.widgetData.snapRowSpace = 100 - this.widgetData.snapRows = this.height / this.widgetData.snapRowSpace - } + this.widgetData.snapColumns = 13 + this.widgetData.snapColumnSpace = this.width / this.widgetData.snapColumns + this.widgetData.snapRowSpace = 100 + this.widgetData.snapRows = this.height / this.widgetData.snapRowSpace } getComponentProps(): IContainerProps { @@ -36,8 +34,13 @@ class ContainerWidget extends BaseWidget< {this.widgetData.children ? this.widgetData.children.map(childWidgetData => { - childWidgetData.parentColumnSpace = this.widgetData.snapColumnSpace + childWidgetData.parentColumnSpace = this.widgetData + .snapColumnSpace + ? this.widgetData.snapColumnSpace + : 0 childWidgetData.parentRowSpace = this.widgetData.snapRowSpace + ? this.widgetData.snapRowSpace + : 0 return WidgetFactory.createWidget(childWidgetData).getWidgetView() }) : undefined} @@ -48,16 +51,15 @@ class ContainerWidget extends BaseWidget< getWidgetType(): WidgetType { return "CONTAINER_WIDGET" } - } export interface IContainerWidgetProps extends IWidgetProps { children?: IWidgetProps[] - snapColumnSpace: number - snapRowSpace: number - snapColumns: number - snapRows: number - orientation: ContainerOrientation + snapColumnSpace?: number + snapRowSpace?: number + snapColumns?: number + snapRows?: number + orientation?: ContainerOrientation } export default ContainerWidget diff --git a/app/client/src/widgets/TextWidget.tsx b/app/client/src/widgets/TextWidget.tsx new file mode 100644 index 0000000000..4a1f31e6aa --- /dev/null +++ b/app/client/src/widgets/TextWidget.tsx @@ -0,0 +1,41 @@ +import * as React from "react" +import BaseWidget, { IWidgetProps } from "./BaseWidget" +import { WidgetType } from "../constants/WidgetConstants" +import TextComponent, { + ITextComponentProps +} from "../editorComponents/TextComponent" +import _ from "lodash" + +class TextWidget extends BaseWidget { + constructor(widgetProps: ITextWidgetProps) { + super(widgetProps) + } + + getComponentProps(): ITextComponentProps { + return { + widgetId: this.widgetData.widgetId, + text: !_.isNil(this.widgetData.text) ? this.widgetData.text : "Hello World", + ellipsize: this.widgetData.ellipsize === true + } + } + + getWidgetView(): any { + return ( + + ) + } + + getWidgetType(): WidgetType { + return "TEXT_WIDGET" + } +} + +export interface ITextWidgetProps extends IWidgetProps { + text?: string + ellipsize?: boolean +} + +export default TextWidget