wix-style-react
Version:
wix-style-react
61 lines • 2.34 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Input from '../Input';
import { st, classes } from './ColorPickerConverter.st.css';
import ColorPickerConverterViewer from './ColorPickerConverterViewer';
import { safeColor, getHexOrEmpty } from './utils';
class ColorPickerConverterHex extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
hex: getHexOrEmpty(this.props.current),
inFocus: false,
};
this.change = ({ target: { value } }) => {
this.setState({ hex: value }, () => {
const _color = safeColor(value, this.props.allowEmpty);
if (_color) {
this.props.onChange(_color);
}
});
};
this.handleOnFocus = () => {
this.setState({
inFocus: true,
});
};
this.handleOnBlur = () => {
this.setState({
inFocus: false,
hex: getHexOrEmpty(this.props.current),
});
};
this.handleKeyDown = event => {
const { key } = event;
if (key === 'Enter') {
this.props.onEnter();
}
};
}
render() {
const { dataHook } = this.props;
return (React.createElement("div", { className: st(classes.root), "data-hook": dataHook },
React.createElement(Input, { size: "small", value: this.state.hex, placeholder: this.props.placeholder, onChange: this.change, onFocus: this.handleOnFocus, onBlur: this.handleOnBlur, onKeyDown: this.handleKeyDown, className: classes.colorInput, onInputClicked: e => e.stopPropagation() }),
React.createElement(ColorPickerConverterViewer, { ...this.props, color: this.props.current })));
}
UNSAFE_componentWillReceiveProps(props) {
const hex = getHexOrEmpty(props.current);
if (!this.state.inFocus && this.state.hex !== hex) {
this.setState({
hex,
});
}
}
}
ColorPickerConverterHex.propTypes = {
current: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
placeholder: PropTypes.string,
};
export default ColorPickerConverterHex;
//# sourceMappingURL=ColorPickerConverterHex.js.map