@wix/design-system
Version:
@wix/design-system
61 lines • 3.4 kB
JavaScript
import React from 'react';
import PopoverNext from '../../PopoverNext';
import ColorPicker from '../../ColorPicker';
import DATA_HOOKS from '../DataHooks';
import { st, classes } from './ColorViewer.st.css.js';
import Color from 'color';
export class ColorViewer extends React.Component {
constructor() {
super(...arguments);
this.contentRef = React.createRef();
this._onDocumentKeyUp = event => {
if (event.key !== 'Tab' ||
!this.contentRef.current ||
this.contentRef.current.contains(document.activeElement)) {
return;
}
const { popoverProps, onTabOut } = this.props;
popoverProps?.onTabOut?.(event);
onTabOut(event);
};
this.onChange = _color => {
const color = typeof _color === 'object' ? _color : Color(_color);
this.props.onChange(color.alpha() === 0 ? '' : color.hex());
};
}
componentDidUpdate(prevProps) {
if (!prevProps.active && this.props.active) {
document.addEventListener('keyup', this._onDocumentKeyUp);
}
else if (prevProps.active && !this.props.active) {
document.removeEventListener('keyup', this._onDocumentKeyUp);
}
}
componentWillUnmount() {
document.removeEventListener('keyup', this._onDocumentKeyUp);
}
render() {
const { value, disabled, active, onClick, onConfirm, onCancel, size, placement = 'bottom', appendTo = 'parent', onClickOutside, children, onAddColor, addTooltipContent, placeholder, popoverProps, } = this.props;
// Extract Popover-only props not supported by PopoverNext to prevent spreading them
const { onTabOut: _unusedTabOut, onClickOutside: _unusedClickOutside, ...restPopoverProps } = popoverProps;
return (React.createElement(PopoverNext, { placement: placement, appendTo: appendTo, ...restPopoverProps, dataHook: DATA_HOOKS.COLOR_INPUT_POPOVER, showArrow: true, fixed: true, open: active, focusManagerEnabled: false, autoUpdateOptions: { animationFrame: true }, onOpenChange: (open, reason) => {
if (!open) {
if (reason === 'outside-press' && active) {
onClickOutside?.();
}
else if (reason === 'escape-key') {
onCancel?.();
}
}
} },
React.createElement(PopoverNext.Trigger, null,
React.createElement("div", { 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(PopoverNext.Content, null,
React.createElement("div", { ref: this.contentRef },
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