@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.
111 lines (110 loc) • 3.97 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import useFocusTrap from "../hooks/useFocusTrap";
import Portal from "../Portal";
import useTheme from "../hooks/useTheme";
import Heading from "../Heading";
import Text from "../Text";
import Stack from "../Stack";
import useLockScrolling from "../hooks/useLockScrolling";
import KEY_CODE_MAP from "../common/keyMaps";
import useClickOutside from "../hooks/useClickOutside";
import useRandomId from "../hooks/useRandomId";
const ActionButtonWrapper = ({
children
}) => {
return /*#__PURE__*/React.createElement("div", {
className: "lm:w-auto lm:[&>button]:flex-none lm:[&>button]:w-auto w-full [&>button]:w-full [&>button]:flex-auto"
}, children);
};
const Dialog = ({
dataTest,
id,
title,
description,
primaryAction,
secondaryAction,
onClose,
maxWidth,
renderInPortal = true,
illustration,
lockScrolling = true
}) => {
const wrapperRef = React.useRef(null);
useLockScrolling(wrapperRef, lockScrolling);
const ref = React.useRef(null);
const theme = useTheme();
const [shown, setShown] = React.useState(false);
useFocusTrap(ref);
React.useEffect(() => {
const transitionLength = parseFloat(theme.orbit.durationFast) * 1000;
const timer = setTimeout(() => {
setShown(true);
if (ref.current) {
ref.current.focus();
}
}, transitionLength);
const handleKeyDown = ev => {
if (ev.keyCode === KEY_CODE_MAP.ESC && onClose) {
onClose();
}
};
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
clearTimeout(timer);
};
}, [theme.orbit.durationFast, onClose]);
const handleClose = ev => {
if (ref && ref.current && onClose) {
if (ref.current && !ref.current.contains(ev.target)) onClose();
}
};
useClickOutside(ref, handleClose);
const dialogID = useRandomId();
const descriptionId = useRandomId();
const dialog = /*#__PURE__*/React.createElement("div", {
role: "dialog",
"aria-modal": "true",
"aria-labelledby": dialogID,
"aria-describedby": descriptionId,
ref: wrapperRef,
"data-test": dataTest,
id: id,
className: cx(["font-base", "h-full w-full", "p-md z-overlay box-border overflow-x-hidden bg-[rgba(0,0,0,0.5)]", "fixed inset-0", "duration-fast transition-opacity ease-in-out", "lm:opacity-100 lm:flex lm:items-center lm:justify-center"])
}, /*#__PURE__*/React.createElement("div", {
className: "flex min-h-full items-center"
}, /*#__PURE__*/React.createElement("div", {
id: dialogID,
ref: ref,
style: {
maxWidth
},
className: cx(["shadow-overlay pt-lg px-md pb-md bg-white-normal rounded-dialog-mobile box-border block w-full", shown ? "bottom-0" : "-bottom-full", "lm:min-w-dialog-width lm:p-lg lm:rounded-dialog-desktop"])
}, illustration && /*#__PURE__*/React.createElement("div", {
className: "mb-md lm:text-start text-center"
}, illustration), /*#__PURE__*/React.createElement("div", {
className: "mb-md gap-xs lm:text-start lm:[&>.orbit-text]:text-start flex flex-col text-center [&>.orbit-text]:text-center"
}, title && /*#__PURE__*/React.createElement(Heading, {
type: "title3",
align: "center",
largeMobile: {
align: "start"
}
}, title), description && /*#__PURE__*/React.createElement(Text, {
type: "secondary",
id: descriptionId
}, description)), /*#__PURE__*/React.createElement(Stack, {
direction: "column-reverse",
spacing: "XSmall",
largeMobile: {
direction: "row",
justify: "end"
}
}, secondaryAction && /*#__PURE__*/React.createElement(ActionButtonWrapper, null, secondaryAction), /*#__PURE__*/React.createElement(ActionButtonWrapper, null, primaryAction)))));
return renderInPortal ? /*#__PURE__*/React.createElement(Portal, {
renderInto: "modals"
}, dialog) : dialog;
};
export default Dialog;