@wix/design-system/dist/esm/ColorInput/ColorInput.js

@wix/design-system

import React from 'react';
import Input from '../Input';
import { Hash } from './components/Hash';
import { ColorViewer } from './components/ColorViewer';
import { validateHex, normalizeHexInput } from './hex-helpers';
import Box from '../Box';
class ColorInput extends React.Component {
    constructor(props) {
        super(props);
        this._renderPrefix = () => {
            const { disabled, size } = this.props;
            const { active, value } = this.state;
            const hash = (React.createElement(Input.Affix, null,
                React.createElement(Hash, { disabled: disabled, size: size })));
            return active || value ? hash : undefined;
        };
        this.onTabOut = keyboardEvent => {
            if (!this.input) {
                return;
            }
            const { input } = this.input;
            const { target } = keyboardEvent;
            if (input === target) {
                return;
            }
            this.cancel();
        };
        this._renderSuffix = () => {
            const { value, active } = this.state;
            const { size, popoverPlacement, popoverAppendTo, disabled, colorPickerChildren, onAddColor, addTooltipContent, placeholder, popoverProps, } = this.props;
            return (React.createElement(Box, { verticalAlign: "middle" },
                React.createElement(ColorViewer, { value: value, active: active, disabled: disabled, size: size, placement: popoverPlacement, appendTo: popoverAppendTo, onClick: this.click, onChange: this._onPickerChange, onCancel: this.cancel, onConfirm: this.confirm, onClickOutside: this.confirm, children: colorPickerChildren, onAddColor: onAddColor, addTooltipContent: addTooltipContent, placeholder: placeholder, onTabOut: this.onTabOut, popoverProps: popoverProps })));
        };
        this._onChange = evt => {
            const { onChange } = this.props;
            const value = normalizeHexInput(evt.target.value);
            this.setState({ value }, () => onChange(value));
        };
        this._onPickerChange = value => {
            const { onChange } = this.props;
            this.setState({ active: true, value }, () => onChange(value));
        };
        this._onFocus = () => this.setState({ active: true });
        this._keyDown = e => {
            e.stopPropagation();
            e.key === 'Enter' && this.confirm();
            e.key === 'Escape' && this.cancel();
        };
        /**
         * clicks the input element
         * @returns {Void}
         */
        this.click = () => {
            this.input.focus();
            this.setState({ active: true });
        };
        /**
         * sets the picked color
         * @returns {Void}
         */
        this.confirm = () => {
            const { onConfirm, onChange } = this.props;
            const value = validateHex(this.state.value);
            this.setState({ active: false, value, previous: value }, () => {
                onConfirm(value);
                onChange(value);
            });
        };
        /**
         * sets the previous color
         * @returns {Void}
         */
        this.cancel = () => {
            const { onCancel, onChange } = this.props;
            const { previous } = this.state;
            this.setState({ active: false, value: previous }, () => {
                onCancel(previous);
                onChange(previous);
            });
        };
        this.state = {
            active: false,
            previous: props.value,
            value: '',
        };
    }
    static getDerivedStateFromProps(props, state) {
        if (!state.active && props.value !== state.value) {
            return {
                value: normalizeHexInput(props.value),
            };
        }
        return {};
    }
    render() {
        const { placeholder, size, ...rest } = this.props;
        const { active, value } = this.state;
        return (React.createElement(Input, { ...rest, ref: input => {
                this.input = input;
            }, placeholder: active ? '' : placeholder, size: size, onKeyDown: this._keyDown, onChange: this._onChange, onFocus: this._onFocus, onInputClicked: this.click, value: value.replace('#', ''), prefix: this._renderPrefix(), suffix: this._renderSuffix() }));
    }
}
ColorInput.displayName = 'ColorInput';
ColorInput.defaultProps = {
    placeholder: '',
    size: 'medium',
    onChange: () => { },
    onConfirm: () => { },
    onCancel: () => { },
    popoverProps: {},
    value: '',
};
export default ColorInput;
//# sourceMappingURL=ColorInput.js.map