smart-react-components/form/Checkbox.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');
require('../element/Span.js');
require('../element/Label.js');
var Input$1 = require('../element/Input.js');
var RadioSpan = require('../RadioSpan-684776ea.js');
var UseMultiple = require('../UseMultiple-9c91cdb7.js');

var size = {
    rectangle: {
        small: "12px",
        default: "16px",
        large: "20px"
    },
    stickContainer: {
        small: {
            left: "1px",
            top: "1.5px"
        },
        default: {
            left: "4px",
            top: "4px"
        },
        large: {
            left: "7.25px",
            top: "6px"
        }
    },
    shortStick: {
        small: {
            top: "2px",
            height: "3.5px"
        },
        default: {
            top: "1.5px",
            height: "3.5px"
        },
        large: {
            top: ".5px",
            height: "5px"
        }
    },
    longStick: {
        small: {
            top: "4.5px",
            width: "6.5px"
        },
        default: {
            top: "5px",
            width: "9.5px"
        },
        large: {
            top: "5px",
            width: "12px"
        }
    }
};

const Rectangle = styled__default.div ``;
const StickContainer = styled__default.div ``;
const ShortStick = styled__default.div ``;
const LongStick = styled__default.div ``;
const customKeys = {
    size$: (v, t) => `
        & + ${Rectangle} {
            width: ${size.rectangle[v]};
            height: ${size.rectangle[v]};

            > ${StickContainer} {
                left: ${size.stickContainer[v].left};
                top: ${size.stickContainer[v].top};

                > ${ShortStick} {
                    top: ${size.shortStick[v].top};
                }

                > ${LongStick} {
                    top: ${size.longStick[v].top};
                }
            }
        }

        &:checked + ${Rectangle} > ${StickContainer} > {
            ${ShortStick} {
                height: ${size.shortStick[v].height};
            }

            ${LongStick} {
                width: ${size.longStick[v].width};
            }
        }

        ~ ${RadioSpan.RadioSpan} {
            font-size: ${t.form.radioSpanFontSize[v]};
        }
    `
};
const Input = styled__default(Input$1).attrs({ customKeys })(({ theme, type$, fill$, shape, disabled }) => `
    flex: 0 0 auto;
    display: none;

    + ${Rectangle} {
        position: relative;
        overflow: hidden;
        flex: 0 0 auto;
        box-sizing: border-box;
        border-radius: ${shape != "circle" ? "2px" : "100%"};
        border: solid 2px ${theme.src.type[type$].form.radioBorder};
        background: ${fill$ ? theme.src.type[type$].form.radioBorder : theme.src.type[type$].form.radioBackground};
        transition: 100ms 0s ease-in-out;
        transition-property: border, background;

        > ${StickContainer} {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            transform: rotate(-50deg);
            transform-origin: 0;

            > ${ShortStick} {
                position: absolute;
                left: 0;
                width: 2px;
                height: 0;
                background: ${theme.src.type[type$].form.radioColor};
                transition: height 60ms 40ms ease-in-out;
            }

            > ${LongStick} {
                position: absolute;
                left: 0;
                width: 0;
                height: 2px;
                background: ${theme.src.type[type$].form.radioColor};
                transition: width 40ms 0s ease-in-out;
            }
        }
    }

    &:checked + ${Rectangle} {
        border-color: ${theme.src.type[type$].main};
        background: ${theme.src.type[type$].main};

        > ${StickContainer} > {
            ${ShortStick} {
                transition: height 60ms 0s ease-in-out;
            }

            ${LongStick} {
                transition: width 40ms 60ms ease-in-out;
            }
        }
    }

    ${disabled ? `
        ~ * {
            opacity: ${theme.src.form.disabledOpacity};
            user-select: none;
        }
    ` : ""}
`);
const Checkbox = ({ size = "default", sizeSm, sizeMd, sizeLg, sizeXl, containerProps = index.DV.JSX_ELEMENT_PROPS, inputProps = index.DV.JSX_ELEMENT_PROPS, spanProps = index.DV.JSX_ELEMENT_PROPS, children, type = "primary", fill = true, shape = "default", value, active, setActive, checked, setChecked }) => {
    const { checked$, change } = UseMultiple.useMultiple({ value, active, setActive, checked, setChecked, disabled: inputProps.disabled, onChange: inputProps.onChange });
    return (React__default.createElement(RadioSpan.RadioLabel, Object.assign({}, containerProps, { space: children ? true : false }),
        React__default.createElement(Input, Object.assign({}, inputProps, { type: "checkbox", "size$": size, "size$Sm": sizeSm, "size$Md": sizeMd, "size$Lg": sizeLg, "size$Xl": sizeXl, "type$": type, "fill$": fill, shape: shape, checked: checked$, onChange: change })),
        React__default.createElement(Rectangle, null,
            React__default.createElement(StickContainer, null,
                React__default.createElement(ShortStick, null),
                React__default.createElement(LongStick, null))),
        children && React__default.createElement(RadioSpan.RadioSpan, Object.assign({}, spanProps), children)));
};

module.exports = Checkbox;