@wix/design-system
Version:
@wix/design-system
253 lines (252 loc) • 10.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
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 _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _react = _interopRequireDefault(require("react"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Text = _interopRequireDefault(require("../Text"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _constants = require("./constants");
var _ModalPreviewLayoutSt = require("./ModalPreviewLayout.st.css.js");
var _NavigationButton = _interopRequireDefault(require("./NavigationButton/NavigationButton"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ModalPreviewLayout/ModalPreviewLayout.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; })(); }
/** This is a fullscreen modal to present a document to the user overlaying the entire view port */
var ModalPreviewLayout = /*#__PURE__*/function (_React$PureComponent) {
function ModalPreviewLayout(props) {
var _this;
(0, _classCallCheck2["default"])(this, ModalPreviewLayout);
_this = _callSuper(this, ModalPreviewLayout, [props]);
_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);
});
};
_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: _this.props.startDisplayingAtChildIndex
};
return _this;
}
(0, _inherits2["default"])(ModalPreviewLayout, _React$PureComponent);
return (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;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 7
}
}, hasLeft && /*#__PURE__*/_react["default"].createElement(_NavigationButton["default"], {
tooltipText: prevButtonProps.tooltipText,
direction: _constants.arrowsDirection.leftArrow,
onClick: this._onLeftNavigationClick,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 11
}
}), hasRight && /*#__PURE__*/_react["default"].createElement(_NavigationButton["default"], {
tooltipText: nextButtonProps.tooltipText,
direction: _constants.arrowsDirection.rightArrow,
onClick: this._onRightNavigationClick,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 11
}
}));
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
actions = _this$props2.actions,
title = _this$props2.title,
children = _this$props2.children,
onClose = _this$props2.onClose,
closeButtonTooltipText = _this$props2.closeButtonTooltipText,
closeButtonAriaLabel = _this$props2.closeButtonAriaLabel,
skin = _this$props2.skin;
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),
"data-skin": skin,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _ModalPreviewLayoutSt.st)(_ModalPreviewLayoutSt.classes.header, {
skin: skin
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.modalPreviewTitle,
className: _ModalPreviewLayoutSt.classes.title,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
light: skin === _constants.skins.dark,
ellipsis: true,
tooltipProps: {
placement: 'bottom'
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 13
}
}, title)), /*#__PURE__*/_react["default"].createElement("div", {
className: _ModalPreviewLayoutSt.classes.actions,
"data-hook": _constants.dataHooks.modalPreviewActions,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 11
}
}, actions), /*#__PURE__*/_react["default"].createElement("div", {
className: _ModalPreviewLayoutSt.classes.closeButton,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 11
}
}, /*#__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"], {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 24
}
}, closeButtonTooltipText),
placement: "bottom",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
as: "button",
onClick: onClose,
priority: "secondary",
ariaLabel: closeButtonAriaLabel,
skin: skin === _constants.skins.dark ? 'transparent' : 'standard',
dataHook: _constants.dataHooks.modalPreviewCloseButton,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 15
}
}, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.X, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 17
}
}))))), /*#__PURE__*/_react["default"].createElement("div", {
id: _constants.modalPreviewIDs.innerOverlay,
"data-hook": _constants.dataHooks.innerOverlay,
className: _ModalPreviewLayoutSt.classes.innerOverlay,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.modalPreviewContent,
className: _ModalPreviewLayoutSt.classes.content,
"data-index": childIndexDisplayed,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 11
}
}, childrenArr[childIndexDisplayed]), this._renderNavigationButtons(hasLeft, hasRight)));
}
}]);
}(_react["default"].PureComponent);
ModalPreviewLayout.displayName = 'ModalPreviewLayout';
ModalPreviewLayout.defaultProps = {
shouldCloseOnOverlayClick: true,
nextButtonProps: {},
prevButtonProps: {},
startDisplayingAtChildIndex: 0,
skin: 'dark'
};
var _default = exports["default"] = ModalPreviewLayout;