wix-style-react
Version:
wix-style-react
288 lines (287 loc) • 9.72 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _propTypes = _interopRequireDefault(require("prop-types"));
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");
var _NavigationButton = _interopRequireDefault(require("./NavigationButton/NavigationButton"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ModalPreviewLayout/ModalPreviewLayout.js";
/** This is a fullscreen modal to present a document to the user overlaying the entire view port */
class ModalPreviewLayout extends _react.default.PureComponent {
constructor(props) {
super(props);
this._onRightNavigationClick = () => {
var {
childIndexDisplayed
} = this.state;
var {
onClick
} = this.props.nextButtonProps;
var newChildIndexDisplayed = childIndexDisplayed + 1;
this.setState({
childIndexDisplayed: newChildIndexDisplayed
}, () => {
onClick && onClick(newChildIndexDisplayed);
});
};
this._onLeftNavigationClick = () => {
var {
childIndexDisplayed
} = this.state;
var {
onClick
} = this.props.prevButtonProps;
var newChildIndexDisplayed = childIndexDisplayed - 1;
this.setState({
childIndexDisplayed: newChildIndexDisplayed
}, () => {
onClick && onClick(newChildIndexDisplayed);
});
};
this.state = {
childIndexDisplayed: this.props.startDisplayingAtChildIndex
};
}
_shouldClose(id) {
return this.props.shouldCloseOnOverlayClick && [_constants.modalPreviewIDs.overlay, _constants.modalPreviewIDs.innerOverlay].includes(id);
}
_onOverlayClick(onClose) {
return _ref => {
var {
target: {
id
}
} = _ref;
if (this._shouldClose(id) && typeof onClose === 'function') {
onClose();
}
};
}
_renderNavigationButtons(hasLeft, hasRight) {
var {
prevButtonProps,
nextButtonProps
} = this.props;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
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: 117,
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: 124,
columnNumber: 11
}
}));
}
render() {
var {
dataHook,
actions,
title,
children,
onClose,
closeButtonTooltipText,
skin
} = this.props;
var {
childIndexDisplayed
} = this.state;
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: 151,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _ModalPreviewLayoutSt.st)(_ModalPreviewLayoutSt.classes.header, {
skin
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.modalPreviewTitle,
className: _ModalPreviewLayoutSt.classes.title,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
light: skin === _constants.skins.dark,
ellipsis: true,
tooltipProps: {
placement: 'bottom'
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 13
}
}, title)), /*#__PURE__*/_react.default.createElement("div", {
className: _ModalPreviewLayoutSt.classes.actions,
"data-hook": _constants.dataHooks.modalPreviewActions,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 11
}
}, actions), /*#__PURE__*/_react.default.createElement("div", {
className: _ModalPreviewLayoutSt.classes.closeButton,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 177,
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: 183,
columnNumber: 24
}
}, closeButtonTooltipText),
placement: "bottom",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
as: "button",
onClick: onClose,
priority: "secondary",
skin: skin === _constants.skins.dark ? 'transparent' : 'standard',
dataHook: _constants.dataHooks.modalPreviewCloseButton,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.X, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 193,
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: 198,
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: 203,
columnNumber: 11
}
}, childrenArr[childIndexDisplayed]), this._renderNavigationButtons(hasLeft, hasRight)));
}
}
ModalPreviewLayout.displayName = 'ModalPreviewLayout';
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,
/** 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
}),
/**
* Pass an index to start rendering from a specific child component.
*/
startDisplayingAtChildIndex: _propTypes.default.number,
/** Controls the skin of the component */
skin: _propTypes.default.oneOf(Object.keys(_constants.skins))
};
ModalPreviewLayout.defaultProps = {
shouldCloseOnOverlayClick: true,
nextButtonProps: {},
prevButtonProps: {},
startDisplayingAtChildIndex: 0,
skin: 'dark'
};
var _default = exports.default = ModalPreviewLayout;
//# sourceMappingURL=ModalPreviewLayout.js.map