@wix/design-system
Version:
@wix/design-system
53 lines • 3.71 kB
JavaScript
import React from 'react';
import Box from '../Box';
import SegmentedToggle from '../SegmentedToggle';
import ToggleButton from '../ToggleButton';
import { classes, st } from './ColorPickerConverter.st.css.js';
import ColorPickerConverterHex from './ColorPickerConverterHex';
import ColorPickerConverterHsb from './ColorPickerConverterHsb';
import ColorPickerConverterRGB from './ColorPickerConverterRGB';
import { safeColor } from './utils';
import { EyeDropper } from './ColorPickerEyeDropper';
import { DataHooks } from './constants';
const HEX = 'HEX';
const RGB = 'RGB';
const HSB = 'HSB';
export default class ColorPickerConverter extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
activeConverter: HEX,
};
this.changeConverter = (evt, value) => {
this.setState({ activeConverter: value });
};
}
render() {
const { dataHook, current, showConverter, showInput, addTooltipContent, allowEmpty, hexPlaceholder, showEyeDropper, eyeDropperLabel, } = this.props;
const dataHooks = {
hex: 'color-picker-hex-input',
rgb: 'color-picker-rgb-inputs',
hsb: 'color-picker-hsb-inputs',
};
const { activeConverter } = this.state;
if (!showConverter && !showInput) {
return null;
}
if (!showConverter) {
return (React.createElement(Box, { direction: "horizontal", gap: "small", align: "center" },
showEyeDropper && (React.createElement(EyeDropper, { eyeDropperLabel: eyeDropperLabel, allowEmpty: allowEmpty, onChange: this.props.onChange })),
React.createElement(ColorPickerConverterHex, { placeholder: hexPlaceholder, dataHook: dataHooks.hex, current: current, onChange: this.props.onChange, onEnter: this.props.onEnter, onAdd: this.props.onAdd, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty })));
}
return (React.createElement("div", { className: st(classes.root), "data-hook": dataHook },
React.createElement("div", { className: st(classes.colorModelSwitcher) },
React.createElement(SegmentedToggle, { selected: activeConverter, onClick: (evt, value) => this.changeConverter(evt, value), size: "medium" },
React.createElement(SegmentedToggle.Button, { value: HEX, dataHook: DataHooks.hexConverterBtn }, HEX),
React.createElement(SegmentedToggle.Button, { value: RGB, dataHook: DataHooks.rgbConverterBtn }, RGB),
React.createElement(SegmentedToggle.Button, { value: HSB, dataHook: DataHooks.hsbConverterBtn }, HSB)),
showEyeDropper && (React.createElement(EyeDropper, { eyeDropperLabel: eyeDropperLabel, allowEmpty: allowEmpty, onChange: this.props.onChange }))),
activeConverter === HEX && (React.createElement(ColorPickerConverterHex, { placeholder: hexPlaceholder, dataHook: dataHooks.hex, current: current, onChange: this.props.onChange, onAdd: this.props.onAdd, onEnter: this.props.onEnter, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty })),
activeConverter === RGB && (React.createElement(ColorPickerConverterRGB, { dataHook: dataHooks.rgb, current: current, onChange: this.props.onChange, onAdd: this.props.onAdd, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty })),
activeConverter === HSB && (React.createElement(ColorPickerConverterHsb, { dataHook: dataHooks.hsb, current: current, onChange: this.props.onChange, onAdd: this.props.onAdd, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty }))));
}
}
//# sourceMappingURL=ColorPickerConverter.js.map