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

abstracted styles into base widget

Browse Source
This commit is contained in:
Nikhil Nandgopal 2019-03-19 19:35:48 +05:30
parent 746efeee06
commit da5f47437b
12 changed files with 57 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/client/src/editorComponents/ButtonComponent.tsx
View File

@ -1,10 +1,15 @@
import * as React from "react"
import { Button, MaybeElement } from "@blueprintjs/core"
import { ITextComponentProps } from "./TextComponent";
import { ITextComponentProps } from "./TextComponent"
import PositionContainer from "./PositionContainer"
class ButtomComponent extends React.Component<IButtonComponentProps> {
render() {
return <Button text={this.props.text} icon={this.props.icon} />
return (
<PositionContainer {...this.props}>
<Button text={this.props.text} icon={this.props.icon} />
</PositionContainer>
)
}
}

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

@ -4,6 +4,8 @@ import styled from "../constants/DefaultTheme"
import React from "react"
const Container = styled("div")<IContainerProps>`
display: "flex"
flexDirection: ${(props) => { return props.orientation === "HORIZONTAL" ? "row" : "column" }};
background: ${props => props.theme.secondaryColor};
color: ${props => props.theme.primaryColor};
position: ${props => props.style.positionType};

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

@ -32,7 +32,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
widgetId: "1",
widgetType: "BUTTON_WIDGET",
topRow: 2,
leftColumn: 7,
leftColumn: 4,
bottomRow: 5,
rightColumn: 5,
text: "Lorem Ipsum",

35
app/client/src/mockResponses/WidgetPaneResponse.tsx
View File

@ -1,15 +1,28 @@
import { WidgetPaneReduxState } from "../reducers/uiReducers/widgetPaneReducer";
import { RenderModes } from "../constants/WidgetConstants";
import { WidgetPaneReduxState } from "../reducers/uiReducers/widgetPaneReducer"
import { RenderModes } from "../constants/WidgetConstants"
const WidgetPaneResponse: WidgetPaneReduxState = {
widgets: [
{
widgetId: "1",
widgetType: "BUTTON_WIDGET",
text: "Lorem Ipsum",
renderMode: RenderModes.COMPONENT_PANE
}
]
widgets: [
{
widgetType: "BUTTON_WIDGET",
text: "Lorem Ipsum",
renderMode: RenderModes.COMPONENT_PANE
},
{
widgetType: "TEXT_WIDGET",
text: "Lorem Ipsum",
renderMode: RenderModes.COMPONENT_PANE
},
{
widgetType: "SPINNER_WIDGET",
renderMode: RenderModes.COMPONENT_PANE,
backgroundColor: "#434343",
topRow: 2,
leftColumn: 5,
bottomRow: 5,
rightColumn: 5
}
]
}
export default WidgetPaneResponse
export default WidgetPaneResponse

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

@ -6,9 +6,11 @@
import {
WidgetType,
RenderMode,
RenderModes
RenderModes,
CSSUnits
} from "../constants/WidgetConstants"
import { Component } from "react"
import { BaseStyle } from "../editorComponents/BaseComponent";
abstract class BaseWidget<
T extends IWidgetProps,
@ -79,6 +81,17 @@ abstract class BaseWidget<
}
abstract getWidgetType(): WidgetType
getPositionStyle(): BaseStyle {
return {
positionType: this.props.renderMode === RenderModes.COMPONENT_PANE ? "CONTAINER_DIRECTION" : "ABSOLUTE",
yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL
}
}
}
export interface IWidgetState {

8
app/client/src/widgets/ButtonWidget.tsx
View File

@ -13,13 +13,7 @@ class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
getPageView() {
return (
<ButtonComponent
style={{
positionType: "ABSOLUTE",
yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL
}}
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
text={this.props.text}

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

@ -13,13 +13,8 @@ class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
getPageView() {
return (
<CalloutComponent
style={{
positionType: "ABSOLUTE",
yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL
}}
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
id={this.props.id}

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

@ -52,13 +52,9 @@ class ContainerWidget extends BaseWidget<
<ContainerComponent
widgetId={this.props.widgetId}
style={{
...this.getPositionStyle(),
height: this.state.height,
width: this.state.width,
positionType: "ABSOLUTE",
yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL
width: this.state.width
}}
snapColumnSpace={this.snapColumnSpace}
snapRowSpace={this.snapRowSpace}

8
app/client/src/widgets/IconWidget.tsx
View File

@ -14,13 +14,7 @@ class IconWidget extends BaseWidget<IIconWidgetProps, IWidgetState> {
getPageView() {
return (
<IconComponent
style={{
positionType: "ABSOLUTE",
yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL
}}
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
icon={this.props.icon}

8
app/client/src/widgets/InputGroupWidget.tsx
View File

@ -16,13 +16,7 @@ class InputGroupWidget extends BaseWidget<
getPageView() {
return (
<InputGroupComponent
style={{
positionType: "ABSOLUTE",
yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL
}}
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
className={this.props.className}

8
app/client/src/widgets/SpinnerWidget.tsx
View File

@ -13,13 +13,7 @@ class SpinnerWidget extends BaseWidget<ISpinnerWidgetProps, IWidgetState> {
getPageView() {
return (
<SpinnerComponent
style={{
positionType: "ABSOLUTE",
yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL
}}
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
size={this.props.size}

8
app/client/src/widgets/TextWidget.tsx
View File

@ -12,13 +12,7 @@ class TextWidget extends BaseWidget<ITextWidgetProps, IWidgetState> {
getPageView() {
return (
<TextComponent
style={{
positionType: "ABSOLUTE",
yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL
}}
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
text={this.props.text}