@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.
61 lines • 2.19 kB
JavaScript
import * as React from "react";
import useRandomId from "../../hooks/useRandomId";
import useStateWithTimeout from "../../hooks/useStateWithTimeout";
import Portal from "../../Portal";
import { StyledTooltipChildren } from "../TooltipPrimitive";
import DialogContent from "./components/DialogContent";
const MobileDialog = ({
children,
labelClose = "Close",
enabled = true,
onShow,
renderInPortal = true,
tabIndex = 0,
dataTest,
content,
stopPropagation = false,
removeUnderlinedText,
block = false,
lockScrolling
}) => {
const [render, setRender, setRenderWithTimeout, clearRenderTimeout] = useStateWithTimeout(false, 200);
const [shown, setShown, setShownWithTimeout] = useStateWithTimeout(false, 200);
const mobileDialogID = useRandomId();
const handleInMobile = React.useCallback(ev => {
ev.preventDefault();
if (stopPropagation) {
ev.stopPropagation();
}
setRender(true);
if (onShow) onShow();
setShownWithTimeout(true);
clearRenderTimeout();
}, [clearRenderTimeout, setRender, setShownWithTimeout, stopPropagation]);
const handleOutMobile = React.useCallback(ev => {
if (stopPropagation) {
ev.stopPropagation();
}
setShown(false);
setRenderWithTimeout(false);
}, [setRenderWithTimeout, setShown, stopPropagation]);
if (!enabled && children) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
const dialog = /*#__PURE__*/React.createElement(DialogContent, {
dataTest: dataTest,
shown: shown,
labelClose: labelClose,
lockScrolling: lockScrolling,
dialogId: mobileDialogID,
onClose: handleOutMobile
}, content);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
onClick: handleInMobile,
"aria-describedby": enabled ? mobileDialogID : undefined,
tabIndex: enabled ? Number(tabIndex) : undefined,
enabled: enabled,
removeUnderlinedText: removeUnderlinedText,
block: block
}, children), enabled && render && (renderInPortal ? /*#__PURE__*/React.createElement(Portal, {
renderInto: "dialogs"
}, dialog) : dialog));
};
export default MobileDialog;