@orca-fe/hooks/lib/usePassThroughEvents.js

React Hooks Collections

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = usePassThroughEvents;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _useMemorizedFn = _interopRequireDefault(require("./useMemorizedFn"));
/**
 * 事件透传
 * 返回一个包含事件名的对象，用于监听组件的事件，但不影响事件向上抛出
 * 当你在编写组件时，你可能使用属性透传的方式将你的根组件的属性暴露到外部
 * 但如果你监听了根组件的某个事件，你就不得不在你的事件函数中，再将事件向外抛出
 * 使用本 hooks 可以无感实现这一逻辑
 * 示例：
 * const events = usePassThroughEvents(props, 'onMouseDown', () => {'balabala'});
 * // events will be: { onMouseDown: () => {'balabala'} }
 * <div {...events} />
 *
 * @param props 组件的全部属性
 * @param eventName 监听的事件名称
 * @param listener 事件处理函数
 * @param localReturn 是否直接 return 本函数的返回值
 */
function usePassThroughEvents(props, eventName, listener) {
  var localReturn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  var persistListener = (0, _useMemorizedFn.default)(function (ev) {
    // @ts-expect-error
    var res = listener.call(this, ev);
    if (props != null && typeof props[eventName] === 'function') {
      if (!localReturn) return props[eventName](ev);
    }
    return res;
  });
  return (0, _defineProperty2.default)({}, eventName, persistListener);
}