@wix/design-system
Version:
@wix/design-system
153 lines (152 loc) • 7.41 kB
JavaScript
;
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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
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 _ClosablePopover = _interopRequireDefault(require("./ClosablePopover/ClosablePopover"));
var _FloatingHelperContent = _interopRequireDefault(require("./FloatingHelperContent/FloatingHelperContent"));
var _FloatingHelperSt = require("./FloatingHelper.st.css.js");
var _constants = require("./constants");
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _CloseButton2 = require("../CloseButton/CloseButton.constants");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _excluded = ["children", "width", "content", "appearance"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FloatingHelper/FloatingHelper.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 FloatingHelper = /*#__PURE__*/function (_React$Component) {
function FloatingHelper() {
var _this;
(0, _classCallCheck2["default"])(this, FloatingHelper);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, FloatingHelper, [].concat(args));
_this.closablePopoverRef = void 0;
_this.open = function () {
return _this.closablePopoverRef.open();
};
_this.close = function () {
return _this.closablePopoverRef.close();
};
return _this;
}
(0, _inherits2["default"])(FloatingHelper, _React$Component);
return (0, _createClass2["default"])(FloatingHelper, [{
key: "_isControlled",
value: function _isControlled() {
return this.props.opened !== undefined;
}
}, {
key: "_getCloseButtonHandler",
value: function _getCloseButtonHandler(closableActions) {
return this._isControlled() ? this.props.onClose ? this.props.onClose : function () {
return null;
} : closableActions.close;
}
}, {
key: "_renderContent",
value: function _renderContent(closableActions, _ref) {
var _this2 = this;
var width = _ref.width,
content = _ref.content,
skin = _ref.skin;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.contentWrapper,
style: {
width: width
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.innerContent,
className: _FloatingHelperSt.classes.innerContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_CloseButton["default"], {
className: _FloatingHelperSt.classes.closeButton,
dataHook: _constants.dataHooks.closeButton,
onClick: function onClick() {
return _this2._getCloseButtonHandler(closableActions)();
},
skin: skin === _constants.floatingHelperSkin.dark ? _CloseButton2.SKINS.light : _CloseButton2.SKINS.dark,
size: _CloseButton2.SIZES.medium,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 11
}
}), /*#__PURE__*/_react["default"].cloneElement(content, {
skin: skin
})));
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props = this.props,
children = _this$props.children,
width = _this$props.width,
content = _this$props.content,
appearance = _this$props.appearance,
rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
var skin = this.props.skin || appearance;
if (appearance) {
(0, _deprecationLog["default"])('<FloatingHelper/> - prop "appearance" is deprecated and will be removed in next major release, please use "skin" property instead.');
}
var renderContent = function renderContent(closableActions) {
return _this3._renderContent(closableActions, {
width: width,
content: content,
skin: skin
});
};
var closablePopoverProps = _objectSpread(_objectSpread({}, rest), {}, {
skin: skin,
content: renderContent,
showArrow: true,
closeOnMouseLeave: false
});
return /*#__PURE__*/_react["default"].createElement(_ClosablePopover["default"], (0, _extends2["default"])({}, closablePopoverProps, {
ref: function ref(_ref2) {
_this3.closablePopoverRef = _ref2;
},
className: _FloatingHelperSt.classes.root,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 7
}
}));
}
}]);
}(_react["default"].Component);
FloatingHelper.displayName = 'FloatingHelper';
FloatingHelper.defaultProps = {
appendTo: 'window',
width: '444px',
initiallyOpened: true,
appearance: 'dark' // TODO: add default skin prop once appearance is removed
};
FloatingHelper.Content = _FloatingHelperContent["default"];
var _default = exports["default"] = FloatingHelper;