@wix/design-system
Version:
@wix/design-system
39 lines • 2.21 kB
JavaScript
import React from 'react';
import Input from '../Input';
import { st, classes } from './ColorPickerConverter.st.css.js';
import ColorPickerConverterViewer from './ColorPickerConverterViewer';
import { safeColor, getRgbOrEmpty, stopPropagation } from './utils';
export default 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: st(classes.colorConverterWrapper, {
reducePadding: true,
}), "data-hook": dataHook },
React.createElement("div", { className: classes.distribute },
React.createElement(Input, { size: "medium", value: this.state.r, onChange: e => this.change('r', e), placeholder: "R", className: classes.distributedItem, onInputClicked: stopPropagation }),
React.createElement(Input, { size: "medium", value: this.state.g, onChange: e => this.change('g', e), placeholder: "G", className: classes.distributedItem, onInputClicked: stopPropagation }),
React.createElement(Input, { size: "medium", value: this.state.b, onChange: e => this.change('b', e), placeholder: "B", className: classes.distributedItem, onInputClicked: stopPropagation })),
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);
}
});
}
}
//# sourceMappingURL=ColorPickerConverterRGB.js.map