rc-hooks/es/useClickAway/index.js

React Hooks Library.

import { useEffect } from 'react';
import { castArray } from 'ut2';
import getRef from '../utils/getRef';
import useLatest from '../useLatest';
/**
 * 管理目标元素外事件的 Hook。
 *
 * @param {Object} ref Dom 节点或 Ref 对象，支持数组。
 * @param {Function} onClickAway 触发事件的函数。
 * @param {string | string[]} [events='click'] 监听事件名称，支持数组。默认 `click`。
 * @example
 * const [count, setCount] = React.useState(0);
 * const ref = React.useRef<HTMLSpanElement>(null);
 *
 * useClickAway(ref, () => {
 *   setCount((c) => c + 1);
 * });
 *
 * return (
 *   <div>
 *     <span ref={ref}>
 *       <button>box</button>
 *     </span>
 *     <p>count: {count}</p>
 *   </div>
 * );
 */
function useClickAway(ref, onClickAway, events) {
    if (events === void 0) { events = 'click'; }
    var refs = castArray(ref);
    var latestRefs = useLatest(refs);
    var refsIsFunc = refs.every(function (item) { return typeof item === 'function'; });
    var wrapperRefs = refsIsFunc ? latestRefs : refs;
    var onClickAwayRef = useLatest(onClickAway);
    var eventsArr = castArray(events);
    var eventsRef = useLatest(eventsArr);
    var eventsStr = eventsArr.join('');
    useEffect(function () {
        var handler = function (event) {
            var _a;
            var targets = refsIsFunc ? wrapperRefs.current : wrapperRefs;
            if (!targets.some(function (targetItem) {
                var target = getRef(targetItem);
                return !target || (target === null || target === void 0 ? void 0 : target.contains(event.target));
            })) {
                (_a = onClickAwayRef.current) === null || _a === void 0 ? void 0 : _a.call(onClickAwayRef, event);
            }
        };
        var eventList = castArray(eventsRef.current);
        eventList.forEach(function (eventName) {
            document.addEventListener(eventName, handler);
        });
        return function () {
            eventList.forEach(function (eventName) {
                document.removeEventListener(eventName, handler);
            });
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [wrapperRefs, refsIsFunc, eventsStr]);
}
export default useClickAway;