@itcase/ui 1.1.10 → 1.1.13

package/dist/cjs/ModalLoader-1f8MYsLV.js

@@ -1,384 +0,0 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactDOM = require('react-dom');
-var clsx = require('clsx');
-var Overlay = require('./Overlay-18bnPZPd.js');
-var useStyles = require('./hooks/useStyles.js');
-var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
-var Loader = require('./Loader-CK9zQAPl.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-const getOrCreateModalElement = (modalQuerySelector, className = '') => {
-  // prettier-ignore
-  const classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
-  let modalElement = document.querySelector(modalQuerySelector);
-  if (!modalElement) {
-    // Add modal element into the DOM on mount.
-    modalElement = document.createElement('div');
-    modalElement.setAttribute('id', 'modal-global');
-    modalElement.classList.add('modal');
-    if (classList.length) {
-      modalElement.classList.add(...classList);
-    }
-    document.body.prepend(modalElement);
-  }
-  return modalElement;
-};
-
-// Modal component that is an abstraction around the portal API.
-const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props, ref) {
-  const {
-    children,
-    className,
-    closeButton,
-    contentClassName,
-    id,
-    isOverlay,
-    overlayClassName,
-    overlayFill,
-    overlayFillGradient,
-    overlayOpacity,
-    isOpen: initialIsOpen,
-    isScrollOnOpen,
-    isSetFocusOnOpen,
-    modalQuerySelector,
-    debug,
-    onCloseModal,
-    onOpenModal
-  } = props;
-
-  // Query DOM element
-  const [modalElement, setModalElement] = React.useState(null);
-  React.useLayoutEffect(() => {
-    const element = getOrCreateModalElement(modalQuerySelector, className);
-    setModalElement(element);
-    if (element) {
-      addModalProps(element);
-    }
-  }, []);
-  const modalContentRef = React.useRef(null);
-  const modalOverlayRef = React.useRef(null);
-  const [isOpen, setIsOpen] = React.useState(initialIsOpen);
-  const addModalProps = React.useCallback(element => {
-    // Change class need in "useEffect"
-    if (isOpen) {
-      // Show modal
-      element.classList.add('modal_state_visible');
-      // Scroll to opened modal
-      if (isScrollOnOpen) {
-        // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
-        element.scrollIntoView({
-          block: 'center',
-          behavior: 'smooth'
-        });
-      }
-
-      // "setTimeout" in this implementation is needs for set focus on modal
-      // after "onMouseDown" event on button
-      if (isSetFocusOnOpen) {
-        setTimeout(() => modalContentRef.current.focus(), 0);
-      }
-    } else if (!element.children.length) {
-      // Hide modal if has no children
-      element.classList.remove('modal_state_visible');
-    }
-  }, [isOpen, isSetFocusOnOpen]);
-  React.useEffect(() => {
-    if (!modalElement) {
-      return;
-    }
-    addModalProps(modalElement);
-  }, [isOpen]); // eslint-disable-line
-
-  // Show modal with children content
-  const openModal = React.useCallback(() => {
-    setIsOpen(true);
-
-    // Callback
-    if (typeof onOpenModal === 'function') {
-      onOpenModal();
-    }
-
-    /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
-      // If current modal is already opened
-      // Move content to end of modal root container. For order in DOM.
-      const modalContentElement = modalContentRef.current
-      if (modalContentElement) {
-        modalContentElement.parentNode.appendChild(modalContentElement)
-      }
-      // Also move overlay to end of modal root container after container
-      const modalOverlayElement = modalOverlayRef.current
-      if (modalOverlayElement) {
-        modalOverlayElement.parentNode.appendChild(modalOverlayElement)
-      }
-    */
-  }, [onOpenModal]);
-
-  // Hide modal and unmount children content
-  const closeModal = React.useCallback((event = {}) => {
-    const hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
-    if (hasRelatedTarget) {
-      return event;
-    }
-    setIsOpen(false);
-
-    // Callback
-    if (typeof onCloseModal === 'function') {
-      onCloseModal();
-    }
-  }, [modalElement, onCloseModal]);
-
-  // Save ref things
-  React.useImperativeHandle(ref, () => ({
-    isOpen,
-    openModal,
-    closeModal,
-    modalElement
-  }));
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-
-  // Collect classes and styles
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'modal-shape_',
-    propsKey: 'shape'
-  });
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'borderType'
-  });
-  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'elevation_',
-    propsKey: 'elevation'
-  });
-  const {
-    styles: modalStyles
-  } = useStyles.useStyles(props);
-
-  // Use a portal to render the children into the element
-  return modalElement && /*#__PURE__*/ReactDOM__default.default.createPortal(
-  // Any valid React child: JSX, strings, arrays, etc.
-  isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('modal-content', contentClassName, fillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass),
-    id: id,
-    ref: modalContentRef,
-    style: modalStyles,
-    tabIndex: 0,
-    onBlur: debug ? undefined : closeModal
-  }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "modal-content__close",
-    onClick: closeModal
-  }, closeButton), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "modal-content__wrapper"
-  }, children)), /*#__PURE__*/React__default.default.createElement(Overlay.Overlay, {
-    className: clsx__default.default('modal__overlay', 'overlay_type_modal', overlayClassName),
-    fill: overlayFill,
-    fillGradient: overlayFillGradient,
-    isOverlay: isOverlay,
-    opacity: overlayOpacity,
-    ref: modalOverlayRef
-  })) : null,
-  // A DOM element
-  modalElement);
-});
-Modal.propTypes = {
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  closeIcon: PropTypes__default.default.string,
-  closeText: PropTypes__default.default.string,
-  contentClassName: PropTypes__default.default.string,
-  debug: PropTypes__default.default.bool,
-  overlayFill: PropTypes__default.default.string,
-  overlayFillGradient: PropTypes__default.default.string,
-  overlayOpacity: PropTypes__default.default.string,
-  id: PropTypes__default.default.string,
-  isOverlay: PropTypes__default.default.bool,
-  isScrollOnOpen: PropTypes__default.default.bool,
-  isSetFocusOnOpen: PropTypes__default.default.bool,
-  modalQuerySelector: PropTypes__default.default.string,
-  onCloseModal: PropTypes__default.default.func,
-  onOpenModal: PropTypes__default.default.func
-};
-Modal.defaultProps = {
-  isOverlay: true,
-  isOpen: false,
-  isScrollOnOpen: true,
-  isSetFocusOnOpen: true,
-  modalQuerySelector: '#modal-global'
-};
-Modal.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Modal",
-  "props": {
-    "isOverlay": {
-      "defaultValue": {
-        "value": "true",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "isOpen": {
-      "defaultValue": {
-        "value": "false",
-        "computed": false
-      },
-      "required": false
-    },
-    "isScrollOnOpen": {
-      "defaultValue": {
-        "value": "true",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "isSetFocusOnOpen": {
-      "defaultValue": {
-        "value": "true",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "modalQuerySelector": {
-      "defaultValue": {
-        "value": "'#modal-global'",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "className": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "closeIcon": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "closeText": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "contentClassName": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "debug": {
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "overlayFill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "overlayFillGradient": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "overlayOpacity": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "id": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "onCloseModal": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    },
-    "onOpenModal": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    }
-  }
-};
-
-function ModalLoader(props) {
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: "modal-loading"
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "modal-loading__inner"
-  }, /*#__PURE__*/React__default.default.createElement(Loader.Loader, null)));
-}
-ModalLoader.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "ModalLoader"
-};
-
-exports.Modal = Modal;
-exports.ModalLoader = ModalLoader;