diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index d7cf936c46..e942581726 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/app/client/src/editorComponents/ContainerComponent.tsx @@ -5,7 +5,7 @@ import styled from "../constants/DefaultTheme" const Container = styled.div` background: ${props => props.theme.primaryColor}; - color: "black"; + color: ${props => props.theme.primaryColor}; ` class ContainerComponent extends BaseComponent { diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index 95513dc98e..f6d31bd741 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/app/client/src/pages/Editor/Canvas.tsx @@ -4,7 +4,7 @@ import { AppState } from "../../reducers" import WidgetFactory from "../../utils/WidgetFactory" import { CanvasReduxState } from "../../reducers/uiReducers/canvasReducer" -class Canvas extends Component<{ canvas: CanvasReduxState }> { +class Canvas extends Component<{ canvas: CanvasReduxState }> { render() { const canvasWidgetData = this.props.canvas.canvasWidgetProps if (canvasWidgetData) { diff --git a/app/client/src/reducers/index.tsx b/app/client/src/reducers/index.tsx index 69dda0d0b6..486101a656 100644 --- a/app/client/src/reducers/index.tsx +++ b/app/client/src/reducers/index.tsx @@ -13,7 +13,7 @@ export default appReducer export interface AppState { ui: { - canvas: CanvasReduxState + canvas: CanvasReduxState } entities: { canvasWidgets: CanvasWidgetsReduxState diff --git a/app/client/src/reducers/uiReducers/canvasReducer.tsx b/app/client/src/reducers/uiReducers/canvasReducer.tsx index dcf81e7457..1e08c589e4 100644 --- a/app/client/src/reducers/uiReducers/canvasReducer.tsx +++ b/app/client/src/reducers/uiReducers/canvasReducer.tsx @@ -5,8 +5,10 @@ import { ReduxAction } from "../../constants/ActionConstants" import { IContainerWidgetProps } from "../../widgets/ContainerWidget" +import { IWidgetProps } from "../../widgets/BaseWidget"; +import { ITextWidgetProps } from "../../widgets/TextWidget"; -const initialState: CanvasReduxState = { +const initialState: CanvasReduxState = { canvasWidgetProps: { widgetId: "0", widgetType: "CONTAINER_WIDGET", @@ -19,7 +21,8 @@ const initialState: CanvasReduxState = { bottomRow: 5, rightColumn: 5, parentColumnSpace: 100, - parentRowSpace: 100 + parentRowSpace: 100, + text: "whaat" } ], topRow: 0, @@ -33,15 +36,15 @@ const initialState: CanvasReduxState = { const canvasReducer = createReducer(initialState, { [ActionTypes.LOAD_CANVAS]: ( - state: CanvasReduxState, + state: CanvasReduxState, action: ReduxAction ) => { return { containerWidget: action.payload } } }) -export interface CanvasReduxState { - canvasWidgetProps?: IContainerWidgetProps +export interface CanvasReduxState { + canvasWidgetProps?: IContainerWidgetProps } export default canvasReducer diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx index e056ee6bc3..a8d11c9b65 100644 --- a/app/client/src/utils/WidgetRegistry.tsx +++ b/app/client/src/utils/WidgetRegistry.tsx @@ -1,4 +1,4 @@ -import BaseWidget from "../widgets/BaseWidget" +import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget" import ContainerWidget, { IContainerWidgetProps } from "../widgets/ContainerWidget" @@ -14,8 +14,8 @@ class WidgetBuilderRegistry { WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", { buildWidget( - widgetData: IContainerWidgetProps - ): BaseWidget { + widgetData: IContainerWidgetProps + ): BaseWidget, IContainerProps> { return new ContainerWidget(widgetData) } }) diff --git a/app/client/src/widgets/ContainerWidget.tsx b/app/client/src/widgets/ContainerWidget.tsx index 9bf158f30a..c2ea4d8981 100644 --- a/app/client/src/widgets/ContainerWidget.tsx +++ b/app/client/src/widgets/ContainerWidget.tsx @@ -7,10 +7,10 @@ import { ContainerOrientation, WidgetType } from "../constants/WidgetConstants" import WidgetFactory from "../utils/WidgetFactory" class ContainerWidget extends BaseWidget< - IContainerWidgetProps, + IContainerWidgetProps, IContainerProps > { - constructor(widgetProps: IContainerWidgetProps) { + constructor(widgetProps: IContainerWidgetProps) { super(widgetProps) this.widgetData.snapColumns = 13 this.widgetData.snapColumnSpace = this.width / this.widgetData.snapColumns @@ -53,8 +53,8 @@ class ContainerWidget extends BaseWidget< } } -export interface IContainerWidgetProps extends IWidgetProps { - children?: IWidgetProps[] +export interface IContainerWidgetProps extends IWidgetProps { + children?: T[] snapColumnSpace?: number snapRowSpace?: number snapColumns?: number