@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/Modals/ModalContainer.js

@@ -1,130 +1,185 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import ReactModal from 'react-modal';
-import { BOXSHADOWS } from '../styles';
-import { Z_INDEXES } from '../styles';
-var ModalContainerStyles = {
-    content: {
-        top: 'auto',
-        left: 'auto',
-        right: 'auto',
-        bottom: 'auto',
-        marginRight: '-50%',
-        width: '640px',
-        height: '320px',
-        borderRadius: '8px',
-        boxSizing: 'border-box',
-        margin: 0,
-        overflow: 'auto',
-        boxShadow: BOXSHADOWS.BOXSHADOW_L3,
-    },
-};
-//override modal classes to define the animations
-var modalTransitions = "\n\n@keyframes modalOpenAnimation {\n  from{\n    transform: scale(1.1, 1.1);\n  }\n  to {\n    transform: scale(1, 1);\n  }\n}\n\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ".concat(Z_INDEXES.backdrop, ";\n  display:flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ").concat(Z_INDEXES.modal, ";\n  opacity:0;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  animation: modalOpenAnimation 150ms ease-in-out;\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n");
-var ModalContainer = /** @class */ (function (_super) {
-    __extends(ModalContainer, _super);
-    function ModalContainer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ModalContainer.prototype.componentDidMount = function () {
-        if (ReactModal.defaultStyles.overlay) {
-            ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
-        }
-        //append style node to override modal transition classes
-        if (!document.querySelector('[modal-custom-styling="active"]')) {
-            var head = document.head || document.getElementsByTagName('head')[0];
-            var style = document.createElement('style');
-            style.setAttribute('modal-custom-styling', 'active');
-            head.appendChild(style);
-            style.appendChild(document.createTextNode(modalTransitions));
-        }
-        if (this.props.showModal) {
-            this.preventScroll(window.scrollY);
-        }
-    };
-    ModalContainer.prototype.getSnapshotBeforeUpdate = function (prevProps, prevState) {
-        return { scroll: window.scrollY };
-    };
-    ModalContainer.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
-        if (this.props.showModal && !prevProps.showModal) {
-            this.preventScroll(snapshot.scroll);
-        }
-        if (!this.props.showModal && prevProps.showModal) {
-            this.resetScroll();
-        }
-    };
-    ModalContainer.prototype.componentWillUnmount = function () {
-        if (this.props.showModal) {
-            this.resetScroll();
-        }
-    };
-    ModalContainer.prototype.render = function () {
-        var _a = this.props, id = _a.id, showModal = _a.showModal, closeModal = _a.closeModal, children = _a.children, _b = _a.height, height = _b === void 0 ? 'auto' : _b, _c = _a.width, width = _c === void 0 ? 'auto' : _c, _d = _a.overflow, overflow = _d === void 0 ? 'visible' : _d, padding = _a.padding, _e = _a.minWidth, minWidth = _e === void 0 ? '' : _e, _f = _a.maxWidth, maxWidth = _f === void 0 ? '' : _f, _g = _a.zIndex, zIndex = _g === void 0 ? parseInt(Z_INDEXES.modal) : _g;
-        // should be at least z-index of modal and below z-index of toast
-        var zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
-        var stylesConfiguration = Object.assign(__assign({}, ModalContainerStyles.content), {
-            height: height,
-            width: width,
-            padding: padding,
-            overflow: overflow,
-            minWidth: minWidth,
-            maxWidth: maxWidth,
-            zIndex: zIndexValue
-        });
-        var styles = { content: stylesConfiguration };
-        return (React.createElement(ReactModal, { id: id, isOpen: showModal, closeTimeoutMS: 120, onRequestClose: function () { return closeModal(); }, style: styles, appElement: document.getElementById('root') || undefined }, children));
-    };
-    ModalContainer.prototype.preventScroll = function (offset) {
-        if (!ModalContainer.openInstances) {
-            this.setState({ scroll: offset });
-            document.body.style.position = 'fixed';
-            document.body.style.left = "0px";
-            document.body.style.right = "0px";
-            document.body.style.top = "-".concat(offset, "px");
-        }
-        ModalContainer.openInstances++;
-    };
-    ModalContainer.prototype.resetScroll = function () {
-        ModalContainer.openInstances--;
-        if (!ModalContainer.openInstances) {
-            //@ts-ignore
-            document.body.style.position = null;
-            //@ts-ignore
-            document.body.style.left = null;
-            //@ts-ignore
-            document.body.style.top = null;
-            //@ts-ignore
-            document.body.style.right = null;
-            this.state.scroll && window.scrollTo(0, this.state.scroll);
-            this.setState({ scroll: 0 });
-        }
-    };
-    ModalContainer.openInstances = 0;
-    return ModalContainer;
-}(React.Component));
-export default ModalContainer;
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+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";
+import _pt from "prop-types";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import * as React from 'react';
+import ReactModal from 'react-modal';
+import { BOXSHADOWS } from '../styles';
+import { Z_INDEXES } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ModalContainerStyles = {
+  content: {
+    top: 'auto',
+    left: 'auto',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    width: '640px',
+    height: '320px',
+    borderRadius: '8px',
+    boxSizing: 'border-box',
+    margin: 0,
+    overflow: 'auto',
+    boxShadow: BOXSHADOWS.BOXSHADOW_L3
+  }
+};
+
+//override modal classes to define the animations
+var modalTransitions = "\n\n@keyframes modalOpenAnimation {\n  from{\n    transform: scale(1.1, 1.1);\n  }\n  to {\n    transform: scale(1, 1);\n  }\n}\n\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ".concat(Z_INDEXES.backdrop, ";\n  display:flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ").concat(Z_INDEXES.modal, ";\n  opacity:0;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  animation: modalOpenAnimation 150ms ease-in-out;\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n");
+var ModalContainer = /*#__PURE__*/function (_React$Component) {
+  _inherits(ModalContainer, _React$Component);
+  var _super = _createSuper(ModalContainer);
+  function ModalContainer() {
+    _classCallCheck(this, ModalContainer);
+    return _super.apply(this, arguments);
+  }
+  _createClass(ModalContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (ReactModal.defaultStyles.overlay) {
+        ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
+      }
+
+      //append style node to override modal transition classes
+      if (!document.querySelector('[modal-custom-styling="active"]')) {
+        var head = document.head || document.getElementsByTagName('head')[0];
+        var style = document.createElement('style');
+        style.setAttribute('modal-custom-styling', 'active');
+        head.appendChild(style);
+        style.appendChild(document.createTextNode(modalTransitions));
+      }
+      if (this.props.showModal) {
+        this.preventScroll(window.scrollY);
+      }
+    }
+  }, {
+    key: "getSnapshotBeforeUpdate",
+    value: function getSnapshotBeforeUpdate(prevProps, prevState) {
+      return {
+        scroll: window.scrollY
+      };
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState, snapshot) {
+      if (this.props.showModal && !prevProps.showModal) {
+        this.preventScroll(snapshot.scroll);
+      }
+      if (!this.props.showModal && prevProps.showModal) {
+        this.resetScroll();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.props.showModal) {
+        this.resetScroll();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        id = _this$props.id,
+        showModal = _this$props.showModal,
+        closeModal = _this$props.closeModal,
+        children = _this$props.children,
+        _this$props$height = _this$props.height,
+        height = _this$props$height === void 0 ? 'auto' : _this$props$height,
+        _this$props$width = _this$props.width,
+        width = _this$props$width === void 0 ? 'auto' : _this$props$width,
+        _this$props$overflow = _this$props.overflow,
+        overflow = _this$props$overflow === void 0 ? 'visible' : _this$props$overflow,
+        padding = _this$props.padding,
+        _this$props$minWidth = _this$props.minWidth,
+        minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
+        _this$props$maxWidth = _this$props.maxWidth,
+        maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth,
+        _this$props$zIndex = _this$props.zIndex,
+        zIndex = _this$props$zIndex === void 0 ? parseInt(Z_INDEXES.modal) : _this$props$zIndex;
+
+      // should be at least z-index of modal and below z-index of toast
+      var zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
+      var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
+        height: height,
+        width: width,
+        padding: padding,
+        overflow: overflow,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        zIndex: zIndexValue
+      });
+      var styles = {
+        content: stylesConfiguration
+      };
+      return /*#__PURE__*/_jsx(ReactModal, {
+        id: id,
+        isOpen: showModal,
+        closeTimeoutMS: 120,
+        onRequestClose: function onRequestClose() {
+          return closeModal();
+        },
+        style: styles,
+        appElement: document.getElementById('root') || undefined,
+        children: children
+      });
+    }
+  }, {
+    key: "preventScroll",
+    value: function preventScroll(offset) {
+      if (!ModalContainer.openInstances) {
+        this.setState({
+          scroll: offset
+        });
+        document.body.style.position = 'fixed';
+        document.body.style.left = "0px";
+        document.body.style.right = "0px";
+        document.body.style.top = "-".concat(offset, "px");
+      }
+      ModalContainer.openInstances++;
+    }
+  }, {
+    key: "resetScroll",
+    value: function resetScroll() {
+      ModalContainer.openInstances--;
+      if (!ModalContainer.openInstances) {
+        //@ts-ignore
+        document.body.style.position = null;
+        //@ts-ignore
+        document.body.style.left = null;
+        //@ts-ignore
+        document.body.style.top = null;
+        //@ts-ignore
+        document.body.style.right = null;
+        this.state.scroll && window.scrollTo(0, this.state.scroll);
+        this.setState({
+          scroll: 0
+        });
+      }
+    }
+  }]);
+  return ModalContainer;
+}(React.Component);
+_defineProperty(ModalContainer, "propTypes", {
+  id: _pt.string,
+  showModal: _pt.bool.isRequired,
+  closeModal: _pt.func.isRequired,
+  children: _pt.any.isRequired,
+  height: _pt.any,
+  width: _pt.any,
+  overflow: _pt.string,
+  padding: _pt.string,
+  minWidth: _pt.string,
+  maxWidth: _pt.string,
+  zIndex: _pt.number
+});
+_defineProperty(ModalContainer, "openInstances", 0);
+export default ModalContainer;
+//# sourceMappingURL=ModalContainer.js.map