@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.
634 lines (570 loc) • 27.4 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from "react";
import styled, { css } from "styled-components";
import { ModalContext } from "./ModalContext";
import { MobileHeader, StyledModalHeader, ModalHeading } from "./ModalHeader";
import { StyledModalFooter } from "./ModalFooter";
import { StyledModalSection } from "./ModalSection";
import ModalCloseButton from "./ModalCloseButton";
import { SIZES, CLOSE_BUTTON_DATA_TEST } from "./consts";
import KEY_CODE_MAP from "../common/keyMaps";
import defaultTheme from "../defaultTheme";
import { StyledButtonPrimitive } from "../primitives/ButtonPrimitive";
import media, { getBreakpointWidth } from "../utils/mediaQuery";
import { QUERIES } from "../utils/mediaQuery/consts";
import { right } from "../utils/rtl";
import transition from "../utils/transition";
import useRandomId from "../hooks/useRandomId";
import onlyIE from "../utils/onlyIE";
import useMediaQuery from "../hooks/useMediaQuery";
import FOCUSABLE_ELEMENT_SELECTORS from "../hooks/useFocusTrap/consts";
import usePrevious from "../hooks/usePrevious";
import useLockScrolling from "../hooks/useLockScrolling";
var getSizeToken = function getSizeToken() {
return function (_ref) {
var _tokens;
var size = _ref.size,
theme = _ref.theme;
var tokens = (_tokens = {}, _defineProperty(_tokens, SIZES.EXTRASMALL, "360px"), _defineProperty(_tokens, SIZES.SMALL, theme.orbit.widthModalSmall), _defineProperty(_tokens, SIZES.NORMAL, theme.orbit.widthModalNormal), _defineProperty(_tokens, SIZES.LARGE, theme.orbit.widthModalLarge), _defineProperty(_tokens, SIZES.EXTRALARGE, theme.orbit.widthModalExtraLarge), _tokens);
return tokens[size];
};
};
var ModalBody = styled.div.withConfig({
displayName: "Modal__ModalBody",
componentId: "sc-15ie1vv-0"
})(["width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:", ";box-sizing:border-box;outline:none;overflow-x:hidden;background-color:rgba(0,0,0,0.5);font-family:", ";-webkit-overflow-scrolling:auto;", ";", ";"], function (_ref2) {
var theme = _ref2.theme;
return theme.orbit.zIndexModalOverlay;
}, function (_ref3) {
var theme = _ref3.theme;
return theme.orbit.fontFamily;
}, media.largeMobile(css(["overflow-y:auto;padding:", ";"], function (_ref4) {
var theme = _ref4.theme;
return theme.orbit.spaceXXLarge;
})), onlyIE(css(["position:-ms-page;"]))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
ModalBody.defaultProps = {
theme: defaultTheme
};
var ModalWrapper = styled.div.withConfig({
displayName: "Modal__ModalWrapper",
componentId: "sc-15ie1vv-1"
})(["box-sizing:border-box;min-height:100%;display:flex;align-items:flex-start;margin:0 auto;position:fixed;width:100%;border-top-left-radius:", ";border-top-right-radius:", ";", " ", ";", ";"], function (_ref5) {
var isMobileFullPage = _ref5.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref6) {
var isMobileFullPage = _ref6.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref7) {
var disableAnimation = _ref7.disableAnimation,
loaded = _ref7.loaded,
isMobileFullPage = _ref7.isMobileFullPage;
return disableAnimation ? css(["top:", ";"], !isMobileFullPage && "32px") : css(["transition:", ";top:", ";"], transition(["top"], "normal", "ease-in-out"), loaded ? !isMobileFullPage && "32px" : "100%");
}, onlyIE(css(["height:1px;"])), media.largeMobile(css(["position:relative;top:0;max-width:", ";align-items:center;"], getSizeToken))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
ModalWrapper.defaultProps = {
theme: defaultTheme
};
var CloseContainer = styled.div.withConfig({
displayName: "Modal__CloseContainer",
componentId: "sc-15ie1vv-2"
})(["display:flex;", ";position:", ";top:", ";right:0;z-index:800;justify-content:flex-end;align-items:center;box-sizing:border-box;height:52px;width:100%;max-width:", ";box-shadow:", ";background-color:", ";border-top-left-radius:", ";border-top-right-radius:", ";transition:", ";pointer-events:none;", ";& + ", ":first-of-type{padding-top:52px;border-top:0;margin:0;}", "{pointer-events:auto;margin-", ":", ";& svg{transition:", ";color:", ";}&:hover svg{color:", ";}&:active svg{color:", ";}}"], function (_ref8) {
var scrolled = _ref8.scrolled,
fixedClose = _ref8.fixedClose,
theme = _ref8.theme;
return fixedClose || scrolled ? css(["position:fixed;", ";"], onlyIE(css(["position:-ms-page;"]), "(max-width:".concat(+getBreakpointWidth(QUERIES.LARGEMOBILE, theme, true) - 1, "px)"))) : css(["position:absolute;"]);
}, function (_ref9) {
var scrolled = _ref9.scrolled,
fixedClose = _ref9.fixedClose;
return fixedClose || scrolled ? "fixed" : "absolute";
}, function (_ref10) {
var scrolled = _ref10.scrolled,
fixedClose = _ref10.fixedClose,
isMobileFullPage = _ref10.isMobileFullPage;
return !isMobileFullPage && (fixedClose || scrolled) ? "32px" : "0";
}, function (_ref11) {
var modalWidth = _ref11.modalWidth;
return modalWidth ? "".concat(modalWidth, "px") : getSizeToken;
}, function (_ref12) {
var scrolled = _ref12.scrolled,
theme = _ref12.theme;
return scrolled && theme.orbit.boxShadowFixed;
}, function (_ref13) {
var theme = _ref13.theme,
scrolled = _ref13.scrolled;
return scrolled && theme.orbit.paletteWhite;
}, function (_ref14) {
var isMobileFullPage = _ref14.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref15) {
var isMobileFullPage = _ref15.isMobileFullPage;
return !isMobileFullPage && "12px";
}, transition(["box-shadow", "background-color"], "fast", "ease-in-out"), media.largeMobile(css(["top:", ";right:", ";border-radius:0;"], function (_ref16) {
var scrolled = _ref16.scrolled,
fixedClose = _ref16.fixedClose;
return (fixedClose || scrolled) && "0";
}, function (_ref17) {
var scrolled = _ref17.scrolled,
fixedClose = _ref17.fixedClose;
return (fixedClose || scrolled) && "auto";
})), StyledModalSection, StyledButtonPrimitive, right, function (_ref18) {
var theme = _ref18.theme;
return theme.orbit.spaceXXSmall;
}, transition(["color"], "fast", "ease-in-out"), function (_ref19) {
var theme = _ref19.theme;
return theme.orbit.paletteInkLight;
}, function (_ref20) {
var theme = _ref20.theme;
return theme.orbit.paletteInkLightHover;
}, function (_ref21) {
var theme = _ref21.theme;
return theme.orbit.paletteInkLightActive;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
CloseContainer.defaultProps = {
theme: defaultTheme
};
var ModalWrapperContent = styled.div.withConfig({
displayName: "Modal__ModalWrapperContent",
componentId: "sc-15ie1vv-3"
})(["position:absolute;box-sizing:border-box;border-top-left-radius:", ";border-top-right-radius:", ";background-color:", ";font-family:", ";width:100%;", ";bottom:", ";box-shadow:", ";overflow-y:auto;overflow-x:hidden;", ";", "{top:", ";opacity:", ";visibility:", ";transition:", ";", "}", "{margin-bottom:", ";}", ";", ";", ";"], function (_ref22) {
var isMobileFullPage = _ref22.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref23) {
var isMobileFullPage = _ref23.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref24) {
var theme = _ref24.theme;
return theme.orbit.backgroundModal;
}, function (_ref25) {
var theme = _ref25.theme;
return theme.orbit.fontFamily;
}, function (_ref26) {
var theme = _ref26.theme,
fixedFooter = _ref26.fixedFooter,
footerHeight = _ref26.footerHeight,
isMobileFullPage = _ref26.isMobileFullPage;
return isMobileFullPage ? css(["max-height:100%;top:0;"]) : css(["max-height:calc( 100% - ", " - ", " );"], theme.orbit.spaceXLarge, "".concat(fixedFooter && Boolean(footerHeight) ? footerHeight : 0, "px"));
}, function (_ref27) {
var fixedFooter = _ref27.fixedFooter,
footerHeight = _ref27.footerHeight,
isMobileFullPage = _ref27.isMobileFullPage,
theme = _ref27.theme;
return "".concat((!isMobileFullPage ? parseInt(theme.orbit.spaceXLarge, 10) : 0) + (fixedFooter && Boolean(footerHeight) ? footerHeight : 0), "px");
}, function (_ref28) {
var theme = _ref28.theme;
return theme.orbit.boxShadowOverlay;
}, function (_ref29) {
var fixedFooter = _ref29.fixedFooter,
theme = _ref29.theme,
footerHeight = _ref29.footerHeight,
fullyScrolled = _ref29.fullyScrolled;
return fixedFooter && footerHeight && css(["", "{bottom:0;padding:", ";box-shadow:", ";position:fixed;transition:", ";}", ":last-of-type{padding-bottom:", ";margin-bottom:0;}"], StyledModalFooter, theme.orbit.spaceMedium, fullyScrolled ? "inset 0 1px 0 ".concat(theme.orbit.paletteCloudNormal, ", ").concat(theme.orbit.boxShadowFixedReverse) : "inset 0 0 0 transparent, ".concat(theme.orbit.boxShadowFixedReverse), transition(["box-shadow"], "fast", "ease-in-out"), StyledModalSection, theme.orbit.spaceLarge);
}, MobileHeader, function (_ref30) {
var scrolled = _ref30.scrolled,
theme = _ref30.theme,
isMobileFullPage = _ref30.isMobileFullPage;
return !isMobileFullPage && scrolled && theme.orbit.spaceXLarge;
}, function (_ref31) {
var scrolled = _ref31.scrolled;
return scrolled && "1";
}, function (_ref32) {
var scrolled = _ref32.scrolled;
return scrolled && "visible";
}, function (_ref33) {
var scrolled = _ref33.scrolled;
return scrolled && css(["", ",", ""], transition(["top"], "normal", "ease-in-out"), transition(["opacity", "visibility"], "fast", "ease-in-out"));
}, function (_ref34) {
var scrolled = _ref34.scrolled;
return scrolled && onlyIE(css(["", "{position:-ms-page;}"], MobileHeader));
}, StyledModalHeader, function (_ref35) {
var hasModalSection = _ref35.hasModalSection,
theme = _ref35.theme;
return !hasModalSection && theme.orbit.spaceXLarge;
}, media.largeMobile(css(["position:relative;bottom:auto;border-radius:", ";padding-bottom:0;height:auto;overflow:visible;max-height:100%;", ":last-of-type{padding-bottom:", ";margin-bottom:", ";&::after{content:none;}}", "{margin-bottom:", ";}", "{padding:", ";max-width:", ";position:", ";box-shadow:", ";}", "{top:", ";width:", ";}"], function (_ref36) {
var isMobileFullPage = _ref36.isMobileFullPage;
return !isMobileFullPage && "9px";
}, StyledModalSection, function (_ref37) {
var theme = _ref37.theme;
return theme.orbit.spaceXXLarge;
}, function (_ref38) {
var fixedFooter = _ref38.fixedFooter,
footerHeight = _ref38.footerHeight;
return fixedFooter ? "".concat(footerHeight, "px") : "0";
}, StyledModalHeader, function (_ref39) {
var hasModalSection = _ref39.hasModalSection,
fixedFooter = _ref39.fixedFooter,
footerHeight = _ref39.footerHeight;
return !hasModalSection && fixedFooter ? "".concat(footerHeight, "px") : "0";
}, StyledModalFooter, function (_ref40) {
var theme = _ref40.theme,
fixedFooter = _ref40.fixedFooter;
return fixedFooter ? "".concat(theme.orbit.spaceXLarge, " ").concat(theme.orbit.spaceXXLarge, "!important") : theme.orbit.spaceXXLarge;
}, function (_ref41) {
var modalWidth = _ref41.modalWidth;
return modalWidth ? "".concat(modalWidth, "px") : getSizeToken;
}, function (_ref42) {
var fullyScrolled = _ref42.fullyScrolled,
fixedFooter = _ref42.fixedFooter;
return fixedFooter && fullyScrolled && "absolute";
}, function (_ref43) {
var fullyScrolled = _ref43.fullyScrolled;
return fullyScrolled && "none";
}, MobileHeader, function (_ref44) {
var scrolled = _ref44.scrolled,
theme = _ref44.theme;
return scrolled ? "0" : "-".concat(theme.orbit.spaceXXLarge);
}, function (_ref45) {
var modalWidth = _ref45.modalWidth,
theme = _ref45.theme;
return "calc(".concat(modalWidth, "px - 48px - ").concat(theme.orbit.spaceXXLarge, ")");
})), onlyIE(css(["", "{position:", ";}"], StyledModalFooter, function (_ref46) {
var fixedFooter = _ref46.fixedFooter;
return fixedFooter && "-ms-page";
})), function (_ref47) {
var theme = _ref47.theme;
return onlyIE(css(["", "{position:", ";box-shadow:", ";}", ";"], StyledModalFooter, function (_ref48) {
var fullyScrolled = _ref48.fullyScrolled,
fixedFooter = _ref48.fixedFooter;
return fullyScrolled && fixedFooter && "static" || fixedFooter && "fixed";
}, function (_ref49) {
var fixedFooter = _ref49.fixedFooter;
return !fixedFooter && "inset 0 0 0 1px ".concat(theme.orbit.paletteWhite);
}, function (_ref50) {
var fullyScrolled = _ref50.fullyScrolled,
fixedFooter = _ref50.fixedFooter;
return fullyScrolled && fixedFooter && css(["", ":last-of-type{margin-bottom:0;}", "{margin-bottom:", ";}"], StyledModalSection, StyledModalHeader, function (_ref51) {
var hasModalSection = _ref51.hasModalSection;
return !hasModalSection && "0";
});
}), getBreakpointWidth(QUERIES.LARGEMOBILE, theme));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
ModalWrapperContent.defaultProps = {
theme: defaultTheme
};
var OFFSET = 40;
var Modal = /*#__PURE__*/React.forwardRef(function (_ref52, ref) {
var _ref52$size = _ref52.size,
size = _ref52$size === void 0 ? SIZES.NORMAL : _ref52$size,
scrollingElementRef = _ref52.scrollingElementRef,
children = _ref52.children,
onClose = _ref52.onClose,
_ref52$autoFocus = _ref52.autoFocus,
autoFocus = _ref52$autoFocus === void 0 ? true : _ref52$autoFocus,
_ref52$fixedFooter = _ref52.fixedFooter,
fixedFooter = _ref52$fixedFooter === void 0 ? false : _ref52$fixedFooter,
_ref52$isMobileFullPa = _ref52.isMobileFullPage,
isMobileFullPage = _ref52$isMobileFullPa === void 0 ? false : _ref52$isMobileFullPa,
_ref52$preventOverlay = _ref52.preventOverlayClose,
preventOverlayClose = _ref52$preventOverlay === void 0 ? false : _ref52$preventOverlay,
_ref52$hasCloseButton = _ref52.hasCloseButton,
hasCloseButton = _ref52$hasCloseButton === void 0 ? true : _ref52$hasCloseButton,
_ref52$mobileHeader = _ref52.mobileHeader,
mobileHeader = _ref52$mobileHeader === void 0 ? true : _ref52$mobileHeader,
_ref52$disableAnimati = _ref52.disableAnimation,
disableAnimation = _ref52$disableAnimati === void 0 ? false : _ref52$disableAnimati,
dataTest = _ref52.dataTest,
_ref52$lockScrolling = _ref52.lockScrolling,
lockScrolling = _ref52$lockScrolling === void 0 ? true : _ref52$lockScrolling;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
loaded = _React$useState2[0],
setLoaded = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
scrolled = _React$useState4[0],
setScrolled = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
fullyScrolled = _React$useState6[0],
setFullyScrolled = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
hasModalTitle = _React$useState8[0],
setHasModalTitle = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
hasModalSection = _React$useState10[0],
_setHasModalSection = _React$useState10[1];
var _React$useState11 = React.useState(false),
_React$useState12 = _slicedToArray(_React$useState11, 2),
clickedModalBody = _React$useState12[0],
setClickedModalBody = _React$useState12[1];
var _React$useState13 = React.useState(false),
_React$useState14 = _slicedToArray(_React$useState13, 2),
fixedClose = _React$useState14[0],
setFixedClose = _React$useState14[1];
var _React$useState15 = React.useState(false),
_React$useState16 = _slicedToArray(_React$useState15, 2),
focusTriggered = _React$useState16[0],
setFocusTriggered = _React$useState16[1];
var _React$useState17 = React.useState(0),
_React$useState18 = _slicedToArray(_React$useState17, 2),
modalWidth = _React$useState18[0],
setModalWidth = _React$useState18[1];
var _React$useState19 = React.useState(0),
_React$useState20 = _slicedToArray(_React$useState19, 2),
footerHeight = _React$useState20[0],
setFooterHeight = _React$useState20[1];
var _React$useState21 = React.useState(null),
_React$useState22 = _slicedToArray(_React$useState21, 2),
firstFocusableEl = _React$useState22[0],
setFirstFocusableEl = _React$useState22[1];
var _React$useState23 = React.useState(null),
_React$useState24 = _slicedToArray(_React$useState23, 2),
lastFocusableEl = _React$useState24[0],
setLastFocusableEl = _React$useState24[1];
var modalContent = React.useRef(null);
var modalBody = React.useRef(null);
var modalTitleID = useRandomId();
var _useMediaQuery = useMediaQuery(),
isLargeMobile = _useMediaQuery.isLargeMobile;
var scrollingElement = React.useRef(null);
var setScrollingElementRefs = React.useCallback(function (node) {
scrollingElement.current = node;
if (scrollingElementRef) {
if (typeof scrollingElementRef === "function") {
scrollingElementRef(node);
} else {
// eslint-disable-next-line no-param-reassign
scrollingElementRef.current = node;
}
}
}, [scrollingElementRef]);
useLockScrolling(scrollingElement, lockScrolling, [isLargeMobile]);
var modalContentRef = React.useCallback(function (node) {
modalContent.current = node;
if (!isLargeMobile) setScrollingElementRefs(node);
}, [isLargeMobile, setScrollingElementRefs]);
var modalBodyRef = React.useCallback(function (node) {
modalBody.current = node;
if (isLargeMobile) setScrollingElementRefs(node);
}, [isLargeMobile, setScrollingElementRefs]);
var prevChildren = usePrevious(children);
var setDimensions = function setDimensions() {
var content = modalContent.current;
if (!content) return; // added in 4.0.3, interpolation of styled component return static className
// $FlowFixMe
var footerEl = content.querySelector("".concat(StyledModalFooter));
var contentDimensions = content.getBoundingClientRect();
setModalWidth(contentDimensions.width);
if (footerEl !== null && footerEl !== void 0 && footerEl.clientHeight) {
setFooterHeight(footerEl.clientHeight);
}
};
var setFirstFocus = function setFirstFocus() {
if (modalBody.current && autoFocus) {
modalBody.current.focus();
}
};
var decideFixedFooter = function decideFixedFooter() {
if (!modalContent.current || !modalBody.current) return; // if the content height is smaller than window height, we need to explicitly set fullyScrolled to true
var content = modalContent.current;
var body = modalBody.current;
var contentHeight = content.scrollHeight > content.offsetHeight + OFFSET ? content.offsetHeight : content.scrollHeight; // when scrollHeight + topPadding - scrollingElementHeight is smaller than or equal to window height
setFullyScrolled(contentHeight + OFFSET - body.scrollTop <= window.innerHeight);
};
var manageFocus = function manageFocus() {
if (!focusTriggered || !modalContent.current) return;
var focusableElements = modalContent.current.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS);
if (focusableElements.length > 0) {
setFirstFocusableEl(focusableElements[0]);
setLastFocusableEl(focusableElements[focusableElements.length - 1]);
}
};
var keyboardHandler = function keyboardHandler(event) {
if (event.keyCode !== KEY_CODE_MAP.TAB) return;
if (!focusTriggered) {
setFocusTriggered(true);
manageFocus();
}
if (event.shiftKey && (document.activeElement === firstFocusableEl || document.activeElement === modalBody.current)) {
event.preventDefault();
lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
} else if (!event.shiftKey && document.activeElement === lastFocusableEl) {
event.preventDefault();
firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
}
};
var handleKeyDown = function handleKeyDown(event) {
if (onClose && event.key === "Escape") {
event.stopPropagation();
onClose(event);
}
keyboardHandler(event);
};
var handleClickOutside = function handleClickOutside(event) {
var clickedOutside = onClose && preventOverlayClose === false && !clickedModalBody && modalContent.current && event.target instanceof Element && !modalContent.current.contains(event.target) && /ModalBody|ModalWrapper/.test(event.target.className);
if (clickedOutside && onClose) {
onClose(event);
}
setClickedModalBody(false);
};
var setScrollStates = function setScrollStates(target, fullScrollOffset, fixCloseOffset, scrollBegin, mobile) {
var content = modalContent.current;
if (!content) return;
var _content$getBoundingC = content.getBoundingClientRect(),
contentHeight = _content$getBoundingC.height;
/*
Only for desktop, we need to check if the scrollHeight of content is bigger than actual height
if so, we need to you use the contentHeight + padding as bottom scroll point,
otherwise actual scrollHeight of the target is enough.
*/
var scrollHeight = !mobile && target.scrollHeight > contentHeight + 80 ? contentHeight + 80 : target.scrollHeight; // $FlowFixMe
setScrolled(target.scrollTop >= scrollBegin + (!mobile ? target.scrollTop : 0));
setFixedClose(target.scrollTop >= fixCloseOffset); // set fullyScrolled state sooner than the exact end of the scroll (with fullScrollOffset value)
setFullyScrolled(fixedFooter && target.scrollTop >= scrollHeight - target.clientHeight - fullScrollOffset);
};
var getScrollTopPoint = function getScrollTopPoint(mobile) {
var content = modalContent.current;
if (!content) return null; // $FlowFixMe
var headingEl = content.querySelector("".concat(ModalHeading));
if (headingEl) {
var _headingEl$getBoundin = headingEl.getBoundingClientRect(),
_top = _headingEl$getBoundin.top;
return _top;
}
if (mobile) return OFFSET;
var _content$getBoundingC2 = content.getBoundingClientRect(),
top = _content$getBoundingC2.top;
return top;
};
var handleScroll = function handleScroll(event) {
if (event.target instanceof HTMLDivElement && event.target === modalBody.current) {
setScrollStates(event.target, OFFSET, OFFSET, getScrollTopPoint());
}
};
var handleMobileScroll = function handleMobileScroll(event) {
if (event.target instanceof HTMLDivElement && event.target === modalContent.current) {
setScrollStates(event.target, 10, 1, getScrollTopPoint(true), true);
}
};
var handleMouseDown = function handleMouseDown() {
/*
This is due to issue where it was possible to close Modal,
even though click started (onMouseDown) in ModalWrapper.
*/
setClickedModalBody(true);
};
var callContextFunctions = function callContextFunctions() {
setDimensions();
decideFixedFooter();
manageFocus();
};
var getScrollPosition = function getScrollPosition() {
if (scrollingElement.current) {
return scrollingElement.current.scrollTop;
}
return null;
};
var setScrollPosition = function setScrollPosition(value) {
if (scrollingElement.current) {
scrollingElement.current.scrollTop = value;
}
};
React.useImperativeHandle(ref, function () {
return {
getScrollPosition: getScrollPosition,
setScrollPosition: setScrollPosition,
modalBody: modalBody,
modalContent: modalContent
};
}); // eslint-disable-next-line consistent-return
React.useEffect(function () {
if (disableAnimation) {
decideFixedFooter();
setDimensions();
setFirstFocus();
} else {
var timer = setTimeout(function () {
setLoaded(true);
decideFixedFooter();
setDimensions();
setFirstFocus();
}, 15);
return function () {
clearTimeout(timer);
};
} // the Modal can only transition in on mount
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(function () {
var handleResize = function handleResize() {
setDimensions();
decideFixedFooter();
};
window.addEventListener("resize", handleResize);
return function () {
window.removeEventListener("resize", handleResize);
};
}, []);
React.useEffect(function () {
if (children !== prevChildren) {
decideFixedFooter();
setDimensions();
}
}, [children, prevChildren]);
var hasCloseContainer = mobileHeader && (hasModalTitle || onClose && hasCloseButton);
return /*#__PURE__*/React.createElement(ModalBody, {
tabIndex: "0",
onKeyDown: handleKeyDown,
onScroll: handleScroll,
onClick: handleClickOutside,
"data-test": dataTest,
ref: modalBodyRef,
role: "dialog",
autoFocus: autoFocus,
"aria-modal": "true",
"aria-labelledby": hasModalTitle ? modalTitleID : null
}, /*#__PURE__*/React.createElement(ModalWrapper, {
size: size,
loaded: loaded,
onScroll: handleMobileScroll,
fixedFooter: fixedFooter,
isMobileFullPage: isMobileFullPage,
disableAnimation: disableAnimation
}, /*#__PURE__*/React.createElement(ModalWrapperContent, {
size: size,
fixedFooter: fixedFooter,
scrolled: scrolled,
ref: modalContentRef,
fixedClose: fixedClose,
fullyScrolled: fullyScrolled,
modalWidth: modalWidth,
footerHeight: footerHeight,
hasModalSection: hasModalSection,
isMobileFullPage: isMobileFullPage,
onMouseDown: handleMouseDown
}, hasCloseContainer && /*#__PURE__*/React.createElement(CloseContainer, {
"data-test": "CloseContainer",
modalWidth: modalWidth,
size: size,
scrolled: scrolled,
fixedClose: fixedClose,
isMobileFullPage: isMobileFullPage
}, onClose && hasCloseButton && /*#__PURE__*/React.createElement(ModalCloseButton, {
onClick: onClose,
dataTest: CLOSE_BUTTON_DATA_TEST
})), /*#__PURE__*/React.createElement(ModalContext.Provider, {
value: {
setHasModalTitle: setHasModalTitle,
setHasModalSection: function setHasModalSection() {
return _setHasModalSection(true);
},
removeHasModalSection: function removeHasModalSection() {
return _setHasModalSection(false);
},
callContextFunctions: callContextFunctions,
setFooterHeight: setFooterHeight,
hasModalSection: hasModalSection,
hasMobileHeader: mobileHeader,
isMobileFullPage: isMobileFullPage,
closable: Boolean(onClose),
isInsideModal: true,
titleID: modalTitleID
}
}, children))));
});
Modal.displayName = "Modal";
export default Modal;
export { default as ModalHeader } from "./ModalHeader";
export { default as ModalSection } from "./ModalSection";
export { default as ModalFooter } from "./ModalFooter";