PromucFlow_constructor/app/client/src/editorComponents/ContainerComponent.tsx
2019-08-20 15:09:08 +05:30

36 lines
1.1 KiB
TypeScript

import BaseComponent, { IComponentProps } from "./BaseComponent"
import { ContainerOrientation } from "../constants/WidgetConstants"
import styled from "../constants/DefaultTheme"
import React from "react"
export const Container = styled("div")<IContainerProps>`
display: flex;
flex-direction: ${props => {
return props.orientation === "HORIZONTAL" ? "row" : "column"
}};
background: ${props => props.style.backgroundColor};
color: ${props => props.theme.primaryColor};
position: ${props => {
return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative"
}};
left: ${props => {
return props.style.xPosition + props.style.xPositionUnit
}};
top: ${props => {
return props.style.yPosition + props.style.yPositionUnit
}};
`
class ContainerComponent extends BaseComponent<IContainerProps> {
render() {
return <Container {...this.props}>{this.props.children}</Container>
}
}
export interface IContainerProps extends IComponentProps {
children?: JSX.Element[] | JSX.Element
orientation?: ContainerOrientation
}
export default ContainerComponent