@clayui/shared/lib/cjs/useInteractOutside.js

ClayShared 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 useInteractOutside_exports = {};
__export(useInteractOutside_exports, {
  useInteractOutside: () => useInteractOutside
});
module.exports = __toCommonJS(useInteractOutside_exports);
var import_react = require("react");
function useInteractOutside({
  isDisabled = false,
  onInteract,
  onInteractStart,
  ref,
  triggerRef
}) {
  const stateRef = (0, import_react.useRef)({
    ignoreEmulatedMouseEvents: false,
    isPointerDown: false,
    onInteract
  });
  const state = stateRef.current;
  state.onInteract = onInteract;
  (0, import_react.useEffect)(() => {
    if (isDisabled) {
      return;
    }
    const onPointerDown = (event) => {
      if (isValidEvent(event, ref, triggerRef) && state.onInteract) {
        if (onInteractStart) {
          onInteractStart(event);
        }
        state.isPointerDown = true;
      }
    };
    const onBlur = (event) => {
      if (state.onInteract && event.view === void 0) {
        state.onInteract(event);
      }
    };
    if (typeof PointerEvent !== "undefined") {
      const onPointerUp = (event) => {
        if (state.isPointerDown && state.onInteract && isValidEvent(event, ref, triggerRef)) {
          state.isPointerDown = false;
          state.onInteract(event);
        }
      };
      document.addEventListener("pointerdown", onPointerDown, true);
      document.addEventListener("pointerup", onPointerUp, true);
      window.addEventListener("blur", onBlur, true);
      return () => {
        document.removeEventListener(
          "pointerdown",
          onPointerDown,
          true
        );
        document.removeEventListener("pointerup", onPointerUp, true);
        window.removeEventListener("blur", onBlur, true);
      };
    } else {
      const onMouseUp = (event) => {
        if (state.ignoreEmulatedMouseEvents) {
          state.ignoreEmulatedMouseEvents = false;
        } else if (state.isPointerDown && state.onInteract && isValidEvent(event, ref, triggerRef)) {
          state.isPointerDown = false;
          state.onInteract(event);
        }
      };
      const onTouchEnd = (event) => {
        state.ignoreEmulatedMouseEvents = true;
        if (state.onInteract && state.isPointerDown && isValidEvent(event, ref, triggerRef)) {
          state.isPointerDown = false;
          state.onInteract(event);
        }
      };
      document.addEventListener("mousedown", onPointerDown, true);
      document.addEventListener("mouseup", onMouseUp, true);
      document.addEventListener("touchstart", onPointerDown, true);
      document.addEventListener("touchend", onTouchEnd, true);
      window.addEventListener("blur", onBlur, true);
      return () => {
        document.removeEventListener("mousedown", onPointerDown, true);
        document.removeEventListener("mouseup", onMouseUp, true);
        document.removeEventListener("touchstart", onPointerDown, true);
        document.removeEventListener("touchend", onTouchEnd, true);
        window.removeEventListener("blur", onBlur, true);
      };
    }
  }, [ref, state, isDisabled]);
}
function isValidEvent(event, ref, trigger) {
  if (event.button > 0) {
    return false;
  }
  if (event.target) {
    const ownerDocument = event.target.ownerDocument;
    if (!ownerDocument || !ownerDocument.documentElement.contains(event.target)) {
      return false;
    }
  }
  if (trigger.current && trigger.current.contains(event.target)) {
    return false;
  }
  return ref.current && !ref.current.contains(event.target);
}