193 lines
7.9 KiB
JavaScript
193 lines
7.9 KiB
JavaScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import PropTypes from "prop-types";
|
|
import {
|
|
getCorrectBorderRadius,
|
|
getCorrectFourValuesStyle,
|
|
getCorrectTextAlign,
|
|
} from "../utils/rtlUtils";
|
|
|
|
const alignContentStyle = (alignContent) => `align-content: ${alignContent};`;
|
|
const alignItemsStyle = (alignItems) => `align-items: ${alignItems};`;
|
|
const alignSelfStyle = (alignSelf) => `align-self: ${alignSelf};`;
|
|
const backgroundStyle = (backgroundProp) => `background: ${backgroundProp};`;
|
|
|
|
const borderStyle = (borderProp, interfaceDirection = "ltr") => {
|
|
const styles = [];
|
|
|
|
if (typeof borderProp === "string") {
|
|
return `border: ${borderProp};`;
|
|
}
|
|
|
|
if (borderProp.style)
|
|
styles.push(
|
|
`border-style: ${getCorrectFourValuesStyle(
|
|
borderProp.style,
|
|
interfaceDirection
|
|
)};`
|
|
);
|
|
|
|
if (borderProp.width)
|
|
styles.push(
|
|
`border-width: ${getCorrectFourValuesStyle(
|
|
borderProp.width,
|
|
interfaceDirection
|
|
)};`
|
|
);
|
|
|
|
if (borderProp.color)
|
|
styles.push(
|
|
`border-color: ${getCorrectFourValuesStyle(
|
|
borderProp.color,
|
|
interfaceDirection
|
|
)};`
|
|
);
|
|
|
|
if (borderProp.radius)
|
|
styles.push(
|
|
`border-radius: ${getCorrectBorderRadius(
|
|
borderProp.radius,
|
|
interfaceDirection
|
|
)};`
|
|
);
|
|
|
|
return styles.join("\n");
|
|
};
|
|
|
|
const displayStyle = (displayProp) => `display: ${displayProp};`;
|
|
const flexBasisStyle = (flexBasis) => `flex-basis: ${flexBasis};`;
|
|
const flexDirectionStyle = (flexDirection) =>
|
|
`flex-direction: ${flexDirection};`;
|
|
const flexStyle = (flexProp) => `flex: ${flexProp};`;
|
|
const flexWrapStyle = (flexWrap) => `flex-wrap: ${flexWrap};`;
|
|
const gridAreaStyle = (gridArea) => `grid-area: ${gridArea};`;
|
|
const heightStyle = (heightProp) => `height: ${heightProp};`;
|
|
const justifyContentStyle = (justifyContent) =>
|
|
`justify-content: ${justifyContent};`;
|
|
const justifyItemsStyle = (justifyItems) => `justify-items: ${justifyItems};`;
|
|
const justifySelfStyle = (justifySelf) => `justify-self: ${justifySelf};`;
|
|
const marginStyle = (marginProp) => `margin: ${marginProp};`;
|
|
const overflowStyle = (overflowProp) => `overflow: ${overflowProp};`;
|
|
const paddingStyle = (paddingProp) => `padding: ${paddingProp};`;
|
|
const textAlignStyle = (textAlign) => `text-align: ${textAlign};`;
|
|
const widthStyle = (widthProp) => `width: ${widthProp};`;
|
|
|
|
const StyledBox = styled.div`
|
|
${(props) => props.alignContent && alignContentStyle(props.alignContent)}
|
|
${(props) => props.alignItems && alignItemsStyle(props.alignItems)}
|
|
${(props) => props.alignSelf && alignSelfStyle(props.alignSelf)}
|
|
${(props) => props.backgroundProp && backgroundStyle(props.backgroundProp)}
|
|
${(props) =>
|
|
props.borderProp &&
|
|
borderStyle(props.borderProp, props.theme.interfaceDirection)}
|
|
box-sizing: border-box;
|
|
${(props) => props.displayProp && displayStyle(props.displayProp)}
|
|
${(props) => props.flexBasis && flexBasisStyle(props.flexBasis)}
|
|
${(props) => props.flexDirection && flexDirectionStyle(props.flexDirection)}
|
|
${(props) => props.flexProp && flexStyle(props.flexProp)}
|
|
${(props) => props.flexWrap && flexWrapStyle(props.flexWrap)}
|
|
${(props) => props.gridArea && gridAreaStyle(props.gridArea)}
|
|
${(props) => props.heightProp && heightStyle(props.heightProp)}
|
|
${(props) =>
|
|
props.justifyContent && justifyContentStyle(props.justifyContent)}
|
|
${(props) => props.justifyItems && justifyItemsStyle(props.justifyItems)}
|
|
${(props) => props.justifySelf && justifySelfStyle(props.justifySelf)}
|
|
${(props) =>
|
|
props.marginProp &&
|
|
marginStyle(
|
|
getCorrectFourValuesStyle(
|
|
props.marginProp,
|
|
props.theme.interfaceDirection
|
|
)
|
|
)}
|
|
outline: none;
|
|
${(props) => props.overflowProp && overflowStyle(props.overflowProp)}
|
|
${(props) =>
|
|
props.paddingProp &&
|
|
paddingStyle(
|
|
getCorrectFourValuesStyle(
|
|
props.paddingProp,
|
|
props.theme.interfaceDirection
|
|
)
|
|
)}
|
|
${(props) =>
|
|
props.textAlign &&
|
|
textAlignStyle(
|
|
getCorrectTextAlign(props.textAlign, props.theme.interfaceDirection)
|
|
)}
|
|
${(props) => props.widthProp && widthStyle(props.widthProp)}
|
|
`;
|
|
|
|
const Box = (props) => <StyledBox as={props.as} {...props} />;
|
|
Box.propTypes = {
|
|
/** Sets the tag through which to render the component */
|
|
as: PropTypes.string,
|
|
/** Sets the distribution of space between and around content items
|
|
* along a flexbox's cross-axis or a grid's block axis */
|
|
alignContent: PropTypes.string,
|
|
/** Sets the align-self value on all direct children as a group.
|
|
* In Flexbox, it controls the alignment of items on the Cross Axis.
|
|
* In Grid Layout, it controls the alignment of items on the Block Axis
|
|
* within their grid area. */
|
|
alignItems: PropTypes.string,
|
|
/** Overrides a grid or flex item's align-items value. In Grid,
|
|
* it aligns the item inside the grid area. In Flexbox, it aligns
|
|
* the item on the cross axis. */
|
|
alignSelf: PropTypes.string,
|
|
/** Sets all background style properties at once, such as color,
|
|
* image, origin and size, or repeat method. */
|
|
backgroundProp: PropTypes.string,
|
|
/** Sets the element's border. It sets the values of border-width,
|
|
* border-style, and border-color. */
|
|
borderProp: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
/** Sets whether the element is treated as a block or inline element and
|
|
* the layout used for its children, such as flow layout, grid or flex. */
|
|
displayProp: PropTypes.string,
|
|
/** Sets the initial main size of the flex item. It sets the size of the content
|
|
* box unless otherwise set with box-sizing. */
|
|
flexBasis: PropTypes.string,
|
|
/** Sets how flex items are placed in the flex container defining the main axis and
|
|
* the direction (normal or reversed) */
|
|
flexDirection: PropTypes.string,
|
|
/** Sets how the flex item will grow or shrink to fit the space available in its
|
|
* flex container. It is a shorthand for flex-grow, flex-shrink, and flex-basis. */
|
|
flexProp: PropTypes.string,
|
|
/** Sets whether flex items are forced onto one line or can wrap onto multiple lines.
|
|
* If wrapping is allowed, it sets the direction that lines are stacked. */
|
|
flexWrap: PropTypes.string,
|
|
/** Is a shorthand property for grid-row-start, grid-column-start, grid-row-end and
|
|
* grid-column-end, specifying the size of the grid item and location within the grid by
|
|
* contributing a line, a span, or nothing (automatic) to its grid placement,
|
|
* Thereby specifying the edges of its grid area. */
|
|
gridArea: PropTypes.string,
|
|
/** Defines the height of the border of the element area. */
|
|
heightProp: PropTypes.string,
|
|
/** Defines how the browser distributes space between and around content items along
|
|
* the main-axis of a flex container, and the inline axis of a grid container */
|
|
justifyContent: PropTypes.string,
|
|
/** Defines the default justify-self for all items of the box, giving them all
|
|
* a default way of justifying each box along the appropriate axis. */
|
|
justifyItems: PropTypes.string,
|
|
/** Sets the way the box is justified inside its alignment container along the appropriate axis. */
|
|
justifySelf: PropTypes.string,
|
|
/** Sets the margin area on all four sides of an element. It is a shorthand for margin-top,
|
|
* margin-right, margin-bottom, and margin-left. */
|
|
marginProp: PropTypes.string,
|
|
/** Sets what to do when an element's content is too big to fit in its block formatting context. */
|
|
overflowProp: PropTypes.string,
|
|
/** Sets the padding area on all four sides of the element. It is a shorthand for padding-top,
|
|
* padding-right, padding-bottom, and padding-left */
|
|
paddingProp: PropTypes.string,
|
|
/** Sets the horizontal alignment of a block element or table-cell box.
|
|
* This means it works like vertical-align but in the horizontal direction */
|
|
textAlign: PropTypes.string,
|
|
/** Defines the border width of the element area. */
|
|
widthProp: PropTypes.string,
|
|
};
|
|
|
|
Box.defaultProps = {
|
|
displayProp: "block",
|
|
};
|
|
|
|
export default Box;
|