@clayui/modal/lib/cjs/useModal.js

ClayModal component

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var useModal_exports = {};
__export(useModal_exports, {
  useModal: () => useModal
});
module.exports = __toCommonJS(useModal_exports);
var import_react = require("react");
var import_types = require("./types");
function delay(fn) {
  return setTimeout(() => {
    fn();
  }, 100);
}
const modalOpenClassName = "modal-open";
function useModal({ defaultOpen = false, onClose } = {}) {
  const [open, setOpen] = (0, import_react.useState)(defaultOpen);
  const [visible, setVisible] = (0, import_react.useState)([false, false]);
  const timerIdRef = (0, import_react.useRef)(null);
  const restoreTriggerRef = (0, import_react.useRef)(null);
  const handleCloseModal = () => {
    document.body.classList.remove(modalOpenClassName);
    setVisible([false, true]);
    timerIdRef.current = delay(() => {
      if (onClose) {
        onClose();
      }
      if (restoreTriggerRef.current) {
        restoreTriggerRef.current.focus();
        restoreTriggerRef.current = null;
      }
      setOpen(false);
      setVisible([false, false]);
    });
  };
  const handleOpenModal = () => {
    document.body.classList.add(modalOpenClassName);
    setOpen(true);
    timerIdRef.current = delay(() => setVisible([true, true]));
  };
  const handleObserverDispatch = (type, payload) => {
    switch (type) {
      case import_types.ObserverType.Close:
        handleCloseModal();
        break;
      case import_types.ObserverType.Open:
        handleOpenModal();
        break;
      case import_types.ObserverType.RestoreFocus:
        restoreTriggerRef.current = payload;
        break;
      default:
        break;
    }
  };
  const onOpenChange = (0, import_react.useCallback)((value) => {
    if (value) {
      handleOpenModal();
    } else {
      handleCloseModal();
    }
  }, []);
  (0, import_react.useEffect)(() => {
    return () => {
      document.body.classList.remove(modalOpenClassName);
      if (timerIdRef.current) {
        clearTimeout(timerIdRef.current);
      }
    };
  }, []);
  return {
    observer: {
      dispatch: handleObserverDispatch,
      mutation: visible
    },
    onClose: handleCloseModal,
    onOpenChange,
    open
  };
}