juln-hooks/lib/hooks/useFloatHandler.d.ts

juln 自己的 hooks 和 react-help 集合 (已完全支持 tree-shaking)

/// <reference types="react" />
type GetItemOrItem<T> = (() => T) | T;
type ElLick = GetItemOrItem<React.RefObject<HTMLElement> | HTMLElement>;
type UseFloatHandlerOpts = {
    /** handler不使用toggle模式, 点击时只负责打开float */
    disableHandlerToggle?: boolean;
    /** 点击其它dom时, 不关闭float */
    disableBlurClose?: boolean;
    /** 窗口失焦时, 不关闭float */
    disableWindowBlur?: boolean;
};
type UseFloatHandlerReturn = {
    isShow: boolean;
    open: () => void;
    toggle: () => void;
    close: () => void;
};
interface UseFloatHandler {
    ({ handler, float, opts, }: {
        handler: ElLick;
        float: ElLick;
        opts?: UseFloatHandlerOpts | undefined;
    }): UseFloatHandlerReturn;
    simple: (opts?: UseFloatHandlerOpts) => UseFloatHandlerReturn & {
        handlerRef: React.MutableRefObject<any>;
        floatRef: React.MutableRefObject<any>;
    };
}
/**
 * 处理类似于 `打开弹窗的按钮组件`和`弹窗组件` 的关联
 *
 * @example
 * const App = () => {
 *   const handler = useRef<HTMLButtonElement>(null);
 *   const menu = useRef<HTMLDivElement>(null);
 *   const { isShow: menuIsShow, close: closeMenu, toggle } = useFloatHandler({
 *     handler,
 *     float: menu,
 *     opts: {
 *       disableHandlerToggle: false,
 *       disableWindowBlur: false,
 *     },
 *   });
 *   return (
 *     <>
 *       <button ref={handler}>更多操作</button>
 *       {menuIsShow && (
 *         <div ref={menu}>
 *           菜单
 *           <ul>
 *             <li onClick={() => { console.log('添加'); closeMenu(); }}>添加</li>
 *             <li onClick={() => { console.log('删除'); closeMenu(); }}>删除</li>
 *           </ul>
 *         </div>
 *       )}
 *     </>
 *   );
 * };
 */
declare const useFloatHandler: UseFloatHandler;
export default useFloatHandler;