smart-react-components/form/Radio.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 size = {
    outerCircle: {
        small: "12px",
        default: "16px",
        large: "20px"
    },
    innerCircle: {
        small: "2px",
        default: "4px",
        large: "4px"
    }
};

const OuterCircle = styled__default.div ``;
const ScaleArea = styled__default.div ``;
const InnerCircle = styled__default.div ``;
const customKeys = {
    size$: (v, t) => `
        + ${OuterCircle} {
            width: ${size.outerCircle[v]};
            height: ${size.outerCircle[v]};

            ${InnerCircle} {
                width: ${size.innerCircle[v]};
                height: ${size.innerCircle[v]};
            }
        }

        ~ ${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;

    + ${OuterCircle} {
        flex: 0 0 auto;
        box-sizing: border-box;
        border: solid 2px ${theme.src.type[type$].form.radioBorder};
        border-radius: 100%;
        background: ${fill$ ? theme.src.type[type$].form.radioBorder : theme.src.type[type$].form.radioColor};
        transition: border 200ms 0s ease-in-out;

        > ${ScaleArea} {
            display: flex;
            justify-content: center;
            align-items: center;
            transform: scale(0);
            transform-origin: 50% 50%;
            width: calc(100% + 2px);
            height: calc(100% + 2px);
            margin: -1px 0 0 -1px;
            border-radius: 100%;
            background: ${theme.src.type[type$].form.radioBorder};
            transition: transform 200ms 0s ease-in-out, background 100ms 0s ease-in-out;

            > ${InnerCircle} {
                border-radius 100%;
                background: ${theme.src.type[type$].form.radioColor};
            }
        }
    }

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

        > ${ScaleArea} {
            transform: scale(1);
            background: ${theme.src.type[type$].main};
        }
    }

    ${disabled ? `
        ~ * {
            opacity: ${theme.src.form.disabledOpacity};
            user-select: none;
        }
    ` : ""}
`);
const Radio = ({ 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 }) => {
    /**
     * Sets active if event is not prevented.
     *
     * @param e
     */
    const change = (e) => {
        if (!inputProps.disabled) {
            if (inputProps.onChange)
                inputProps.onChange(e);
            if (!e.defaultPrevented)
                setActive(value);
        }
    };
    return (React__default.createElement(RadioSpan.RadioLabel, Object.assign({}, containerProps, { space: children ? true : false }),
        React__default.createElement(Input, Object.assign({}, inputProps, { type: "radio", "size$": size, "size$Sm": sizeSm, "size$Md": sizeMd, "size$Lg": sizeLg, "size$Xl": sizeXl, "type$": type, "fill$": fill, checked: value == active, onChange: change })),
        React__default.createElement(OuterCircle, null,
            React__default.createElement(ScaleArea, null,
                React__default.createElement(InnerCircle, null))),
        children && React__default.createElement(RadioSpan.RadioSpan, Object.assign({}, spanProps), children)));
};

module.exports = Radio;