@wix/design-system
Version:
@wix/design-system
114 lines • 5.27 kB
JavaScript
import React from 'react';
import color from 'color';
import ColorPickerHsb from './ColorPickerHsb';
import ColorPickerHue from './ColorPickerHue';
import ColorPickerHistory from './ColorPickerHistory';
import ColorPickerConverter from './ColorPickerConverter';
import ColorPickerActions from './ColorPickerActions';
import { classes, st } from './ColorPicker.st.css.js';
import { safeColor, isTransparent } from './utils';
import { DataHooks } from './constants';
const FALLBACK_COLOR = color('#86c6e5');
/**
* Color Picker
*
* Under the hood uses color manipulation library [https://github.com/Qix-/color](https://github.com/Qix-/color).
* Value for this component can be given in `string` or `object` format.
* The callbacks always respond with color `object` format.
*/
class ColorPicker extends React.PureComponent {
constructor(props) {
super(props);
this._renderChildren = () => {
const { children } = this.props;
const childrenInterface = {
changeColor: _color => {
try {
let colorObject = _color;
if (typeof _color !== 'object') {
colorObject = _color === '' ? color().fade(1) : color(_color);
}
this.change(colorObject);
}
catch (err) { }
},
};
if (typeof children === 'function') {
return children(childrenInterface);
}
return children;
};
/**
* sets the selected color
* @param {object} color - An object that contains data for the selected color, model, and valpha.
*/
this.change = _color => {
this.setState({ current: _color }, () => {
this.props.onChange(_color);
// Auto-confirm when action buttons are hidden
if (!this.props.showActionButtons) {
this.confirm();
}
});
};
/**
* confirms the selected color
*/
this.confirm = () => {
this.setState({ previous: this.state.current });
this.props.onConfirm(this.state.current);
};
/**
* cancels the selected color
*/
this.cancel = () => {
this.props.onCancel(this.state.previous);
};
/**
* Sets focus on the first interactive element inside ColorPicker
*/
this.focus = () => {
this.hsbRef.current && this.hsbRef.current.focus();
};
const _color = safeColor(props.value, props.allowEmpty) || FALLBACK_COLOR;
this.state = { current: _color, previous: _color };
this.hsbRef = React.createRef();
}
render() {
const { showHistory, showInput, showConverter, showActionButtons, showEyeDropper, eyeDropperLabel, children, value, onAdd, addTooltipContent, allowEmpty, emptyPlaceholder, dataHook, removePadding, } = this.props;
const { current, previous } = this.state;
return (React.createElement("div", { className: st(classes.root, { noPadding: removePadding }), "data-hook": dataHook, role: "group", "aria-label": "Color picker" },
React.createElement("div", null,
React.createElement(ColorPickerHsb, { ref: this.hsbRef, dataHook: DataHooks.hsb, current: current, onChange: this.change }),
React.createElement(ColorPickerHue, { dataHook: DataHooks.hue, current: current, onChange: this.change, showHistory: showHistory }),
React.createElement(ColorPickerHistory, { show: showHistory, current: current, previous: previous, onClick: this.change })),
React.createElement(ColorPickerConverter, { dataHook: DataHooks.converter, showConverter: showConverter, showInput: showInput, current: current, onChange: this.change, onEnter: this.confirm, onAdd: onAdd, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty, hexPlaceholder: emptyPlaceholder, showEyeDropper: showEyeDropper, eyeDropperLabel: eyeDropperLabel }),
children && (React.createElement("div", { className: classes.children, "data-hook": DataHooks.children }, this._renderChildren())),
showActionButtons && (React.createElement(ColorPickerActions, { disabled: !allowEmpty && value === '', onConfirm: this.confirm, onCancel: this.cancel }))));
}
UNSAFE_componentWillReceiveProps(props) {
const _color = safeColor(props.value, props.allowEmpty);
if (!_color)
return;
if (_color.hex() !== this.state.current.hex() ||
isTransparent(_color) !== isTransparent(this.state.current)) {
this.setState({ current: _color });
}
}
}
ColorPicker.displayName = 'ColorPicker';
ColorPicker.defaultProps = {
showHistory: false,
showConverter: true,
showInput: true,
showActionButtons: true,
allowEmpty: false,
showEyeDropper: false,
eyeDropperLabel: 'Sample color',
removePadding: false,
onChange: () => { },
onCancel: () => { },
onConfirm: () => { },
};
export default ColorPicker;
//# sourceMappingURL=ColorPicker.js.map