smart-react-components/form/OptionCategory.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var index = require('../index-6d498b59.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
require('../index-56ba89df.js');
var Div = require('../element/Div.js');

const getCustomKeys = box => ({
    size: (v, t) => v ? `
        padding: ${t.form.optionPadding[v]} ${t.form.optionPadding[v]};

        ${box
        ? `
            margin: ${t.form.optionMargin[v].y} ${t.form.optionMargin[v].x};
            font-size: ${t.form.optionFontSize[v]};
        `
        : `
            margin-left: -${t.form.optionPadding[v]};
            margin-right: -${t.form.optionPadding[v]};
            font-size: ${t.form.inputFontSize[v]};

            &:not(:first-child) {
                margin-top: ${t.form.optionMargin[v].y};
            }

            &:not(:last-child) {
                margin-bottom: ${t.form.optionMargin[v].y};
            }
        `}
    ` : ""
});
var OptionCategoryElement = styled__default(Div).attrs(({ box }) => ({
    customKeys: getCustomKeys(box)
}))(({ theme, box, type, fill$ }) => `
    cursor: initial;
    word-wrap: break-word;
    word-break: break-word;
    font-family: ${theme.src.fontFamily.option};
    font-weight: ${theme.src.fontWeight.bold};

    ${(fill$ && !box)
    ? `
        background: ${theme.src.type[type].main};
        color: ${theme.src.type[type].font};
    `
    : `
        background: ${theme.src.type[type].form.inputBackground};
        color: ${theme.src.type[type].form.inputFont};
    `}
`);

const OptionCategory = ({ size = "default", sizeSm, sizeMd, sizeLg, sizeXl, elementProps = index.DV.JSX_ELEMENT_PROPS, children, box, type = "primary", fill }) => {
    return React__default.createElement(OptionCategoryElement, Object.assign({}, elementProps, { size: size, sizeSm: sizeSm, sizeMd: sizeMd, sizeLg: sizeLg, sizeXl: sizeXl, box: box, type: type, "fill$": fill }), children);
};

module.exports = OptionCategory;