smart-react-components/form/Switch.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 = {
    foundation: {
        small: {
            width: "22px",
            height: "12px"
        },
        default: {
            width: "28px",
            height: "16px"
        },
        large: {
            width: "34px",
            height: "20px"
        }
    },
    slider: {
        small: {
            size: "10px",
            left: "10px"
        },
        default: {
            size: "14px",
            left: "12px"
        },
        large: {
            size: "18px",
            left: "14px"
        }
    }
};

const Foundation = styled__default.div ``;
const Slider = styled__default.div ``;
const customKeys = {
    size$: (v, t) => `
        + ${Foundation} {
            width: ${size.foundation[v].width};
            height: ${size.foundation[v].height};

            > ${Slider} {
                width: ${size.slider[v].size};
                height: ${size.slider[v].size};
            }
        }

        &:checked + ${Foundation} > ${Slider} {
            left: ${size.slider[v].left};
        }

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

    + ${Foundation} {
        position: relative;
        flex: 0 0 auto;
        box-sizing: border-box;
        border-radius: 20px;
        border: solid 1px ${theme.src.type[type$].form.radioBorder};
        background: ${fill$ ? theme.src.type[type$].form.radioBorder : theme.src.type[type$].form.radioColor};
        box-shadow: ${theme.src.type[type$].form.radioBorder} 0 0 0 0 inset;
        transition: 400ms 0s ease-in-out;
        transition-property: border, box-shadow;

        > ${Slider} {
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 100%;
            background: ${theme.src.type[type$].form.radioColor};
            box-shadow: 0 1px 3px rgba(0,0,0,.4);
            transition: left 200ms 0s ease-in-out;
        }
    }

    &:checked + ${Foundation} {
        border-color: ${theme.src.type[type$].main};
        background: ${theme.src.type[type$].main};
        box-shadow: ${theme.src.type[type$].main} 0 0 0 11px inset;
        transition: border 400ms 0s ease-in-out, box-shadow 400ms 0s ease-in-out, background 0s 400ms ease-in-out;
    }

    ${disabled ? `
        ~ * {
            opacity: ${theme.src.form.disabledOpacity};
            user-select: none;
        }
    ` : ""}
`);
const Switch = ({ 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, 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, checked: checked$, onChange: change })),
        React__default.createElement(Foundation, null,
            React__default.createElement(Slider, null)),
        children && React__default.createElement(RadioSpan.RadioSpan, Object.assign({}, spanProps), children)));
};

module.exports = Switch;