smart-react-components/UseInputOutput-6af67949.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 React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var Div = require('./element/Div.js');
var SlideTransition = require('./SlideTransition-b2e129ec.js');
var Label = require('./element/Label.js');

var InputWrapper = styled__default.div `
    position: relative;
    display: flex;
    user-select: none;

    > input {
        height: 100%;
    }
`;

var InputAddon = styled__default(Div)(({ theme, type, shape, absolute }) => `
    overflow: hidden;
    flex: 0 0 auto;
    display: inline-flex;

    ${!absolute ? `
        ${type == "left"
    ? `
            border-top-left-radius: ${theme.src.form.inputRadius[shape]};
            border-bottom-left-radius: ${theme.src.form.inputRadius[shape]};
        ` : `
            border-top-right-radius: ${theme.src.form.inputRadius[shape]};
            border-bottom-right-radius: ${theme.src.form.inputRadius[shape]};
        `}
    ` : `
        position: absolute;
    `}
`);

var InputHint = styled__default(Div).attrs({
    mt: "2"
})(({ theme }) => `
    font-weight: ${theme.src.fontWeight.bold};
`);

var InputError = styled__default(Div).attrs(({ theme }) => ({
    mt: "2",
    color: theme.src.type.danger.main
})) ``;

var FormGroup = styled__default(Div).attrs(({ mb = "3" }) => ({ mb })) ``;

var InputLabel = styled__default(Label).attrs(({ mb = "2" }) => ({ mb }))(({ theme, disabled }) => `
    display: inline-block;
    word-wrap: break-word;
    word-break: break-word;

    ${disabled ? `
        opacity: ${theme.src.form.disabledOpacity};
        user-select: none;
    ` : ""}
`);

var useInputOutput = ({ element, containerProps, inputProps, labelProps, label, shape = "default", leftAddon = null, leftAddonProps, leftAddonAbsolute, rightAddon = null, rightAddonProps, rightAddonAbsolute, hint = null, error = null, isFocused }) => {
    const FragmentEl = (React__default.createElement(React__default.Fragment, null,
        (leftAddon || rightAddon)
            ? (React__default.createElement(InputWrapper, null,
                leftAddon && React__default.createElement(InputAddon, Object.assign({}, leftAddonProps, { type: "left", shape: shape, absolute: leftAddonAbsolute }), leftAddon),
                element,
                rightAddon && React__default.createElement(InputAddon, Object.assign({}, rightAddonProps, { type: "right", shape: shape, absolute: rightAddonAbsolute }), rightAddon)))
            : element,
        hint && React__default.createElement(SlideTransition.SlideTransition, { status: isFocused },
            React__default.createElement(InputHint, null, hint)),
        error && React__default.createElement(InputError, null, error)));
    if (label)
        return (React__default.createElement(FormGroup, Object.assign({}, containerProps),
            React__default.createElement(InputLabel, Object.assign({}, labelProps, { as: "label", disabled: labelProps.disabled, htmlFor: inputProps.id }), label),
            FragmentEl));
    else
        return FragmentEl;
};

exports.useInputOutput = useInputOutput;