38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { ComponentProps } from "./BaseComponent";
|
|
import { ContainerOrientation } from "../constants/WidgetConstants";
|
|
import styled from "../constants/DefaultTheme";
|
|
import React from "react";
|
|
|
|
export const Container = styled("div")<ContainerProps>`
|
|
display: flex;
|
|
flex-direction: ${props => {
|
|
return props.orientation === "HORIZONTAL" ? "row" : "column";
|
|
}};
|
|
background: ${props => props.style.backgroundColor};
|
|
color: ${props => props.theme.colors.primary};
|
|
position: ${props => {
|
|
return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative";
|
|
}};
|
|
left: ${props => {
|
|
return props.style.positionType !== "ABSOLUTE"
|
|
? undefined
|
|
: props.style.xPosition + props.style.xPositionUnit;
|
|
}};
|
|
top: ${props => {
|
|
return props.style.positionType !== "ABSOLUTE"
|
|
? undefined
|
|
: props.style.yPosition + props.style.yPositionUnit;
|
|
}};
|
|
`;
|
|
const ContainerComponent = (props: ContainerProps) => {
|
|
return <Container {...props}>{props.children}</Container>;
|
|
};
|
|
|
|
export interface ContainerProps extends ComponentProps {
|
|
children?: JSX.Element[] | JSX.Element;
|
|
orientation?: ContainerOrientation;
|
|
addWidget?: Function;
|
|
}
|
|
|
|
export default ContainerComponent;
|