wix-style-react
Version:
wix-style-react
27 lines • 1.91 kB
JavaScript
import React from 'react';
import Popover from '../../Popover';
import ColorPicker from '../../ColorPicker';
import DATA_HOOKS from '../DataHooks';
import { st, classes } from './ColorViewer.st.css';
import Color from 'color';
export class ColorViewer extends React.Component {
constructor() {
super(...arguments);
this.onChange = _color => {
const color = typeof _color === 'object' ? _color : Color(_color);
this.props.onChange(color.alpha() === 0 ? '' : color.hex());
};
}
render() {
const { value, disabled, active, onClick, onConfirm, onCancel, size, placement = 'bottom', appendTo = 'parent', onClickOutside, children, onAddColor, addTooltipContent, placeholder, popoverProps, } = this.props;
return (React.createElement(Popover, { placement: placement, appendTo: appendTo, onClickOutside: active ? onClickOutside : null, ...popoverProps, dataHook: DATA_HOOKS.COLOR_INPUT_POPOVER, showArrow: true, fixed: true, shown: active },
React.createElement(Popover.Element, null,
React.createElement("div", { "data-hook": DATA_HOOKS.COLOR_INPUT_VIEWER, onClick: disabled ? undefined : onClick, style: { backgroundColor: value }, className: st(classes.root, { size }), "data-size": size }, value === '' && (React.createElement("div", { "data-hook": DATA_HOOKS.COLOR_INPUT_VIEWER_LINE, className: classes.line })))),
React.createElement(Popover.Content, null,
React.createElement(ColorPicker, { dataHook: DATA_HOOKS.COLOR_INPUT_COLOR_PICKER, showConverter: false, showInput: true, onCancel: onCancel, onChange: this.onChange, onConfirm: onConfirm, value: value, onAdd: onAddColor, allowEmpty: true, addTooltipContent: addTooltipContent, emptyPlaceholder: placeholder }, children))));
}
}
ColorViewer.defaultProps = {
popoverProps: {},
};
//# sourceMappingURL=ColorViewer.js.map