@wix/design-system
Version:
@wix/design-system
187 lines (185 loc) • 8.08 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ColorViewer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _PopoverNext = _interopRequireDefault(require("../../PopoverNext"));
var _ColorPicker = _interopRequireDefault(require("../../ColorPicker"));
var _DataHooks = _interopRequireDefault(require("../DataHooks"));
var _ColorViewerSt = require("./ColorViewer.st.css.js");
var _color2 = _interopRequireDefault(require("color"));
var _excluded = ["onTabOut", "onClickOutside"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ColorInput/components/ColorViewer.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var ColorViewer = exports.ColorViewer = /*#__PURE__*/function (_React$Component) {
function ColorViewer() {
var _this;
(0, _classCallCheck2["default"])(this, ColorViewer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, ColorViewer, [].concat(args));
_this.contentRef = /*#__PURE__*/_react["default"].createRef();
_this._onDocumentKeyUp = function (event) {
if (event.key !== 'Tab' || !_this.contentRef.current || _this.contentRef.current.contains(document.activeElement)) {
return;
}
var _this$props = _this.props,
popoverProps = _this$props.popoverProps,
onTabOut = _this$props.onTabOut;
popoverProps == null || popoverProps.onTabOut == null || popoverProps.onTabOut(event);
onTabOut(event);
};
_this.onChange = function (_color) {
var color = (0, _typeof2["default"])(_color) === 'object' ? _color : (0, _color2["default"])(_color);
_this.props.onChange(color.alpha() === 0 ? '' : color.hex());
};
return _this;
}
(0, _inherits2["default"])(ColorViewer, _React$Component);
return (0, _createClass2["default"])(ColorViewer, [{
key: "componentDidUpdate",
value: function 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);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.removeEventListener('keyup', this._onDocumentKeyUp);
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
value = _this$props2.value,
disabled = _this$props2.disabled,
active = _this$props2.active,
onClick = _this$props2.onClick,
onConfirm = _this$props2.onConfirm,
onCancel = _this$props2.onCancel,
size = _this$props2.size,
_this$props2$placemen = _this$props2.placement,
placement = _this$props2$placemen === void 0 ? 'bottom' : _this$props2$placemen,
_this$props2$appendTo = _this$props2.appendTo,
appendTo = _this$props2$appendTo === void 0 ? 'parent' : _this$props2$appendTo,
onClickOutside = _this$props2.onClickOutside,
children = _this$props2.children,
onAddColor = _this$props2.onAddColor,
addTooltipContent = _this$props2.addTooltipContent,
placeholder = _this$props2.placeholder,
popoverProps = _this$props2.popoverProps;
// Extract Popover-only props not supported by PopoverNext to prevent spreading them
var _unusedTabOut = popoverProps.onTabOut,
_unusedClickOutside = popoverProps.onClickOutside,
restPopoverProps = (0, _objectWithoutProperties2["default"])(popoverProps, _excluded);
return /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"], (0, _extends2["default"])({
placement: placement,
appendTo: appendTo
}, restPopoverProps, {
dataHook: _DataHooks["default"].COLOR_INPUT_POPOVER,
showArrow: true,
fixed: true,
open: active,
focusManagerEnabled: false,
autoUpdateOptions: {
animationFrame: true
},
onOpenChange: function onOpenChange(open, reason) {
if (!open) {
if (reason === 'outside-press' && active) {
onClickOutside == null || onClickOutside();
} else if (reason === 'escape-key') {
onCancel == null || onCancel();
}
}
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Trigger, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("div", {
onClick: disabled ? undefined : onClick,
style: {
backgroundColor: value
},
className: (0, _ColorViewerSt.st)(_ColorViewerSt.classes.root, {
size: size
}),
"data-size": size,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 11
}
}, value === '' && /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _DataHooks["default"].COLOR_INPUT_VIEWER_LINE,
className: _ColorViewerSt.classes.line,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 15
}
}))), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Content, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: this.contentRef,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
dataHook: _DataHooks["default"].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,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 13
}
}, children))));
}
}]);
}(_react["default"].Component);
ColorViewer.defaultProps = {
popoverProps: {}
};