fixed heights for all components

app/client/src/editorComponents/ContainerComponent.tsx

@@ -6,9 +6,9 @@ import React from "react"
 const Container = styled("div")<IContainerProps>`
   display: "flex"
   flexDirection: ${(props) => { return props.orientation === "HORIZONTAL" ? "row" : "column" }};
-  background: ${props => props.theme.secondaryColor};
+  background: ${props => props.style.backgroundColor};
   color: ${props => props.theme.primaryColor};
-  position: ${props => props.style.positionType};
+  position: ${props => { return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative" }};
   left: ${props => {
     return props.style.xPosition + props.style.xPositionUnit
   }};

app/client/src/mockResponses/CanvasResponse.tsx

@@ -4,6 +4,7 @@ import ContainerWidget, {
   IContainerWidgetProps
 } from "../widgets/ContainerWidget";
 import { RenderModes } from "../constants/WidgetConstants";
+import { Colors } from "../constants/StyleConstants";
 
 const CanvasResponse: IContainerWidgetProps<any> = {
   widgetId: "0",
@@ -12,7 +13,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
   snapRows: 10,
   topRow: 100,
   bottomRow: 700,
-  leftColumn: 200,
+  leftColumn: 100,
   rightColumn: 800,
   parentColumnSpace: 1,
   parentRowSpace: 1,
@@ -22,10 +23,10 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       widgetId: "1",
       widgetType: "TEXT_WIDGET",
       topRow: 2,
-      leftColumn: 5,
+      leftColumn: 1,
       bottomRow: 5,
-      rightColumn: 5,
+      rightColumn: 3,
-      text: "Lorem Ipsum",
+      text: "Lorem Ipsum asda asd kjhsadjhas kdh kashkjdas kdhas d as",
       renderMode: RenderModes.CANVAS
     },
     {
@@ -43,7 +44,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       widgetType: "INPUT_GROUP_WIDGET",
       topRow: 1,
       leftColumn: 1,
-      bottomRow: 5,
+      bottomRow: 1,
       rightColumn: 5,
       placeholder: "Lorem Ipsum",
       renderMode: RenderModes.CANVAS

app/client/src/widgets/BaseWidget.tsx

@@ -16,9 +16,14 @@ import _ from "lodash"
 abstract class BaseWidget<
   T extends IWidgetProps,
   K extends IWidgetState
-> extends Component<T, K> {
+> extends Component<T, Partial<K>> {
   constructor(props: T) {
     super(props)
+    const initialState: Partial<K> = {
+    }
+    initialState.height = 0
+    initialState.width = 0
+    this.state = initialState
   }
 
   componentDidMount(): void {
@@ -99,6 +104,8 @@ abstract class BaseWidget<
         this.props.renderMode === RenderModes.COMPONENT_PANE
           ? "CONTAINER_DIRECTION"
           : "ABSOLUTE",
+      height: this.state.height,
+      width: this.state.width,
       yPosition: this.props.topRow * this.props.parentRowSpace,
       xPosition: this.props.leftColumn * this.props.parentColumnSpace,
       xPositionUnit: CSSUnits.PIXEL,

app/client/src/widgets/ContainerWidget.tsx

@@ -1,49 +1,50 @@
-import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
 import ContainerComponent, {
   IContainerProps
-} from "../editorComponents/ContainerComponent";
+} from "../editorComponents/ContainerComponent"
 import {
   ContainerOrientation,
   WidgetType,
   CSSUnits
-} from "../constants/WidgetConstants";
+} from "../constants/WidgetConstants"
-import WidgetFactory from "../utils/WidgetFactory";
+import WidgetFactory from "../utils/WidgetFactory"
-import React from "react";
+import React from "react"
-import _ from "lodash";
+import _ from "lodash"
+import { Color } from "../constants/StyleConstants"
 
-const DEFAULT_NUM_COLS = 13;
+const DEFAULT_NUM_COLS = 13
-const DEFAULT_NUM_ROWS = 13;
+const DEFAULT_NUM_ROWS = 13
 
 class ContainerWidget extends BaseWidget<
   IContainerWidgetProps<IWidgetProps>,
   IWidgetState
 > {
-  snapColumnSpace: number = 100;
+  snapColumnSpace: number = 100
-  snapRowSpace: number = 100;
+  snapRowSpace: number = 100
 
   constructor(props: IContainerWidgetProps<IWidgetProps>) {
-    super(props);
+    super(props)
-    this.renderChildWidget = this.renderChildWidget.bind(this);
+    this.renderChildWidget = this.renderChildWidget.bind(this)
     this.state = {
       width: 0,
       height: 0
     }
   }
 
-  componentDidUpdate(
+  componentDidUpdate(previousProps: IContainerWidgetProps<IWidgetProps>) {
-    previousProps: IContainerWidgetProps<IWidgetProps>
+    super.componentDidUpdate(previousProps)
-  ) {
+    if (this.state.width)
-    super.componentDidUpdate(previousProps);
+      this.snapColumnSpace =
-    this.snapColumnSpace =
+        this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS)
-      this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS);
+    if (this.state.height)
-    this.snapRowSpace =
+      this.snapRowSpace =
-      this.state.height / (this.props.snapRows || DEFAULT_NUM_ROWS);
+        this.state.height / (this.props.snapRows || DEFAULT_NUM_ROWS)
   }
 
   renderChildWidget(childWidgetData: IWidgetProps) {
-    childWidgetData.parentColumnSpace = this.snapColumnSpace;
+    childWidgetData.parentColumnSpace = this.snapColumnSpace
-    childWidgetData.parentRowSpace = this.snapRowSpace;
+    childWidgetData.parentRowSpace = this.snapRowSpace
-    return WidgetFactory.createWidget(childWidgetData);
+    return WidgetFactory.createWidget(childWidgetData)
   }
 
   getPageView() {
@@ -52,8 +53,7 @@ class ContainerWidget extends BaseWidget<
         widgetId={this.props.widgetId}
         style={{
           ...this.getPositionStyle(),
-          height: this.state.height,
+          backgroundColor: this.props.backgroundColor
-          width: this.state.width
         }}
         snapColumnSpace={this.snapColumnSpace}
         snapRowSpace={this.snapRowSpace}
@@ -63,20 +63,21 @@ 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[];
+  children?: T[]
-  snapColumns?: number;
+  snapColumns?: number
-  snapRows?: number;
+  snapRows?: number
-  orientation?: ContainerOrientation;
+  orientation?: ContainerOrientation
+  backgroundColor?: Color
 }
 
-export default ContainerWidget;
+export default ContainerWidget