react-base-guide/lib/components/flex/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const add_custom_style_1 = require("../../utils/add-custom-style");
const propsMapper = (props) => {
    let newProps = Object.assign(Object.assign({}, props), { $flex: props.flex, $overflow: props.overflow, $flexDirection: props.flexDirection, $justifyContent: props.justifyContent, $alignItems: props.alignItems, $flexWrap: props.flexWrap, $styled: props.styled });
    delete newProps.flex;
    delete newProps.overflow;
    delete newProps.flexDirection;
    delete newProps.justifyContent;
    delete newProps.alignItems;
    delete newProps.flexWrap;
    delete newProps.styled;
    return newProps;
};
const InternalFlex = styled_components_1.default.section `
  position: relative;
  box-sizing: border-box;
  overflow: ${p => p.$overflow};
  width: 100%;
  height: auto;
  
  flex: ${p => p.$flex || 1};
  flex-direction: ${p => p.$flexDirection || "row"};
  justify-content: ${p => p.$justifyContent || "flex-start"};
  align-items: ${p => p.$alignItems || "center"};
  flex-wrap: ${p => p.$flexWrap || "wrap"};
  
  ${p => (0, add_custom_style_1.addCustomStyle)(p.$styled, "flex")}
`;
const Flex = (props) => ((0, jsx_runtime_1.jsx)(InternalFlex, Object.assign({}, propsMapper(props))));
exports.default = Flex;
//# sourceMappingURL=index.js.map