Utility Functions

/**
 * Generates page title based on route and settings
 * @param props - Page title generation configuration
 * @param ignoreTitle - Whether to ignore the title setting
 * @returns Generated page title string
 */
function getPageTitle(props: GetPageTitleProps, ignoreTitle?: boolean): string;

interface GetPageTitleProps {
  /** Current pathname */
  pathname?: string;
  
  /** Breadcrumb mapping from path to menu data */
  breadcrumb?: Record<string, MenuDataItem>;
  
  /** Menu data array */
  menu?: MenuDataItem[];
  
  /** Layout title */
  title?: string;
  
  /** Current page name */
  pageName?: string;
  
  /** Breadcrumb list */
  breadcrumbList?: { title: string }[];
  
  /** Format message function for internationalization */
  formatMessage?: (descriptor: { id: string; defaultMessage?: string }) => string;
}

import { getPageTitle } from "@ant-design/pro-layout";
import type { MenuDataItem } from "@ant-design/pro-layout";

// Basic page title generation
function BasicTitleExample() {
  const menuData: MenuDataItem[] = [
    { path: '/dashboard', name: 'Dashboard' },
    { path: '/users', name: 'User Management' },
    { path: '/users/profile', name: 'User Profile' },
  ];
  
  const breadcrumb = {
    '/dashboard': { name: 'Dashboard', path: '/dashboard' },
    '/users': { name: 'User Management', path: '/users' },
    '/users/profile': { name: 'User Profile', path: '/users/profile' },
  };
  
  const title = getPageTitle({
    pathname: '/users/profile',
    breadcrumb,
    menu: menuData,
    title: 'Admin Panel',
  });
  
  console.log(title); // "User Profile - Admin Panel"
}

// Title generation with custom page name
function CustomPageNameExample() {
  const title = getPageTitle({
    pathname: '/custom-page',
    pageName: 'Custom Page Title',
    title: 'My App',
  });
  
  console.log(title); // "Custom Page Title - My App"
}

// Title generation ignoring layout title
function IgnoreTitleExample() {
  const title = getPageTitle({
    pathname: '/standalone',
    pageName: 'Standalone Page',
    title: 'Main App',
  }, true); // ignoreTitle = true
  
  console.log(title); // "Standalone Page"
}

// Title generation with internationalization
function I18nTitleExample() {
  const formatMessage = (descriptor: { id: string; defaultMessage?: string }) => {
    // Simulate internationalization
    const messages = {
      'menu.dashboard': 'Dashboard',
      'menu.users': 'User Management',
      'app.title': 'Admin System',
    };
    return messages[descriptor.id] || descriptor.defaultMessage || descriptor.id;
  };
  
  const title = getPageTitle({
    pathname: '/dashboard',
    breadcrumb: {
      '/dashboard': { 
        name: 'Dashboard', 
        path: '/dashboard',
        locale: 'menu.dashboard'
      }
    },
    title: 'Admin System',
    formatMessage,
  });
  
  console.log(title); // "Dashboard - Admin System"
}

/**
 * Extracts detailed page title information
 * @param props - Page title information configuration
 * @returns Detailed page title information object
 */
function getPageTitleInfo(props: GetPageTitleProps): PageTitleInfo;

interface PageTitleInfo {
  /** Final page title */
  title: string;
  
  /** Page ID */
  id: string;
  
  /** Page name */
  pageName: string;
  
  /** Breadcrumb chain */
  breadcrumb: MenuDataItem[];
  
  /** Additional metadata */
  [key: string]: any;
}

/**
 * Processes route data into menu structure and breadcrumbs
 * @param routes - Route configuration array
 * @param menu - Menu configuration options
 * @param formatMessage - Internationalization function
 * @param menuDataRender - Custom menu data processor
 * @returns Object containing menu data and breadcrumb mappings
 */
function getMenuData(
  routes: Route[],
  menu?: MenuConfig,
  formatMessage?: (descriptor: MessageDescriptor) => string,
  menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[]
): MenuDataResult;

