wix-style-react
Version:
247 lines (203 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _X = _interopRequireDefault(require("wix-ui-icons-common/X"));
var _Text = _interopRequireDefault(require("../Text"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _ModalPreviewLayoutSt = require("./ModalPreviewLayout.st.css");
var _constants = require("./constants");
var _NavigationButton = _interopRequireDefault(require("./NavigationButton/NavigationButton"));
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
/** This is a fullscreen modal to present a document to the user overlaying the entire view port */
var ModalPreviewLayout = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(ModalPreviewLayout, _React$PureComponent);
var _super = _createSuper(ModalPreviewLayout);
function ModalPreviewLayout(props) {
var _this;
(0, _classCallCheck2["default"])(this, ModalPreviewLayout);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onRightNavigationClick", function () {
var childIndexDisplayed = _this.state.childIndexDisplayed;
var onClick = _this.props.nextButtonProps.onClick;
var newChildIndexDisplayed = childIndexDisplayed + 1;
_this.setState({
childIndexDisplayed: newChildIndexDisplayed
}, function () {
onClick && onClick(newChildIndexDisplayed);
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onLeftNavigationClick", function () {
var childIndexDisplayed = _this.state.childIndexDisplayed;
var onClick = _this.props.prevButtonProps.onClick;
var newChildIndexDisplayed = childIndexDisplayed - 1;
_this.setState({
childIndexDisplayed: newChildIndexDisplayed
}, function () {
onClick && onClick(newChildIndexDisplayed);
});
});
_this.state = {
childIndexDisplayed: 0
};
(0, _deprecationLog["default"])('nextButtonTooltipText and prevButtonTooltipText props are deprecated and will be removed as part of the next major version, please use nextButtonProps and prevButtonProps.');
return _this;
}
(0, _createClass2["default"])(ModalPreviewLayout, [{
key: "_shouldClose",
value: function _shouldClose(id) {
return this.props.shouldCloseOnOverlayClick && [_constants.modalPreviewIDs.overlay, _constants.modalPreviewIDs.innerOverlay].includes(id);
}
}, {
key: "_onOverlayClick",
value: function _onOverlayClick(onClose) {
var _this2 = this;
return function (_ref) {
var id = _ref.target.id;
if (_this2._shouldClose(id) && typeof onClose === 'function') {
onClose();
}
};
}
}, {
key: "_renderNavigationButtons",
value: function _renderNavigationButtons(hasLeft, hasRight) {
var _this$props = this.props,
prevButtonProps = _this$props.prevButtonProps,
nextButtonProps = _this$props.nextButtonProps;
/* will be deprecated in next major */
var _this$props2 = this.props,
prevButtonTooltipText = _this$props2.prevButtonTooltipText,
nextButtonTooltipText = _this$props2.nextButtonTooltipText;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, hasLeft && /*#__PURE__*/_react["default"].createElement(_NavigationButton["default"], {
tooltipText: prevButtonProps.tooltipText || prevButtonTooltipText,
direction: _constants.arrowsDirection.leftArrow,
onClick: this._onLeftNavigationClick
}), hasRight && /*#__PURE__*/_react["default"].createElement(_NavigationButton["default"], {
tooltipText: nextButtonProps.tooltipText || nextButtonTooltipText,
direction: _constants.arrowsDirection.rightArrow,
onClick: this._onRightNavigationClick
}));
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
dataHook = _this$props3.dataHook,
actions = _this$props3.actions,
title = _this$props3.title,
children = _this$props3.children,
onClose = _this$props3.onClose,
closeButtonTooltipText = _this$props3.closeButtonTooltipText;
var childIndexDisplayed = this.state.childIndexDisplayed;
var childrenArr = _react["default"].Children.toArray(children);
var hasLeft = childIndexDisplayed > 0;
var hasRight = childIndexDisplayed < childrenArr.length - 1;
return /*#__PURE__*/_react["default"].createElement("div", {
id: _constants.modalPreviewIDs.overlay,
"data-hook": dataHook,
className: _ModalPreviewLayoutSt.classes.root,
onClick: this._onOverlayClick(onClose)
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _ModalPreviewLayoutSt.classes.header
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.modalPreviewTitle,
className: _ModalPreviewLayoutSt.classes.title
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
light: true,
ellipsis: true
}, title)), /*#__PURE__*/_react["default"].createElement("div", {
className: _ModalPreviewLayoutSt.classes.actions,
"data-hook": _constants.dataHooks.modalPreviewActions
}, actions), /*#__PURE__*/_react["default"].createElement("div", {
className: _ModalPreviewLayoutSt.classes.closeButton
}, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
disabled: !closeButtonTooltipText,
className: _ModalPreviewLayoutSt.classes.modalTooltip,
dataHook: _constants.dataHooks.closeButtonTooltip,
appendTo: "scrollParent",
content: /*#__PURE__*/_react["default"].createElement(_Text["default"], null, closeButtonTooltipText),
placement: "bottom"
}, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
as: "button",
onClick: onClose,
priority: "secondary",
skin: "transparent",
dataHook: _constants.dataHooks.modalPreviewCloseButton
}, /*#__PURE__*/_react["default"].createElement(_X["default"], null))))), /*#__PURE__*/_react["default"].createElement("div", {
id: _constants.modalPreviewIDs.innerOverlay,
"data-hook": _constants.dataHooks.innerOverlay,
className: _ModalPreviewLayoutSt.classes.innerOverlay
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.modalPreviewContent,
className: _ModalPreviewLayoutSt.classes.content,
"data-index": childIndexDisplayed
}, childrenArr[childIndexDisplayed]), this._renderNavigationButtons(hasLeft, hasRight)));
}
}]);
return ModalPreviewLayout;
}(_react["default"].PureComponent);
(0, _defineProperty2["default"])(ModalPreviewLayout, "displayName", 'ModalPreviewLayout');
(0, _defineProperty2["default"])(ModalPreviewLayout, "propTypes", {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes["default"].string,
/** component to be displayed in header strip to preform actions relevant to the displayed content */
actions: _propTypes["default"].node,
/** title text to be displayed in the header strip */
title: _propTypes["default"].string,
/** modal content displayed mid-screen*/
children: _propTypes["default"].node.isRequired,
/** callback for when the modal is closed */
onClose: _propTypes["default"].func.isRequired,
/** boolean to determine whether closing the overlay on click */
shouldCloseOnOverlayClick: _propTypes["default"].bool,
/** Tooltip close button text */
closeButtonTooltipText: _propTypes["default"].node,
/** this prop is deprecated and should not be used
* @deprecated
*/
prevButtonTooltipText: _propTypes["default"].string,
/** this prop is deprecated and should not be used
* @deprecated
*/
nextButtonTooltipText: _propTypes["default"].string,
/** Previous button props
* ##### onClick signature:
* function(childIndexDisplayed: number) => void
* * `childIndexDisplayed`: the index of the child component displayed.
*/
prevButtonProps: _propTypes["default"].shape({
onClick: _propTypes["default"].func,
tooltipText: _propTypes["default"].node
}),
/** Next button props
* ##### onClick signature:
* function(childIndexDisplayed: number) => void
* * `childIndexDisplayed`: the index of the child component displayed.
*/
nextButtonProps: _propTypes["default"].shape({
onClick: _propTypes["default"].func,
tooltipText: _propTypes["default"].node
})
});
(0, _defineProperty2["default"])(ModalPreviewLayout, "defaultProps", {
shouldCloseOnOverlayClick: true,
nextButtonProps: {},
prevButtonProps: {}
});
var _default = ModalPreviewLayout;
exports["default"] = _default;