wix-style-react/dist/es/src/ColorPicker/ColorPickerConverterRGB.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import Input from '../Input';
import { classes } from './ColorPickerConverter.st.css';
import ColorPickerConverterViewer from './ColorPickerConverterViewer';
import { safeColor, getRgbOrEmpty } from './utils';
class ColorPickerConverterRGB extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = getRgbOrEmpty(this.props.current);
    }
    isInputsEmpty() {
        const { r, g, b } = this.state;
        return [r, g, b].every(value => value === '');
    }
    render() {
        const { dataHook } = this.props;
        return (React.createElement("div", { className: classes.root, "data-hook": dataHook },
            React.createElement("div", { className: classes.distribute },
                React.createElement(Input, { size: "small", value: this.state.r, onChange: e => this.change('r', e), placeholder: "R", className: classes.distributedItem }),
                React.createElement(Input, { size: "small", value: this.state.g, onChange: e => this.change('g', e), placeholder: "G", className: classes.distributedItem }),
                React.createElement(Input, { size: "small", value: this.state.b, onChange: e => this.change('b', e), placeholder: "B", className: classes.distributedItem })),
            React.createElement(ColorPickerConverterViewer, { ...this.props, color: this.props.current })));
    }
    UNSAFE_componentWillReceiveProps(props) {
        this.setState(getRgbOrEmpty(props.current));
    }
    change(part, { target: { value } }) {
        this.setState({ [part]: value }, () => {
            const isMissingData = this.state.r === '' || this.state.g === '' || this.state.b === '';
            const _color = safeColor(isMissingData && this.props.allowEmpty ? '' : this.state, this.props.allowEmpty);
            if (!isMissingData || this.isInputsEmpty()) {
                this.props.onChange(_color);
            }
        });
    }
}
ColorPickerConverterRGB.propTypes = {
    dataHook: PropTypes.string,
    current: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    onAdd: PropTypes.func,
};
export default ColorPickerConverterRGB;
//# sourceMappingURL=ColorPickerConverterRGB.js.map