Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fixed heights for all components

Browse Source
This commit is contained in:
Nikhil Nandgopal 2019-03-19 20:51:27 +05:30
parent 85b59b352d
commit 96a47a9bb8
4 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/src/editorComponents/ContainerComponent.tsx
View File

@ -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
}};

11
app/client/src/mockResponses/CanvasResponse.tsx
View File

@ -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,
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<any> = {
widgetType: "INPUT_GROUP_WIDGET",
topRow: 1,
leftColumn: 1,
bottomRow: 5,
bottomRow: 1,
rightColumn: 5,
placeholder: "Lorem Ipsum",
renderMode: RenderModes.CANVAS

9
app/client/src/widgets/BaseWidget.tsx
View File

@ -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,

65
app/client/src/widgets/ContainerWidget.tsx
View File

@ -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<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 = {
width: 0,
height: 0
}
}
componentDidUpdate(
previousProps: IContainerWidgetProps<IWidgetProps>
) {
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<IWidgetProps>) {
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)}
</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
backgroundColor?: Color
}
export default ContainerWidget;
export default ContainerWidget