@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
62 lines (61 loc) • 3.15 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Button = _interopRequireDefault(require("../../../Button"));
var _consts = _interopRequireDefault(require("../../../hooks/useFocusTrap/consts"));
var _useLockScrolling = _interopRequireDefault(require("../../../hooks/useLockScrolling"));
const DialogContent = ({
dataTest,
shown,
lockScrolling = true,
labelClose,
dialogId,
children,
onClose
}) => {
const overlay = React.useRef(null);
const dialog = React.useRef(null);
(0, _useLockScrolling.default)(dialog, lockScrolling);
const handleClickOutside = React.useCallback(ev => {
ev.stopPropagation();
if (ev.target === overlay.current) {
onClose(ev);
}
}, [onClose]);
const handleInnerClick = React.useCallback(ev => {
if (dialog.current) {
const focusableElements = dialog.current.querySelectorAll(_consts.default);
if (Object.values(focusableElements).some(v => v === ev.target)) {
onClose(ev);
}
}
}, [onClose]);
return /*#__PURE__*/React.createElement("div", {
className: "w-full",
role: "dialog",
id: dialogId,
"data-test": dataTest
}, /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("fixed inset-0 z-[10011] h-full w-full bg-[rgba(23,27,30,0.6)]", "[transition:opacity_theme(transitionDuration.normal)_ease-in-out,_visibility_theme(transitionDuration.fast)_linear]", shown ? "visible opacity-100" : "duration-normal invisible opacity-0"),
ref: overlay,
onClick: handleClickOutside
}), /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("bg-ink-dark shadow-raised-reverse p-md bottom-md inset-x-md fixed z-[10012] box-border max-h-[calc(100%-theme(spacing.xl))] w-[calc(100%-theme(spacing.xl))] overflow-y-scroll rounded-[12px]", "[transition:transform_theme(transitionDuration.normal)_ease-in-out,_visibility_theme(transitionDuration.fast)_linear]", "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_img]:max-w-full", shown ? "visible translate-y-0 opacity-100" : "duration-normal invisible translate-y-[calc(100%+theme(spacing.md))] opacity-0"),
ref: dialog,
role: "tooltip",
"aria-hidden": !shown,
onClick: handleInnerClick
}, /*#__PURE__*/React.createElement("div", {
className: "font-base text-normal text-white-normal mb-md [&_.orbit-text]:text-normal [&_.orbit-list-item]:text-normal [&_.orbit-text]:text-white-normal [&_.orbit-list-item]:text-white-normal [&_.orbit-text-link]:text-white-normal font-normal leading-normal [&_.orbit-list-item]:font-normal [&_.orbit-text]:font-normal"
}, children), /*#__PURE__*/React.createElement(_Button.default, {
type: "secondary",
fullWidth: true,
onClick: onClose
}, labelClose)));
};
var _default = DialogContent;
exports.default = _default;