跳到主要内容

useCurrentMenu

长念
长念阅读约 5 分钟2 年前发布9 个月前编辑
© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0

获取当前打开 Tab 对应的菜单信息，可用于动态设置标题与权限集编码。

特性说明​

  • 支持单个或完整信息获取

基本用法​

import { useCurrentMenu } from '@/hooks';

export default () => {
  const { title, name: menuCode } = useCurrentMenu();
  return (
    <PageHeaderWrapper title={title || '菜单列表'} headers={menuCode && <Button />}>
      {/* some elements... */}
    </PageHeaderWrapper>
  );
};

参数​

参数类型说明默认值默认值说明
keystring可选 要获取的具体属性的键值默认为空，返回当前菜单所有信息
depsany[]可选 当前钩子依赖值[]默认不监听任何外部属性的变化

返回值​

  1. 若 key 为空，返回 IMenuType 类型，即菜单所有信息；
  2. 若 key 不为空，返回 IMenuItem 或 string 类型，即具体的值或者 meutItem

源代码​

import { getMenuId, getMenuLeafData, waitMenuDataLoad } from 'utils/utils';
import * as React from 'react';

export type IMenuItem = {
  level: 'organization' | 'site';
  sort: number;
  parentName: string;
  viewCode: string;
  rootNode: boolean;
};
// 菜单类型定义
export type IMenuType = {
  id: string;
  name: string; // 菜单编码
  path: string; // 菜单路径
  title: string; // 菜单名称
  icon?: string;
  menuItem?: IMenuItem;
  parentId: string;
  type: string;
  quickIndex?: string;
  [key: string]: any;
};

export type IReturnType<P> = P extends string ? IMenuItem | string : IMenuType;

// overload declaration
// 无参数 - 返回菜单信息
// 有参数 - 返回菜单指定字段信息
export function useCurrentMenu(): IMenuType;
export function useCurrentMenu(key: string): IMenuItem | string;

// implementation
export function useCurrentMenu(key?: string | undefined, deps?: React.DependencyList | undefined) {
  const [currentMenu, setCurrentMenu] = React.useState<IReturnType<typeof key>>(
    {} as IReturnType<typeof key>
  );
  const menuId = getMenuId();

  React.useEffect(() => {
    (async () => {
      await waitMenuDataLoad();
      const menuData = getMenuLeafData();

      const currentMenu = menuData.find((item) => item.id === menuId);
      setCurrentMenu(key ? currentMenu?.[key] : currentMenu ?? {});
    })();
  }, [...(deps ?? []), menuId]);

  return currentMenu;
}

更新日志​

alpha​

2024-04-15

  • 🍋 为菜单定义 TS 类型 (仅有限属性)；
  • 🎉 增加签名，根据参数类型匹配返回类型；

2023-12-24

  • 🎉 新增 useCurrentMenu；