@clayui/shared/lib/esm/useHover.js

ClayShared component

import { useMemo, useRef } from "react";
function useHover({ disabled, onHover }) {
  const state = useRef({
    isEmulatedMouseEvents: false,
    isHovered: false,
    pointerType: void 0,
    target: null
  }).current;
  return useMemo(() => {
    const props = {};
    const onStart = (event, pointerType) => {
      if (disabled || pointerType === "touch" || state.isHovered || !event.currentTarget.contains(event.target)) {
        return;
      }
      state.isHovered = true;
      const target = event.currentTarget;
      state.target = target;
      onHover({
        pointerType,
        target,
        type: "hoverstart"
      });
    };
    const onEnd = (pointerType) => {
      state.pointerType = void 0;
      state.target = null;
      if (pointerType === "touch" || !state.isHovered) {
        return;
      }
      state.isHovered = false;
    };
    if (typeof PointerEvent !== "undefined") {
      props.onPointerEnter = (event) => {
        onStart(event, event.pointerType);
      };
      props.onPointerLeave = (event) => {
        if (!disabled && event.currentTarget.contains(event.target)) {
          onEnd(event.pointerType);
        }
      };
    } else {
      props.onTouchStart = () => {
        state.isEmulatedMouseEvents = true;
      };
      props.onMouseEnter = (event) => {
        if (!state.isEmulatedMouseEvents) {
          onStart(event, "mouse");
        }
        state.isEmulatedMouseEvents = false;
      };
      props.onMouseLeave = (event) => {
        if (!disabled && event.currentTarget.contains(event.target)) {
          onEnd("mouse");
        }
      };
    }
    return props;
  }, [onHover]);
}
export {
  useHover
};