From 96a47a9bb8bdb9d18909b229fe3e9279f11b1881 Mon Sep 17 00:00:00 2001 From: Nikhil Nandgopal Date: Tue, 19 Mar 2019 20:51:27 +0530 Subject: [PATCH] fixed heights for all components --- .../editorComponents/ContainerComponent.tsx | 4 +- .../src/mockResponses/CanvasResponse.tsx | 11 ++-- app/client/src/widgets/BaseWidget.tsx | 9 ++- app/client/src/widgets/ContainerWidget.tsx | 65 ++++++++++--------- 4 files changed, 49 insertions(+), 40 deletions(-) diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index 983ef4b5da..1d609d5701 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/app/client/src/editorComponents/ContainerComponent.tsx @@ -6,9 +6,9 @@ import React from "react" const Container = styled("div")` 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 }}; diff --git a/app/client/src/mockResponses/CanvasResponse.tsx b/app/client/src/mockResponses/CanvasResponse.tsx index f72d9ad65c..515502673b 100644 --- a/app/client/src/mockResponses/CanvasResponse.tsx +++ b/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 = { widgetId: "0", @@ -12,7 +13,7 @@ const CanvasResponse: IContainerWidgetProps = { snapRows: 10, topRow: 100, bottomRow: 700, - leftColumn: 200, + leftColumn: 100, rightColumn: 800, parentColumnSpace: 1, parentRowSpace: 1, @@ -22,10 +23,10 @@ const CanvasResponse: IContainerWidgetProps = { widgetId: "1", widgetType: "TEXT_WIDGET", topRow: 2, - leftColumn: 5, + leftColumn: 1, bottomRow: 5, - rightColumn: 5, - text: "Lorem Ipsum", + rightColumn: 3, + text: "Lorem Ipsum asda asd kjhsadjhas kdh kashkjdas kdhas d as", renderMode: RenderModes.CANVAS }, { @@ -43,7 +44,7 @@ const CanvasResponse: IContainerWidgetProps = { widgetType: "INPUT_GROUP_WIDGET", topRow: 1, leftColumn: 1, - bottomRow: 5, + bottomRow: 1, rightColumn: 5, placeholder: "Lorem Ipsum", renderMode: RenderModes.CANVAS diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx index 66a129f0e2..d6d9a75523 100644 --- a/app/client/src/widgets/BaseWidget.tsx +++ b/app/client/src/widgets/BaseWidget.tsx @@ -16,9 +16,14 @@ import _ from "lodash" abstract class BaseWidget< T extends IWidgetProps, K extends IWidgetState -> extends Component { +> extends Component> { constructor(props: T) { super(props) + const initialState: Partial = { + } + 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, diff --git a/app/client/src/widgets/ContainerWidget.tsx b/app/client/src/widgets/ContainerWidget.tsx index 9c53dac117..70519ca867 100644 --- a/app/client/src/widgets/ContainerWidget.tsx +++ b/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"; -import WidgetFactory from "../utils/WidgetFactory"; -import React from "react"; -import _ from "lodash"; +} from "../constants/WidgetConstants" +import WidgetFactory from "../utils/WidgetFactory" +import React from "react" +import _ from "lodash" +import { Color } from "../constants/StyleConstants" -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, IWidgetState > { - snapColumnSpace: number = 100; - snapRowSpace: number = 100; + snapColumnSpace: number = 100 + snapRowSpace: number = 100 constructor(props: IContainerWidgetProps) { - super(props); - this.renderChildWidget = this.renderChildWidget.bind(this); + super(props) + this.renderChildWidget = this.renderChildWidget.bind(this) this.state = { width: 0, height: 0 } } - componentDidUpdate( - previousProps: IContainerWidgetProps - ) { - super.componentDidUpdate(previousProps); - this.snapColumnSpace = - this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS); - this.snapRowSpace = - this.state.height / (this.props.snapRows || DEFAULT_NUM_ROWS); + componentDidUpdate(previousProps: IContainerWidgetProps) { + super.componentDidUpdate(previousProps) + if (this.state.width) + this.snapColumnSpace = + this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS) + if (this.state.height) + this.snapRowSpace = + this.state.height / (this.props.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) } getPageView() { @@ -52,8 +53,7 @@ class ContainerWidget extends BaseWidget< widgetId={this.props.widgetId} style={{ ...this.getPositionStyle(), - height: this.state.height, - width: this.state.width + backgroundColor: this.props.backgroundColor }} snapColumnSpace={this.snapColumnSpace} snapRowSpace={this.snapRowSpace} @@ -63,20 +63,21 @@ class ContainerWidget extends BaseWidget< > {_.map(this.props.children, this.renderChildWidget)} - ); + ) } getWidgetType(): WidgetType { - return "CONTAINER_WIDGET"; + return "CONTAINER_WIDGET" } } export interface IContainerWidgetProps extends IWidgetProps { - children?: T[]; - snapColumns?: number; - snapRows?: number; - orientation?: ContainerOrientation; + children?: T[] + snapColumns?: number + snapRows?: number + orientation?: ContainerOrientation + backgroundColor?: Color } -export default ContainerWidget; +export default ContainerWidget