smart-react-components/form/Option.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');
require('../DOMHelper-c0bd5a29.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');
require('react-dom');
var WaveEffect = require('../WaveEffect-96d9007c.js');

const getCustomKeys = box => ({
    size: (v, t) => `
        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 OptionElement = styled__default(Div).attrs(({ box }) => ({
    customKeys: getCustomKeys(box)
}))(({ theme, box, type, fill$, shape, hover, disabled, value }) => `
    border-radius: ${theme.src.form.inputRadius[shape]};
    word-wrap: break-word;
    word-break: break-word;
    font-family: ${theme.src.fontFamily.option};
    
    ${value != null
    ? `
        cursor: default;
        transition: 100ms 0s ease-in-out;
        transition-property: background, color;

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

            ${(hover && !theme.src.isMobile)
            ? `
                &:hover {
                    background: ${theme.src.type[type].dark};
                }
            `
            : ""}
        `
        : `
            background: ${theme.src.type[type].form.inputBackground};
            color: ${theme.src.type[type].form.inputFont};

            ${(hover && !theme.src.isMobile)
            ? `
                &:hover {
                    background: ${theme.src.type[type].main};
                    color: ${theme.src.type[type].font};
                }
            `
            : ""}
        `}

        &.src-option-active {
            background: ${theme.src.type[type].darker};
            color: ${theme.src.type[type].font};
        }

        ${disabled
        ? `
            opacity: ${theme.src.form.disabledOpacity};
            pointer-events: none;
        `
        : ""}
    `
    : `
        color: ${theme.src.type[type].form.inputPlaceholder};
    `}
`);

const Option = ({ size = "default", sizeSm, sizeMd, sizeLg, sizeXl, elementProps = index.DV.JSX_ELEMENT_PROPS, children, value, disabled, box, type = "primary", fill, shape = "default", hover, waveEffect, active, setActive }) => {
    /**
     * Returns active$ status of the element.
     */
    const getActive$ = () => {
        if (value == null)
            return false;
        return Array.isArray(active) ? active.indexOf(value) > -1 : value == active;
    };
    const [active$, setActive$] = React__default.useState(() => getActive$());
    React__default.useEffect(() => setActive$(getActive$()), [value, active]);
    /**
     * Sets value if element is not disabled.
     */
    const set = () => {
        if (disabled || (value == null && Array.isArray(active)))
            return;
        if (Array.isArray(active)) {
            if (active.indexOf(value) == -1)
                setActive([...active, value]);
            else
                setActive(active.filter(i => i != value));
        }
        else if (value != active)
            setActive(value);
    };
    const El = React__default.createElement(OptionElement, Object.assign({}, elementProps, { className: `${active$ ? "src-option-active" : ""}`, size: size, sizeSm: sizeSm, sizeMd: sizeMd, sizeLg: sizeLg, sizeXl: sizeXl, box: box, type: type, "fill$": fill, shape: shape, hover: hover, disabled: disabled, value: value, onClick: set }), children);
    return waveEffect ? React__default.createElement(WaveEffect.WaveEffect, { type: waveEffect }, El) : El;
};

module.exports = Option;