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

ClayModal component

import { useCallback, useEffect, useRef, useState } from "react";
import { ObserverType } from "./types";
function delay(fn) {
  return setTimeout(() => {
    fn();
  }, 100);
}
const modalOpenClassName = "modal-open";
function useModal({ defaultOpen = false, onClose } = {}) {
  const [open, setOpen] = useState(defaultOpen);
  const [visible, setVisible] = useState([false, false]);
  const timerIdRef = useRef(null);
  const restoreTriggerRef = 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 ObserverType.Close:
        handleCloseModal();
        break;
      case ObserverType.Open:
        handleOpenModal();
        break;
      case ObserverType.RestoreFocus:
        restoreTriggerRef.current = payload;
        break;
      default:
        break;
    }
  };
  const onOpenChange = useCallback((value) => {
    if (value) {
      handleOpenModal();
    } else {
      handleCloseModal();
    }
  }, []);
  useEffect(() => {
    return () => {
      document.body.classList.remove(modalOpenClassName);
      if (timerIdRef.current) {
        clearTimeout(timerIdRef.current);
      }
    };
  }, []);
  return {
    observer: {
      dispatch: handleObserverDispatch,
      mutation: visible
    },
    onClose: handleCloseModal,
    onOpenChange,
    open
  };
}
export {
  useModal
};