@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.
640 lines (567 loc) • 27.9 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
import * as React from "react";
import styled, { css, withTheme } from "styled-components";
import defaultTheme from "../defaultTheme";
import ButtonLink from "../ButtonLink";
import { StyledButtonPrimitive } from "../primitives/ButtonPrimitive";
import Close from "../icons/Close";
import { SIZES, CLOSE_BUTTON_DATA_TEST } from "./consts";
import FOCUSABLE_ELEMENT_SELECTORS from "../hooks/useFocusTrap/consts";
import KEY_CODE_MAP from "../common/keyMaps";
import media, { getBreakpointWidth } from "../utils/mediaQuery";
import { StyledModalFooter } from "./ModalFooter";
import { MobileHeader, StyledModalHeader, ModalHeading } from "./ModalHeader";
import { StyledModalSection } from "./ModalSection";
import { right } from "../utils/rtl";
import transition from "../utils/transition";
import { ModalContext } from "./ModalContext";
import { QUERIES } from "../utils/mediaQuery/consts";
import randomID from "../utils/randomID";
import useTranslate from "../hooks/useTranslate";
import onlyIE from "../utils/onlyIE";
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), _tokens);
return tokens[size];
};
};
var ModalBody = styled.div.withConfig({
displayName: "Modal__ModalBody",
componentId: "sc-1f0srsl-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;"])));
ModalBody.defaultProps = {
theme: defaultTheme
};
var ModalWrapper = styled.div.withConfig({
displayName: "Modal__ModalWrapper",
componentId: "sc-1f0srsl-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:", ";transition:", ";top:", ";", ";", ";"], function (_ref5) {
var isMobileFullPage = _ref5.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref6) {
var isMobileFullPage = _ref6.isMobileFullPage;
return !isMobileFullPage && "12px";
}, transition(["top"], "normal", "ease-in-out"), function (_ref7) {
var loaded = _ref7.loaded,
isMobileFullPage = _ref7.isMobileFullPage;
return loaded ? !isMobileFullPage && "32px" : "100%";
}, onlyIE(css(["height:1px;"])), media.largeMobile(css(["position:relative;top:0;max-width:", ";align-items:center;"], getSizeToken)));
ModalWrapper.defaultProps = {
theme: defaultTheme
};
var CloseContainer = styled.div.withConfig({
displayName: "Modal__CloseContainer",
componentId: "sc-1f0srsl-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;
});
CloseContainer.defaultProps = {
theme: defaultTheme
};
var ModalWrapperContent = styled.div.withConfig({
displayName: "Modal__ModalWrapperContent",
componentId: "sc-1f0srsl-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 && !!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 && !!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));
});
ModalWrapperContent.defaultProps = {
theme: defaultTheme
};
var ModalCloseButton = function ModalCloseButton(_ref52) {
var onClick = _ref52.onClick,
dataTest = _ref52.dataTest;
var translate = useTranslate();
return /*#__PURE__*/React.createElement(ButtonLink, {
onClick: onClick,
size: "normal",
iconLeft: /*#__PURE__*/React.createElement(Close, null),
dataTest: dataTest,
type: "secondary",
title: translate("button_close")
});
};
export var PureModal = /*#__PURE__*/function (_React$PureComponent) {
_inherits(PureModal, _React$PureComponent);
var _super = _createSuper(PureModal);
function PureModal() {
var _this;
_classCallCheck(this, PureModal);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
scrolled: false,
loaded: false,
fixedClose: false,
fullyScrolled: false,
modalWidth: 0,
footerHeight: 0,
hasModalSection: false
});
_defineProperty(_assertThisInitialized(_this), "modalContent", /*#__PURE__*/React.createRef());
_defineProperty(_assertThisInitialized(_this), "modalBody", /*#__PURE__*/React.createRef());
_defineProperty(_assertThisInitialized(_this), "offset", 40);
_defineProperty(_assertThisInitialized(_this), "focusTriggered", false);
_defineProperty(_assertThisInitialized(_this), "modalID", randomID("modalID"));
_defineProperty(_assertThisInitialized(_this), "clickedModalBody", false);
_defineProperty(_assertThisInitialized(_this), "setScrollPosition", function (value) {
var _window;
var _assertThisInitialize = _assertThisInitialized(_this),
modalContent = _assertThisInitialize.modalContent,
modalBody = _assertThisInitialize.modalBody;
if (((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) >= getBreakpointWidth(QUERIES.LARGEMOBILE, _this.props.theme, true)) {
if (modalBody.current) {
modalBody.current.scrollTop = value;
}
} else if (modalContent.current) {
modalContent.current.scrollTop = value;
}
});
_defineProperty(_assertThisInitialized(_this), "setDimensions", function () {
var content = _this.modalContent.current;
if (content) {
// added in 4.0.3, interpolation of styled component return static className
var footerEl = content.querySelector("".concat(StyledModalFooter));
var headingEl = content.querySelector("".concat(ModalHeading));
_this.offset = (headingEl === null || headingEl === void 0 ? void 0 : headingEl.clientHeight) + (headingEl === null || headingEl === void 0 ? void 0 : headingEl.offsetTop);
var contentDimensions = content.getBoundingClientRect();
var modalWidth = contentDimensions.width;
var footerHeight = footerEl === null || footerEl === void 0 ? void 0 : footerEl.clientHeight;
_this.setState({
modalWidth: modalWidth,
footerHeight: footerHeight
});
}
});
_defineProperty(_assertThisInitialized(_this), "setHasModalSection", function () {
if (!_this.state.hasModalSection) {
_this.setState({
hasModalSection: true
});
}
});
_defineProperty(_assertThisInitialized(_this), "removeHasModalSection", function () {
if (_this.state.hasModalSection) _this.setState({
hasModalSection: false
});
});
_defineProperty(_assertThisInitialized(_this), "decideFixedFooter", function () {
// if the content height is smaller than window height, we need to explicitly set fullyScrolled to true
var content = _this.modalContent.current;
var body = _this.modalBody.current;
var contentHeight = (content === null || content === void 0 ? void 0 : content.scrollHeight) > (content === null || content === void 0 ? void 0 : content.offsetHeight) + 40 ? content === null || content === void 0 ? void 0 : content.offsetHeight : content === null || content === void 0 ? void 0 : content.scrollHeight; // when scrollHeight + topPadding - scrollingElementHeight is smaller or even than window height
var fullyScrolled = contentHeight + 40 - (body === null || body === void 0 ? void 0 : body.scrollTop) <= window.innerHeight;
_this.setState({
fullyScrolled: fullyScrolled
});
});
_defineProperty(_assertThisInitialized(_this), "handleResize", function () {
_this.setDimensions();
_this.decideFixedFooter();
});
_defineProperty(_assertThisInitialized(_this), "resolveAndSetStates", function (target, fullScrollOffset, fixCloseOffset, scrollBegin, mobile) {
var content = _this.modalContent.current;
if (content) {
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;
_this.setState({
scrolled: target.scrollTop >= scrollBegin + (!mobile ? target.scrollTop : 0),
fixedClose: target.scrollTop >= fixCloseOffset,
fullyScrolled: _this.props.fixedFooter && // set fullyScrolled state sooner than the exact end of the scroll (with fullScrollOffset value)
target.scrollTop >= scrollHeight - target.clientHeight - fullScrollOffset
});
}
});
_defineProperty(_assertThisInitialized(_this), "getScrollTopPoint", function (mobile) {
var content = _this.modalContent.current;
if (content) {
var headingEl = content.querySelector("".concat(ModalHeading));
if (headingEl) {
var _headingEl$getBoundin = headingEl.getBoundingClientRect(),
_top = _headingEl$getBoundin.top;
return _top;
}
if (mobile) {
return 40;
}
var _content$getBoundingC2 = content.getBoundingClientRect(),
top = _content$getBoundingC2.top;
return top;
}
return null;
});
_defineProperty(_assertThisInitialized(_this), "handleMobileScroll", function (ev) {
if (ev.target instanceof HTMLDivElement && ev.target === _this.modalContent.current) {
_this.resolveAndSetStates(ev.target, 10, 1, _this.getScrollTopPoint(true), true);
}
});
_defineProperty(_assertThisInitialized(_this), "handleScroll", function (ev) {
if (ev.target instanceof HTMLDivElement && ev.target === _this.modalBody.current) {
_this.resolveAndSetStates(ev.target, 40, 40, _this.getScrollTopPoint());
}
});
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (ev) {
var onClose = _this.props.onClose;
if (onClose && ev.key === "Escape") {
ev.stopPropagation();
onClose(ev);
}
_this.keyboardHandler(ev);
});
_defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (ev) {
var _this$props = _this.props,
onClose = _this$props.onClose,
_this$props$preventOv = _this$props.preventOverlayClose,
preventOverlayClose = _this$props$preventOv === void 0 ? false : _this$props$preventOv;
if (onClose && preventOverlayClose === false && !_this.clickedModalBody && _this.modalContent.current && ev.target instanceof Element && !_this.modalContent.current.contains(ev.target) && /ModalBody|ModalWrapper/.test(ev.target.className)) {
// If is clicked outside of modal
onClose(ev);
}
_this.clickedModalBody = false;
});
_defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () {
/*
This is due to issue where it's was possible to close Modal,
even though click started (onMouseDown) in ModalWrapper.
*/
_this.clickedModalBody = true;
});
_defineProperty(_assertThisInitialized(_this), "keyboardHandler", function (e) {
if (e.keyCode === KEY_CODE_MAP.TAB) {
// Rotate Focus
if (!_this.focusTriggered) {
_this.focusTriggered = true;
_this.manageFocus();
}
if (e.shiftKey && (document.activeElement === _this.firstFocusableEl || document.activeElement === _this.modalBody.current)) {
e.preventDefault();
_this.lastFocusableEl.focus();
} else if (!e.shiftKey && document.activeElement === _this.lastFocusableEl) {
e.preventDefault();
_this.firstFocusableEl.focus();
}
}
});
_defineProperty(_assertThisInitialized(_this), "manageFocus", function () {
if (_this.focusTriggered) {
var focusableElements = _this.modalContent.current.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS);
if (focusableElements.length > 0) {
var firstFocusableEl = focusableElements[0];
var lastFocusableEl = focusableElements[focusableElements.length - 1];
_this.firstFocusableEl = firstFocusableEl;
_this.lastFocusableEl = lastFocusableEl;
}
}
});
_defineProperty(_assertThisInitialized(_this), "callContextFunctions", function () {
if (_this.setDimensions) _this.setDimensions();
if (_this.decideFixedFooter) _this.decideFixedFooter();
if (_this.manageFocus) _this.manageFocus();
});
return _this;
}
_createClass(PureModal, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
this.timeout = setTimeout(function () {
_this2.setState({
loaded: true
});
_this2.decideFixedFooter();
_this2.setDimensions();
_this2.setFirstFocus();
}, 15);
window.addEventListener("resize", this.handleResize);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (this.props.children !== prevProps.children) {
this.decideFixedFooter();
this.setDimensions();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
window.removeEventListener("resize", this.handleResize);
if (this.timeout) {
clearTimeout(this.timeout);
}
}
}, {
key: "setFirstFocus",
value: function setFirstFocus() {
if (this.modalBody.current) this.modalBody.current.focus();
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
onClose = _this$props2.onClose,
children = _this$props2.children,
_this$props2$size = _this$props2.size,
size = _this$props2$size === void 0 ? SIZES.NORMAL : _this$props2$size,
_this$props2$fixedFoo = _this$props2.fixedFooter,
fixedFooter = _this$props2$fixedFoo === void 0 ? false : _this$props2$fixedFoo,
dataTest = _this$props2.dataTest,
_this$props2$isMobile = _this$props2.isMobileFullPage,
isMobileFullPage = _this$props2$isMobile === void 0 ? false : _this$props2$isMobile,
_this$props2$hasClose = _this$props2.hasCloseButton,
hasCloseButton = _this$props2$hasClose === void 0 ? true : _this$props2$hasClose;
var _this$state = this.state,
scrolled = _this$state.scrolled,
loaded = _this$state.loaded,
fixedClose = _this$state.fixedClose,
fullyScrolled = _this$state.fullyScrolled,
modalWidth = _this$state.modalWidth,
footerHeight = _this$state.footerHeight,
hasModalSection = _this$state.hasModalSection;
return /*#__PURE__*/React.createElement(ModalBody, {
tabIndex: "0",
onKeyDown: this.handleKeyDown,
onScroll: this.handleScroll,
onClick: this.handleClickOutside,
"data-test": dataTest,
ref: this.modalBody,
role: "dialog",
"aria-modal": "true",
"aria-labelledby": this.modalID
}, /*#__PURE__*/React.createElement(ModalWrapper, {
size: size,
loaded: loaded,
onScroll: this.handleMobileScroll,
fixedFooter: fixedFooter,
id: this.modalID,
isMobileFullPage: isMobileFullPage
}, /*#__PURE__*/React.createElement(ModalWrapperContent, {
size: size,
fixedFooter: fixedFooter,
scrolled: scrolled,
ref: this.modalContent,
fixedClose: fixedClose,
fullyScrolled: fullyScrolled,
modalWidth: modalWidth,
footerHeight: footerHeight,
hasModalSection: hasModalSection,
isMobileFullPage: isMobileFullPage,
onMouseDown: this.handleMouseDown
}, onClose && hasCloseButton && /*#__PURE__*/React.createElement(CloseContainer, {
modalWidth: modalWidth,
size: size,
scrolled: scrolled,
fixedClose: fixedClose,
isMobileFullPage: isMobileFullPage
}, /*#__PURE__*/React.createElement(ModalCloseButton, {
onClick: onClose,
dataTest: CLOSE_BUTTON_DATA_TEST
})), /*#__PURE__*/React.createElement(ModalContext.Provider, {
value: {
setHasModalSection: this.setHasModalSection,
removeHasModalSection: this.removeHasModalSection,
callContextFunctions: this.callContextFunctions,
hasModalSection: hasModalSection,
isMobileFullPage: isMobileFullPage,
closable: !!onClose,
isInsideModal: true
}
}, children))));
}
}]);
return PureModal;
}(React.PureComponent);
_defineProperty(PureModal, "defaultProps", {
theme: defaultTheme
});
var ThemedModal = withTheme(PureModal);
ThemedModal.displayName = "Modal";
export default ThemedModal;
export { default as ModalHeader } from "./ModalHeader";
export { default as ModalSection } from "./ModalSection";
export { default as ModalFooter } from "./ModalFooter";