@wix/design-system
Version:
@wix/design-system
177 lines (176 loc) • 7.48 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _ColorPicker = _interopRequireDefault(require("../ColorPicker"));
var _color = _interopRequireDefault(require("color"));
var _PopoverNext = _interopRequireDefault(require("../PopoverNext"));
var _FillButton = _interopRequireDefault(require("../FillButton"));
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Swatches/AddColor.jsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 EMPTY_COLOR = (0, _color["default"])('#00000000');
var AddColor = /*#__PURE__*/function (_React$PureComponent) {
function AddColor() {
var _this;
(0, _classCallCheck2["default"])(this, AddColor);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, AddColor, [].concat(args));
_this.state = {
color: EMPTY_COLOR,
shown: false
};
_this.toggleColorPicker = function (e) {
e.preventDefault();
_this.setState({
shown: !_this.state.shown
});
};
_this.hideColorPicker = function () {
return _this.setState({
shown: false,
color: EMPTY_COLOR
});
};
_this.setColor = function (color) {
_this.setState({
color: color
});
if (_this.props.onChange) {
_this.props.onChange(color.hex());
}
};
_this.confirm = function () {
_this.hideColorPicker();
_this.props.onAdd(_this.state.color.hex());
};
_this.cancel = function () {
_this.hideColorPicker();
if (_this.props.onCancel) {
_this.props.onCancel();
}
};
return _this;
}
(0, _inherits2["default"])(AddColor, _React$PureComponent);
return (0, _createClass2["default"])(AddColor, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$state = this.state,
shown = _this$state.shown,
color = _this$state.color;
var isEmptyColor = color.alpha() === 0;
var noColorSelected = !shown || isEmptyColor;
var buttonColor = noColorSelected ? undefined : color.hex();
var _this$props = this.props,
tooltip = _this$props.tooltip,
iconSize = _this$props.iconSize,
customPopoverProps = _this$props.popoverProps,
_this$props$renderCol = _this$props.renderColorPicker,
renderColorPicker = _this$props$renderCol === void 0 ? function (_ref) {
var cancel = _ref.cancel,
confirm = _ref.confirm,
setColor = _ref.setColor,
currentColor = _ref.currentColor;
return /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
dataHook: _constants.dataHooks.addButtonColorPicker,
onCancel: cancel,
onChange: setColor,
onConfirm: confirm,
value: currentColor,
allowEmpty: false,
showConverter: false,
showInput: false,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 9
}
});
} : _this$props$renderCol;
var popoverProps = _objectSpread({
appendTo: 'window',
placement: 'top',
showArrow: true,
open: shown,
focusManagerEnabled: false,
onOpenChange: function onOpenChange(open, reason) {
if (!open && (reason === 'outside-press' || reason === 'escape-key')) {
_this2.cancel();
}
}
}, customPopoverProps);
return /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"], (0, _extends2["default"])({
dataHook: _constants.dataHooks.addButtonPopover,
autoUpdateOptions: {
animationFrame: true
}
}, popoverProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Trigger, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("span", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement(_FillButton["default"], {
dataHook: _constants.dataHooks.addButton,
iconSize: iconSize,
fill: buttonColor,
onClick: this.toggleColorPicker,
tooltipProps: {
disabled: shown,
timeout: 0,
content: tooltip
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 13
}
}))), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Content, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 9
}
}, renderColorPicker({
cancel: this.cancel,
confirm: this.confirm,
setColor: this.setColor,
currentColor: isEmptyColor ? '' : color
})));
}
}]);
}(_react["default"].PureComponent);
var _default = exports["default"] = AddColor;