ht_hooks/lib/useClickAway/index.js

ht React 业务 Hooks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = useClickAway;
var _useLatest = _interopRequireDefault(require("../useLatest"));
var _domTarget = require("../utils/domTarget");
var _getDocumentOrShadow = _interopRequireDefault(require("../utils/getDocumentOrShadow"));
var _useEffectWithTarget = _interopRequireDefault(require("../utils/useEffectWithTarget"));
function useClickAway(onClickAway,
//一个回调函数，点击目标外部时会调用这个函数。
target,
//指定目标元素，可以是一个或多个元素。当用户点击这些元素时，不会触发 onClickAway 回调。
eventName) {
  if (eventName === void 0) {
    eventName = 'click';
  }
  var onClickAwayRef = (0, _useLatest["default"])(onClickAway);
  (0, _useEffectWithTarget["default"])(function () {
    var handler = function handler(event) {
      var targets = Array.isArray(target) ? target : [target]; //将目标元素转换为数组
      if (targets.some(function (item) {
        var targetElement = (0, _domTarget.getTargetElement)(item); // 获取目标元素转换为实际DOM（设定的点击不触发的元素）
        // @ts-ignore
        return !targetElement || targetElement.contains(event.target); //#如果没设置目标元素或者点击事件发生在目标元素内部，则不应该触发 onClickAway 回调，返回 true
      })) {
        return;
      }
      onClickAwayRef.current(event); //#否则点击事件发生在目标元素外部，则执行回调函数
    };
    var documentOrShadow = (0, _getDocumentOrShadow["default"])(target);
    var eventNames = Array.isArray(eventName) ? eventName : [eventName];
    eventNames.forEach(function (event) {
      return documentOrShadow.addEventListener(event, handler);
    });
    return function () {
      eventNames.forEach(function (event) {
        return documentOrShadow.removeEventListener(event, handler);
      });
    };
  }, Array.isArray(eventName) ? eventName : [eventName], target);
}