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

ClayShared component

/**
 * SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */

import { useMemo, useRef } from 'react';
// Handles pointer hover interactions for an element.
// Adapted from https://github.com/adobe/react-spectrum/blob/0182ad0748bcdddf7eb010540c453f9a35a7c753/packages/%40react-aria/interactions/src/useHover.ts
export function useHover(_ref) {
  let {
    disabled,
    onHover
  } = _ref;
  const state = useRef({
    isEmulatedMouseEvents: false,
    isHovered: false,
    pointerType: undefined,
    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 = undefined;
      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]);
}