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

package/dist/Modals/ModalContainer.js

@@ -1,185 +1,130 @@
-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
+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;

package/dist/Modals/ModalContent.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Size } from '../types';
 import { ButtonAction, LeftFooterAction, ModalHeaderButtons } from './ModalTypes';
 import { ImageWithFallbacksProps } from "../Image/ImageWithFallbacks";
-interface ModalContentProps {
+export interface ModalContentProps {
     size?: Size.Small | Size.Medium | Size.Large;
     isModalOpen: boolean;
     closeAction: () => void;