interface MenuDataResult {
  /** Breadcrumb mapping from path to menu item */
  breadcrumb: Record<string, MenuDataItem>;
  
  /** Breadcrumb Map instance */
  breadcrumbMap: Map<string, MenuDataItem>;
  
  /** Processed menu data array */
  menuData: MenuDataItem[];
}

interface MenuConfig {
  /** Locale configuration */
  locale?: boolean;
  
  /** Auto close menu */
  autoClose?: boolean;
  
  /** Loading state */
  loading?: boolean;
  
  /** Request function for dynamic menus */
  request?: (params: any, defaultMenuData: MenuDataItem[]) => Promise<MenuDataItem[]>;
}

interface MessageDescriptor {
  /** Message ID */
  id: any;
  
  /** Description */
  description?: string;
  
  /** Default message */
  defaultMessage?: string;
}

import { getMenuData } from "@ant-design/pro-layout";
import type { Route } from "@ant-design/pro-layout";

// Basic menu data processing
function BasicMenuProcessing() {
  const routes: Route[] = [
    {
      path: '/dashboard',
      name: 'Dashboard',
      icon: 'DashboardOutlined',
    },
    {
      path: '/users',
      name: 'User Management',
      icon: 'UserOutlined',
      children: [
        { path: '/users/list', name: 'User List' },
        { path: '/users/roles', name: 'Role Management' },
      ],
    },
    {
      path: '/settings',
      name: 'Settings',
      hideInMenu: true, // This will be filtered out
    },
  ];
  
  const { menuData, breadcrumb, breadcrumbMap } = getMenuData(routes);
  
  console.log('Menu items:', menuData.length); // 2 (settings hidden)
  console.log('Breadcrumb paths:', Object.keys(breadcrumb));
  console.log('User list breadcrumb:', breadcrumb['/users/list']);
}

// Menu processing with internationalization
function I18nMenuProcessing() {
  const routes: Route[] = [
    {
      path: '/dashboard',
      name: 'Dashboard',
      locale: 'menu.dashboard',
    },
    {
      path: '/users',
      name: 'Users',
      locale: 'menu.users',
    },
  ];
  
  const formatMessage = (descriptor: MessageDescriptor) => {
    const messages = {
      'menu.dashboard': 'Dashboard',
      'menu.users': 'User Management',
    };
    return messages[descriptor.id] || descriptor.defaultMessage || descriptor.id;
  };
  
  const { menuData } = getMenuData(routes, { locale: true }, formatMessage);
  
  console.log('Localized menu:', menuData);
}

// Menu processing with custom data renderer
function CustomMenuProcessing() {
  const routes: Route[] = [
    { path: '/public', name: 'Public Page', access: 'public' },
    { path: '/admin', name: 'Admin Page', access: 'admin' },
    { path: '/super-admin', name: 'Super Admin', access: 'super-admin' },
  ];
  
  const userRole = 'admin';
  
  const menuDataRender = (menuData: MenuDataItem[]) => {
    // Filter menu items based on user permissions
    return menuData.filter(item => {
      if (!item.access) return true;
      if (item.access === 'public') return true;
      if (item.access === 'admin' && ['admin', 'super-admin'].includes(userRole)) return true;
      if (item.access === 'super-admin' && userRole === 'super-admin') return true;
      return false;
    });
  };
  
  const { menuData } = getMenuData(routes, {}, undefined, menuDataRender);
  
  console.log('Filtered menu for admin:', menuData); // public + admin pages
}

// Dynamic menu processing
async function DynamicMenuProcessing() {
  const staticRoutes: Route[] = [
    { path: '/dashboard', name: 'Dashboard' },
  ];
  
  const menuConfig = {
    request: async (params: any, defaultMenuData: MenuDataItem[]) => {
      // Simulate API call
      const dynamicMenus = await fetch('/api/user-menus').then(r => r.json());
      return [...defaultMenuData, ...dynamicMenus];
    },
  };
  
  const { menuData } = getMenuData(staticRoutes, menuConfig);
  
  console.log('Combined static and dynamic menu:', menuData);
}

