@orca-fe/hooks/lib/usePassThroughEvents.d.ts

React Hooks Collections

import type React from 'react';
type EventAttributes = Required<Omit<React.DOMAttributes<HTMLElement>, 'children' | 'dangerouslySetInnerHTML'>>;
/**
 * 事件透传
 * 返回一个包含事件名的对象，用于监听组件的事件，但不影响事件向上抛出
 * 当你在编写组件时，你可能使用属性透传的方式将你的根组件的属性暴露到外部
 * 但如果你监听了根组件的某个事件，你就不得不在你的事件函数中，再将事件向外抛出
 * 使用本 hooks 可以无感实现这一逻辑
 * 示例：
 * const events = usePassThroughEvents(props, 'onMouseDown', () => {'balabala'});
 * // events will be: { onMouseDown: () => {'balabala'} }
 * <div {...events} />
 *
 * @param props 组件的全部属性
 * @param eventName 监听的事件名称
 * @param listener 事件处理函数
 * @param localReturn 是否直接 return 本函数的返回值
 */
export default function usePassThroughEvents<E extends keyof EventAttributes, P extends Record<string, any>>(props: P, eventName: E | string, listener: (...args: Parameters<Required<EventAttributes>[E]>) => // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
boolean | void, localReturn?: boolean): Pick<Record<string, Required<Omit<React.DOMAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML">>[E]>, E>;
export {};