@vtex/styleguide
Version:
> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
218 lines (185 loc) • 9.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ModalOverlay = undefined;
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactDom = require("react-dom");
var _classnames = require("classnames");
var _classnames2 = _interopRequireDefault(_classnames);
var _TopBar = require("./TopBar");
var _TopBar2 = _interopRequireDefault(_TopBar);
var _BottomBar = require("./BottomBar");
var _BottomBar2 = _interopRequireDefault(_BottomBar);
var _modal = require("./modal.css");
var _modal2 = _interopRequireDefault(_modal);
var _utils = require("./utils");
var _FocusTrap = require("./FocusTrap");
var _FocusTrap2 = _interopRequireDefault(_FocusTrap);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var ModalOverlay = exports.ModalOverlay = function ModalOverlay(_ref) {
var isOpen = _ref.isOpen,
onClose = _ref.onClose,
centered = _ref.centered,
container = _ref.container,
closeOnOverlayClick = _ref.closeOnOverlayClick,
onCloseTransitionFinish = _ref.onCloseTransitionFinish,
children = _ref.children;
var _useState = (0, _react.useState)(isOpen),
showPortal = _useState[0],
setShowPortal = _useState[1];
var _useState2 = (0, _react.useState)(),
focusReturnNode = _useState2[0],
setFocusReturnNode = _useState2[1];
(0, _utils.useEnhancedEffect)(function () {
if (isOpen) {
setFocusReturnNode(document.activeElement);
return;
}
if (focusReturnNode instanceof HTMLElement && document.contains(focusReturnNode)) {
focusReturnNode == null ? void 0 : focusReturnNode.focus();
}
}, [isOpen]);
(0, _utils.useEnhancedEffect)(function () {
if (!isOpen) {
return;
}
setShowPortal(isOpen);
document.body.classList.add(_modal2.default.hiddenScroll);
}, [isOpen]);
var handleClick = function handleClick() {
if (!closeOnOverlayClick) return;
onClose();
};
var handleAnimationEnd = function handleAnimationEnd() {
if (isOpen) return;
onCloseTransitionFinish == null ? void 0 : onCloseTransitionFinish();
setShowPortal(false);
document.body.classList.remove(_modal2.default.hiddenScroll);
};
(0, _react.useEffect)(function () {
return function () {
document.body.classList.remove(_modal2.default.hiddenScroll);
};
}, []);
return showPortal && _utils.canUseDOM ? (0, _reactDom.createPortal)(
/** This rule can be disabled because we are not using the onClick property to click
* the element itself but to capture outside clicks */
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
_react2.default.createElement("div", {
className: (0, _classnames2.default)('vtex-modal__overlay flex fixed z-max overflow-hidden bg-black-70 absolute--fill outline-0', isOpen ? _modal2.default.openAnimation : _modal2.default.closeAnimation, {
'items-start': !centered,
'items-center': centered
}),
tabIndex: -1,
onClick: handleClick,
onAnimationEnd: handleAnimationEnd,
"data-testid": "modal__overlay",
role: "presentation"
}, _react2.default.createElement(_FocusTrap2.default, null, children)), container != null ? container : document.body) : null;
};
var ModalContent = (0, _react.forwardRef)(function ModalContent(_ref2, forwardedRef) {
var _classNames;
var onClose = _ref2.onClose,
showCloseIcon = _ref2.showCloseIcon,
title = _ref2.title,
showTopBar = _ref2.showTopBar,
bottomBar = _ref2.bottomBar,
showBottomBarBorder = _ref2.showBottomBarBorder,
responsiveFullScreen = _ref2.responsiveFullScreen,
size = _ref2.size,
closeOnEsc = _ref2.closeOnEsc,
children = _ref2.children,
props = _objectWithoutPropertiesLoose(_ref2, ["onClose", "showCloseIcon", "title", "showTopBar", "bottomBar", "showBottomBarBorder", "responsiveFullScreen", "size", "closeOnEsc", "children"]);
var handleKeyDown = function handleKeyDown(event) {
if (!closeOnEsc || event.key !== _utils.Key.ESCAPE && event.key !== _utils.Key.ESC) {
return;
}
event.stopPropagation();
onClose();
};
return (// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
_react2.default.createElement("div", _extends({
className: (0, _classnames2.default)('vtex-modal__modal flex flex-column relative bg-white shadow-5 center mv9 br2', _modal2.default.maxHeight100, "" + (size === 'small' ? _modal2.default.smallContent : ''), "" + (size === 'medium' ? _modal2.default.mediumContent : ''), "" + (size === 'large' ? _modal2.default.largeContent : ''), "" + (size === 'auto' ? _modal2.default.autoWidthContent : ''), {
'h-100 h-auto-ns vw-100': responsiveFullScreen,
'vw-90': !responsiveFullScreen
}),
ref: forwardedRef,
onClick: function onClick(e) {
return e.stopPropagation();
},
onKeyDown: handleKeyDown,
"data-testid": "modal__modal",
role: "dialog",
"aria-modal": "true",
"aria-labelledby": props['aria-label'] ? '' : 'vtex-modal__title'
}, props), _react2.default.createElement(_TopBar2.default, {
showCloseIcon: showCloseIcon,
onClose: onClose,
showTopBar: showTopBar,
responsiveFullScreen: responsiveFullScreen
}, title && _react2.default.createElement("div", {
id: "vtex-modal__title",
className: "" + _modal2.default.contents
}, title)), _react2.default.createElement("div", {
className: (0, _classnames2.default)(_modal2.default.maxHeight80Desktop, 't-body flex flex-column flex-shrink-1 flex-grow-1', (_classNames = {}, _classNames[_modal2.default.maxHeight80] = !responsiveFullScreen, _classNames))
}, _react2.default.createElement("div", {
className: (0, _classnames2.default)('ph7 ph8-ns flex-auto overflow-auto', _modal2.default.scrollBar, {
'pb7-ns mb5': !bottomBar,
mb3: bottomBar
})
}, children)), _react2.default.createElement(_BottomBar2.default, {
showBorder: showBottomBarBorder,
responsiveFullScreen: responsiveFullScreen
}, bottomBar))
);
});
var Modal = (0, _react.forwardRef)(function Modal(_ref3, forwardedRef) {
var isOpen = _ref3.isOpen,
children = _ref3.children,
onClose = _ref3.onClose,
title = _ref3.title,
bottomBar = _ref3.bottomBar,
onCloseTransitionFinish = _ref3.onCloseTransitionFinish,
_ref3$closeOnOverlayC = _ref3.closeOnOverlayClick,
closeOnOverlayClick = _ref3$closeOnOverlayC === void 0 ? true : _ref3$closeOnOverlayC,
container = _ref3.container,
_ref3$showCloseIcon = _ref3.showCloseIcon,
showCloseIcon = _ref3$showCloseIcon === void 0 ? true : _ref3$showCloseIcon,
_ref3$closeOnEsc = _ref3.closeOnEsc,
closeOnEsc = _ref3$closeOnEsc === void 0 ? true : _ref3$closeOnEsc,
_ref3$centered = _ref3.centered,
centered = _ref3$centered === void 0 ? true : _ref3$centered,
_ref3$responsiveFullS = _ref3.responsiveFullScreen,
responsiveFullScreen = _ref3$responsiveFullS === void 0 ? false : _ref3$responsiveFullS,
_ref3$size = _ref3.size,
size = _ref3$size === void 0 ? 'medium' : _ref3$size,
_ref3$showTopBar = _ref3.showTopBar,
showTopBar = _ref3$showTopBar === void 0 ? true : _ref3$showTopBar,
_ref3$showBottomBarBo = _ref3.showBottomBarBorder,
showBottomBarBorder = _ref3$showBottomBarBo === void 0 ? true : _ref3$showBottomBarBo,
props = _objectWithoutPropertiesLoose(_ref3, ["isOpen", "children", "onClose", "title", "bottomBar", "onCloseTransitionFinish", "closeOnOverlayClick", "container", "showCloseIcon", "closeOnEsc", "centered", "responsiveFullScreen", "size", "showTopBar", "showBottomBarBorder"]);
return _react2.default.createElement(ModalOverlay, {
isOpen: isOpen,
onClose: onClose,
container: container,
centered: centered,
closeOnOverlayClick: closeOnOverlayClick,
onCloseTransitionFinish: onCloseTransitionFinish
}, _react2.default.createElement(ModalContent, _extends({
title: title,
onClose: onClose,
ref: forwardedRef,
showCloseIcon: showCloseIcon,
size: size,
responsiveFullScreen: responsiveFullScreen,
showTopBar: showTopBar,
bottomBar: bottomBar,
showBottomBarBorder: showBottomBarBorder,
closeOnEsc: closeOnEsc
}, props), children));
});
exports.default = Modal;