/**
 * Generates breadcrumb properties for navigation
 * @param props - Breadcrumb configuration
 * @returns Breadcrumb properties for Ant Design Breadcrumb
 */
function getBreadcrumbProps(props: BreadcrumbProLayoutProps): BreadcrumbProps;

interface BreadcrumbProLayoutProps {
  /** Current pathname */
  pathname?: string;
  
  /** Breadcrumb mapping */
  breadcrumb?: Record<string, MenuDataItem>;
  
  /** Format message function */
  formatMessage?: (descriptor: MessageDescriptor) => string;
  
  /** Custom breadcrumb renderer */
  breadcrumbRender?: (routers: any[], params: any, routes: any[], paths: any[]) => React.ReactNode;
}

/**
 * Path matching utilities for dynamic routes
 */
function pathToRegexp(path: string, keys?: any[], options?: any): RegExp;

function pathMatch(
  options: { sensitive?: boolean; strict?: boolean; end?: boolean }
): (path: string) => (pathname: string) => { params: any; isExact: boolean; path: string; url: string } | null;

/**
 * Transforms route configurations into menu format
 * @param routes - Route configuration array
 * @param locale - Locale configuration
 * @param formatMessage - Internationalization function
 * @returns Transformed menu data
 */
function transformRoute(
  routes: Route[],
  locale?: boolean,
  formatMessage?: (descriptor: MessageDescriptor) => string
): MenuDataItem[];

/**
 * Filters menu data based on visibility and permission rules
 * @param menuData - Menu data to filter
 * @param filterFn - Custom filter function
 * @returns Filtered menu data
 */
function filterMenuData(
  menuData: MenuDataItem[],
  filterFn?: (item: MenuDataItem) => boolean
): MenuDataItem[];

/**
 * Detects browser environment
 * @returns true if running in browser, false in server environment
 */
function isBrowser(): boolean;

/**
 * Finds menu item matching current pathname
 * @param pathname - Current path
 * @param menuData - Menu data array
 * @returns Matched menu item or null
 */
function getMatchMenu(
  pathname: string,
  menuData: MenuDataItem[]
): MenuDataItem | null;

import { useEffect } from "react";
import { getPageTitle } from "@ant-design/pro-layout";

function useDynamicTitle(props: GetPageTitleProps) {
  useEffect(() => {
    const title = getPageTitle(props);
    document.title = title;
  }, [props.pathname, props.pageName, props.title]);
}

import { getMenuData } from "@ant-design/pro-layout";

function usePermissionMenus(routes: Route[], permissions: string[]) {
  return useMemo(() => {
    const menuDataRender = (menuData: MenuDataItem[]) => {
      return menuData.filter(item => 
        !item.permission || permissions.includes(item.permission)
      );
    };
    
    return getMenuData(routes, {}, undefined, menuDataRender);
  }, [routes, permissions]);
}

import { getBreadcrumbProps } from "@ant-design/pro-layout";
import { Breadcrumb } from "antd";

function SmartBreadcrumb({ pathname, breadcrumb, formatMessage }) {
  const breadcrumbProps = getBreadcrumbProps({
    pathname,
    breadcrumb,
    formatMessage,
  });
  
  return <Breadcrumb {...breadcrumbProps} />;
}

import { getMatchMenu } from "@ant-design/pro-layout";

function useActiveMenu(pathname: string, menuData: MenuDataItem[]) {
  return useMemo(() => {
    const matchedMenu = getMatchMenu(pathname, menuData);
    return {
      activeMenu: matchedMenu,
      activeKeys: matchedMenu?.parentKeys || [],
      selectedKeys: [matchedMenu?.key].filter(Boolean),
    };
  }, [pathname, menuData]);
}