smart-react-components/form/InputColorPicker.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');
require('../ColorHelper-27ee3c7d.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');
require('../element/A.js');
require('react-dom');
require('../WaveEffect-96d9007c.js');
require('../Element-d9208356.js');
require('../Transition-48c5648c.js');
require('../CSSTransition-5a3ab124.js');
require('../Loading-679f1816.js');
require('../Button-0d381a87.js');
require('../Overlay-95b8c50b.js');
var FixedBox = require('../FixedBox-a18d2049.js');
var UseInputOutput = require('../UseInputOutput-6af67949.js');
require('../SlideTransition-b2e129ec.js');
require('../element/Label.js');
require('../element/Input.js');
var InputElement = require('../InputElement-def827fe.js');
var ColorPicker = require('../ColorPicker-69f674cf.js');

const InputColorPicker = ({ size = "default", sizeSm, sizeMd, sizeLg, sizeXl, containerProps = index.DV.JSX_ELEMENT_PROPS, inputProps = index.DV.JSX_ELEMENT_PROPS, labelProps = index.DV.JSX_ELEMENT_PROPS, label, value, setValue, type, fill, border, shape = "default", leftAddon, leftAddonProps = index.DV.JSX_ELEMENT_PROPS, leftAddonAbsolute, rightAddon, rightAddonProps = index.DV.JSX_ELEMENT_PROPS, rightAddonAbsolute, pickerSize, pickerSizeSm, pickerSizeMd = "small", pickerSizeLg = "default", pickerSizeXl, pickerElementProps = index.DV.JSX_ELEMENT_PROPS, pickerType, colorFormat, allowOpacity, showConsole, showButtons, showPalette, allowAddColorPalette, addDefaultPaletteColors, palette, lang, onChange, onSave, onCancel }) => {
    const [status, setStatus] = React__default.useState(false);
    const [palette$, setPalette$] = React__default.useState(() => palette || []);
    const inputEl = React__default.useRef(null);
    /**
     * Prevents event, if it is mobile.
     *
     * @param e
     */
    const inputFocus = (e) => {
        if (DOMHelper.DOMHelper.isMobile)
            e.target.blur();
    };
    /**
     * Sets value, if it is not mobile.
     *
     * @param e
     */
    const inputBlur = (e) => {
        if (!DOMHelper.DOMHelper.isMobile)
            setValue(e.target.value);
    };
    /**
     * When enter is pressed, changes value.
     *
     * @param e
     */
    const inputKeyDown = (e) => {
        if (e.keyCode == 13)
            setValue(e.target.value);
    };
    /**
     * Sets input value and calls onchange method.
     *
     * @param val
     */
    const change = (val) => {
        inputEl.current.value = val;
        if (onChange)
            onChange(val);
    };
    /**
     * Closes picker and calls onsave method.
     */
    const save = () => {
        setStatus(false);
        if (onSave)
            onSave();
    };
    /**
     * Closes picker and calls oncancel method.
     */
    const cancel = () => {
        setStatus(false);
        if (onCancel)
            onCancel();
    };
    return (React__default.createElement(FixedBox.FixedBox, { boxProps: { width: ["auto", true] }, status: status, setStatus: setStatus },
        UseInputOutput.useInputOutput({
            element: React__default.createElement(InputElement.Input, Object.assign({}, inputProps, { ref: inputEl, defaultValue: value, tabIndex: -1, onFocus: inputFocus, onBlur: inputBlur, onKeyDown: inputKeyDown, "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 })),
            containerProps, inputProps, labelProps, label, shape, leftAddon, leftAddonProps, leftAddonAbsolute, rightAddon, rightAddonProps, rightAddonAbsolute
        }),
        React__default.createElement(ColorPicker.ColorPicker, { value: value, setValue: setValue, size: pickerSize, sizeSm: pickerSizeSm, sizeMd: pickerSizeMd, sizeLg: pickerSizeLg, sizeXl: pickerSizeXl, elementProps: pickerElementProps, type: pickerType, colorFormat: colorFormat, allowOpacity: allowOpacity, showConsole: showConsole, showButtons: showButtons, showPalette: showPalette, allowAddColorPalette: allowAddColorPalette, addDefaultPaletteColors: addDefaultPaletteColors, palette: palette$, setPalette: setPalette$, lang: lang, onChange: change, onSave: save, onCancel: cancel })));
};

module.exports = InputColorPicker;