smart-react-components/form/InputFile.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 DOMHelper = require('../DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
require('styled-components');
require('../index-56ba89df.js');
require('../element/Div.js');
require('../element/Svg.js');
var Close = require('../Close-72bfdc7e.js');
var Badge = require('../Badge-28700875.js');
var Container = require('../Container-7b969272.js');
var Icon = require('../Icon-8e539dc5.js');
require('../element/Span.js');
var Text = require('../Text-c2784368.js');
require('react-dom');
require('../Transition-48c5648c.js');
var UseInputOutput = require('../UseInputOutput-6af67949.js');
require('../SlideTransition-b2e129ec.js');
require('../element/Label.js');
var Input$1 = require('../element/Input.js');
var InputElement = require('../InputElement-def827fe.js');

const InputFile = ({ size = "default", sizeSm, sizeMd, sizeLg, sizeXl, containerProps = index.DV.JSX_ELEMENT_PROPS, inputProps = index.DV.JSX_ELEMENT_PROPS, boxProps = index.DV.JSX_ELEMENT_PROPS, labelProps = index.DV.JSX_ELEMENT_PROPS, label, value, setValue, type, fill, border, shape = "default", badgeType = "primary", error, leftAddon, leftAddonProps = index.DV.JSX_ELEMENT_PROPS, leftAddonAbsolute, rightAddon, rightAddonProps = index.DV.JSX_ELEMENT_PROPS, rightAddonAbsolute }) => {
    const boxEl = React__default.useRef(null);
    const inputEl = React__default.useRef(null);
    const getValue$ = () => {
        if (value && (!Array.isArray(value) || (Array.isArray(value) && value.length > 0))) {
            if (!inputProps.multiple)
                return { text: value.name, isPlaceholder: false };
            else {
                return {
                    text: (React__default.createElement(Container.BadgeContainer, { space: true }, value.map((item, index) => React__default.createElement(Badge.Badge, { key: index, type: badgeType, "data-src-not-clickable": true },
                        React__default.createElement(Icon.BadgeIcon, { onClick: () => remove(index) },
                            React__default.createElement(Close.CloseIcon, { iconSize: "default" })),
                        React__default.createElement(Text.BadgeText, null, item.name))))),
                    isPlaceholder: false
                };
            }
        }
        else
            return { text: inputProps.placeholder || React__default.createElement(React__default.Fragment, null, "\u00A0"), isPlaceholder: true };
    };
    const [value$, setValue$] = React__default.useState(() => getValue$());
    React__default.useEffect(() => {
        setValue$(getValue$());
    }, [value, inputProps.placeholder]);
    /**
     * Checks if target is clickable, if it is, focuses input.
     *
     * @param e
     */
    const boxClick = (e) => {
        if (DOMHelper.DOMHelper.checkIfTargetIsClickable(e.target, boxEl.current))
            inputEl.current.click();
    };
    /**
     * Sets new value if event is not prevented.
     *
     * @param e
     */
    const change = (e) => {
        if (!inputProps.disabled) {
            if (inputProps.onChange)
                inputProps.onChange(e);
            if (!e.defaultPrevented) {
                let el = e.target;
                if (!inputProps.multiple)
                    setValue(el.files[0] || null);
                else {
                    let arr = [];
                    for (let i of el.files) {
                        arr.push(i);
                    }
                    setValue([...value, ...arr]);
                }
            }
        }
    };
    /**
     * Removes value at the given index.
     *
     * @param i
     */
    const remove = (i) => setValue(value.filter((_, index) => index != i));
    return UseInputOutput.useInputOutput({
        element: (React__default.createElement(React__default.Fragment, null,
            React__default.createElement(Input$1, Object.assign({}, inputProps, { ref: inputEl, type: "file", display: "none", onChange: change })),
            React__default.createElement(InputElement.Input, Object.assign({}, boxProps, { ref: boxEl, "size$": size, "size$Sm": sizeSm, "size$Md": sizeMd, "size$Lg": sizeLg, "size$Xl": sizeXl, "type$": type, "fill$": fill, "border$": border, shape: shape, leftAddon: leftAddon ? true : false, leftAddonAbsolute: leftAddonAbsolute, rightAddon: rightAddon ? true : false, rightAddonAbsolute: rightAddonAbsolute, inputElement: false, "data-src-placeholder-style": value$.isPlaceholder, onClick: boxClick }), value$.text))),
        containerProps, inputProps, labelProps, label, shape, leftAddon, leftAddonProps, leftAddonAbsolute, rightAddon, rightAddonProps, rightAddonAbsolute, error
    });
};

module.exports = InputFile;