wix-style-react
Version:
224 lines (187 loc) • 8.39 kB
JavaScript
import _typeof from "@babel/runtime/helpers/typeof";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import color from 'color';
import PropTypes from 'prop-types';
import ColorPickerHsb from './ColorPickerHsb';
import ColorPickerHue from './ColorPickerHue';
import ColorPickerHistory from './ColorPickerHistory';
import ColorPickerConverter from './ColorPickerConverter';
import ColorPickerActions from './ColorPickerActions';
import { classes } from './ColorPicker.st.css';
import { safeColor, isTransparent } from './utils';
import { DataHooks } from './constants';
var 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.
*/
var ColorPicker = /*#__PURE__*/function (_React$PureComponent) {
_inherits(ColorPicker, _React$PureComponent);
var _super = _createSuper(ColorPicker);
function ColorPicker(props) {
var _this;
_classCallCheck(this, ColorPicker);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "_renderChildren", function () {
var children = _this.props.children;
var childrenInterface = {
changeColor: function changeColor(_color) {
try {
var 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;
});
_defineProperty(_assertThisInitialized(_this), "change", function (_color) {
_this.setState({
current: _color
}, function () {
_this.props.onChange(_color);
});
});
_defineProperty(_assertThisInitialized(_this), "confirm", function () {
_this.setState({
previous: _this.state.current
});
_this.props.onConfirm(_this.state.current);
});
_defineProperty(_assertThisInitialized(_this), "cancel", function () {
_this.props.onCancel(_this.state.previous);
});
var _color2 = safeColor(props.value, props.allowEmpty) || FALLBACK_COLOR;
_this.state = {
current: _color2,
previous: _color2
};
return _this;
}
_createClass(ColorPicker, [{
key: "render",
value: function render() {
var _this$props = this.props,
showHistory = _this$props.showHistory,
showInput = _this$props.showInput,
showConverter = _this$props.showConverter,
children = _this$props.children,
value = _this$props.value,
onAdd = _this$props.onAdd,
addTooltipContent = _this$props.addTooltipContent,
allowEmpty = _this$props.allowEmpty,
emptyPlaceholder = _this$props.emptyPlaceholder,
dataHook = _this$props.dataHook;
var _this$state = this.state,
current = _this$state.current,
previous = _this$state.previous;
return /*#__PURE__*/React.createElement("div", {
className: classes.root,
"data-hook": dataHook
}, /*#__PURE__*/React.createElement(ColorPickerHsb, {
dataHook: DataHooks.hsb,
current: current,
onChange: this.change
}), /*#__PURE__*/React.createElement(ColorPickerHue, {
dataHook: DataHooks.hue,
current: current,
onChange: this.change
}), /*#__PURE__*/React.createElement(ColorPickerHistory, {
show: showHistory,
current: current,
previous: previous,
onClick: this.change
}), /*#__PURE__*/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
}), children && /*#__PURE__*/React.createElement("div", {
className: classes.children,
"data-hook": DataHooks.children
}, this._renderChildren()), /*#__PURE__*/React.createElement(ColorPickerActions, {
disabled: !allowEmpty && value === '',
onConfirm: this.confirm,
onCancel: this.cancel
}));
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(props) {
var _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
});
}
}
/**
* sets the selected color
* @param {object} color - An object that contains data for the selected color, model, and valpha.
*/
}]);
return ColorPicker;
}(React.PureComponent);
ColorPicker.displayName = 'ColorPicker';
ColorPicker.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Defines current color. It can be provided in `string` or `object` format [https://github.com/Qix-/color](https://github.com/Qix-/color) */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
/** Specifies whether current and previously used colors should be displayed */
showHistory: PropTypes.bool,
/** Specifies whether `HEX`/`RGB`/`HSB` converter tabs be displayed */
showConverter: PropTypes.bool,
/** Specifies whether color input in HEX mode should be displayed. This is relevant only if `showConverter` is `false` */
showInput: PropTypes.bool,
/** Defines an event handler for color change. */
onChange: PropTypes.func,
/** Defines an event handler for cancel button click. */
onCancel: PropTypes.func,
/** Defines an event handler for confirm button click. */
onConfirm: PropTypes.func,
/** Defines an event handler for color add button click. If not passed, the plus icon will not be visible. */
onAdd: PropTypes.func,
/** Defines child items to be rendered above action buttons. Accepts any kind of content. */
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
/** Defines content to show in add button tooltip. Does not appear if `onAdd` is not passed. */
addTooltipContent: PropTypes.node,
/** Allows to submit when color is not selected. Returns a color object with alpha equal to 0. */
allowEmpty: PropTypes.bool,
/** Defines a placeholder text to show in an input when `allowEmpty` is true */
emptyPlaceholder: PropTypes.string
};
ColorPicker.defaultProps = {
showHistory: false,
showConverter: true,
showInput: true,
allowEmpty: false,
onChange: function onChange() {},
onCancel: function onCancel() {},
onConfirm: function onConfirm() {}
};
export default ColorPicker;