@wix/design-system/dist/esm/ColorPicker/ColorPickerConverterHsb.js

@wix/design-system

import React from 'react';
import Input from '../Input';
import { classes, st } from './ColorPickerConverter.st.css.js';
import ColorPickerConverterViewer from './ColorPickerConverterViewer';
import { safeColor, getHsbOrEmpty, stopPropagation } from './utils';
export default class ColorPickerConverterHsb extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = getHsbOrEmpty(this.props.current);
    }
    isInputsEmpty() {
        const { h, s, l } = this.state;
        return [h, s, l].every(value => value === '');
    }
    render() {
        const { dataHook } = this.props;
        return (React.createElement("div", { className: st(classes.colorConverterWrapper, {
                reducePadding: true,
            }), "data-hook": dataHook },
            React.createElement("div", { className: classes.distribute },
                React.createElement(Input, { size: "medium", value: this.state.h, onChange: e => this.change('h', e), placeholder: "H", className: classes.distributedItem, onInputClicked: stopPropagation }),
                React.createElement(Input, { size: "medium", value: this.state.s, onChange: e => this.change('s', e), placeholder: "S", className: classes.distributedItem, onInputClicked: stopPropagation }),
                React.createElement(Input, { size: "medium", value: this.state.l, onChange: e => this.change('l', e), placeholder: "B", className: classes.distributedItem, onInputClicked: stopPropagation })),
            React.createElement(ColorPickerConverterViewer, { ...this.props, color: this.props.current })));
    }
    UNSAFE_componentWillReceiveProps(props) {
        this.setState(getHsbOrEmpty(props.current));
    }
    change(part, { target: { value } }) {
        this.setState({ [part]: value }, () => {
            const { h, s, l } = this.state;
            const isMissingData = [h, s, l].some(_value => _value === '');
            const _color = safeColor(isMissingData && this.props.allowEmpty ? '' : this.state, this.props.allowEmpty);
            if (!isMissingData || this.isInputsEmpty()) {
                this.props.onChange(_color);
            }
        });
    }
}
//# sourceMappingURL=ColorPickerConverterHsb.js.map