@ant-design/pro-layout

const BasicLayout: React.FC<BasicLayoutProps>;

const DefaultFooter: React.FC<FooterProps>;

const FooterToolbar: React.FC<FooterToolbarProps>;

const GridContent: React.FC<GridContentProps>;

const PageContainer: React.FC<PageContainerProps>;

const PageHeaderWrapper: any;

const PageLoading: React.FC<any>;

const ProBreadcrumb: React.FC<BreadcrumbProps>;

const ProPageHeader: React.FC<
    {
        title?: any;
        content?: React.ReactNode;
        extraContent?: React.ReactNode;
        prefixCls?: string;
        footer?: ReactNode[];
        ghost?: boolean;
        header?: any;
        pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
        affixProps?: Omit<AffixProps, 'children'>;
        loading?: any;
        breadcrumbRender?: any;
        waterMarkProps?: WaterMarkProps;
        breadcrumb?: BreadcrumbProps;
        children?: React.ReactNode;
    } & PageHeaderTabConfig &
        Omit<
            PageHeaderProps,
            'title' | 'footer' | 'breadcrumbRender' | 'breadcrumb'
        > & { prefixedClassName: string }
>;

const RouteContext: React.Context<RouteContextType>;

const SettingDrawer: React.FC<SettingDrawerProps>;

const TopNavHeader: React.FC<TopNavHeaderProps>;

const WaterMark: React.FC<WaterMarkProps>;

getMenuData: (
    routes: Readonly<Route[]>,
    menu?: { locale?: boolean | undefined } | undefined,
    formatMessage?: (message: MessageDescriptor) => string,
    menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[]
) => {
    breadcrumb: Record<string, MenuDataItem>;
    breadcrumbMap: Map<string, MenuDataItem>;
    menuData: MenuDataItem[];
};

getPageTitle: (
    props: GetPageTitleProps,
    ignoreTitle?: boolean | undefined
) => string;

type BasicLayoutProps = GlobalTypes & {
    /**
     * @name 简约模式，设置了之后不渲染的任何 layout 的东西，但是会有 context，可以获取到当前菜单。
     *
     * @example pure={true}
     */
    pure?: boolean;
    /**
     * @name logo 的配置，可以配置url，React 组件 和 false
     *
     * @example 设置 logo 为网络地址  logo="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
     * @example 设置 logo 为组件  logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/>}
     * @example 设置 logo 为 false 不显示 logo  logo={false}
     * @example 设置 logo 为 方法  logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
     * */
    logo?:
        | React.ReactNode
        | JSX.Element
        | WithFalse<() => React.ReactNode | JSX.Element>;
    /**
     * @name 页面切换的时候触发
     *
     * @example 获取切换的页面地址 onPageChange={(location) => { console.log("切换到："+location.pathname) }}
     *
     * */
    onPageChange?: (location?: RouterTypes<Route>['location']) => void;
    /**
     * @name layout 的 loading 效果，设置完成之后只展示一个 loading
     *
     * @example loading={true}
     */
    loading?: boolean;
    /**
     * @name layout
     *
     * @description "zh-CN" | "zh-TW" | "en-US" | "it-IT" | "ko-KR"
     * @example 中文 layout="zh-CN"
     * @example 英文 layout="en-US"
     */
    locale?: LocaleType;
    /**
     * @name 是否收起 layout 是严格受控的，可以 设置为 true，一直收起
     *
     * @example collapsed={true}
     */
    collapsed?: boolean;
    /**
     * @name 收起和展开的时候触发事件
     *
     * @example onCollapse=(collapsed)=>{ setCollapsed(collapsed) };
     */
    onCollapse?: (collapsed: boolean) => void;
    /**
     * @name 页脚的配置
     *
     * @example 不展示dom footerRender={false}
     * @example 使用 layout 的  DefaultFooter   footerRender={() => (<DefaultFooter copyright="这是一条测试文案"/>}
     */
    footerRender?: WithFalse<
        (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
    >;
    /**
     * @name 设置 PageHeader 的面包屑，只能处理数据
     *
     * @example 手动设置 breadcrumbRender={(routers = []) => [ { path: '/', breadcrumbName: '主页'} ]
     * @example 增加一项 breadcrumbRender={(routers = []) => { return [{ path: '/', breadcrumbName: '主页'} ,...routers ]}
     * @example 删除首页 breadcrumbRender={(routers = []) => { return routers.filter(item => item.path !== '/')}
     * @example 不显示面包屑 breadcrumbRender={false}
     */
    breadcrumbRender?: WithFalse<
        (routers: AntdBreadcrumbProps['routes']) => AntdBreadcrumbProps['routes']
    >;
    /**
     * @name 设置页面的标题
     * @example 根据页面的路由设置标题 pageTitleRender={(props) => { return props.location.pathname }}
     * @example 不显示标题 pageTitleRender={false}
     * @example 根据默认的标题设置 pageTitleRender={(props,defaultPageTitle) => { return defaultPageTitle + '这是一个测试标题' }}
     * @example 根据 info 来自己组合标题 pageTitleRender={(props,defaultPageTitle,info) => { return info.title + "-" + info.pageName }
     */
    pageTitleRender?: WithFalse<
        (
            props: GetPageTitleProps,
            defaultPageTitle?: string,
            info?: {
                title: string;
                id: string;
                pageName: string;
            }
        ) => string
    >;
    /**
     * @name 处理 menuData 的数据，可以动态的控制数据
     * @see 尽量不要用异步数据来处理，否则可能造成更新不及时，如果异步数据推荐使用 menu.request 和 params。
     *
     * @example 删除一些菜单 menuDataRender=((menuData) => { return menuData.filter(item => item.name !== 'test') })
     * @example 增加一些菜单 menuDataRender={(menuData) => { return menuData.concat({ path: '/test', name: '测试', icon: 'smile' }) }}
     * @example 修改菜单 menuDataRender={(menuData) => { return menuData.map(item => { if (item.name === 'test') { item.name = '测试' } return item }) }}
     * @example 打平数据 menuDataRender={(menuData) => { return menuData.reduce((pre, item) => { return pre.concat(item.children || []) }, []) }}
     */
    menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[];
    /**
     * @name 处理每个面包屑的配置，需要直接返回 dom
     * @description (route: Route, params: any, routes: Array<Route>, paths: Array<string>) => React.ReactNode
     *
     * @example 设置 disabled： itemRender={(route, params, routes, paths) => { return <Button disabled>{route.breadcrumbName}</Button> }}
     * @example 拼接 path： itemRender={(route, params, routes, paths) => { return <a href={paths.join('/')}>{route.breadcrumbName}</Button> }}
     */
    itemRender?: AntdBreadcrumbProps['itemRender'];
    formatMessage?: (message: MessageDescriptor) => string;
    /** @name 是否禁用移动端模式
     *
     * @see 有的管理系统不需要移动端模式，此属性设置为true即可
     * @example disableMobile={true}
     *  */
    disableMobile?: boolean;
    /**
     * content 的样式
     *
     * @example 背景颜色为红色 contentStyle={{ backgroundColor: 'red '}}
     */
    contentStyle?: CSSProperties;
    className?: string;
    /**
     * @name 取消 content的 margin
     *
     * @example 取消内容的 margin  disableContentMargin={true}
     * */
    disableContentMargin?: boolean;
    /** PageHeader 的 BreadcrumbProps 配置，会透传下去 */
    breadcrumbProps?: AntdBreadcrumbProps & LayoutBreadcrumbProps;
    /** @name 水印的相关配置 */
    waterMarkProps?: WaterMarkProps;
    /**
     * @name 操作菜单重新刷新
     *
     * @example  重新获取菜单 actionRef.current.reload();
     * */
    actionRef?: React.MutableRefObject<
        | {
              reload: () => void;
          }
        | undefined
    >;
    /**
     * @name 错误处理组件
     *
     * @example ErrorBoundary={<MyErrorBoundary/>}
     */
    ErrorBoundary?: any;
    isChildrenLayout?: boolean;
};

type FooterProps = {
    links?: WithFalse<
        {
            key?: string;
            title: React.ReactNode;
            href: string;
            blankTarget?: boolean;
        }[]
    >;
    copyright?: WithFalse<string>;
    style?: CSSProperties;
    className?: string;
    prefixCls?: string;
};

type HeaderViewProps = GlobalHeaderProps & {
    isMobile?: boolean;
    logo?: React.ReactNode;
    headerRender?: WithFalse<
        (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
    >;
    headerTitleRender?: WithFalse<
        (
            logo: React.ReactNode,
            title: React.ReactNode,
            props: HeaderViewProps
        ) => React.ReactNode
    >;
    headerContentRender?: WithFalse<
        (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
    >;
    siderWidth?: number;
    hasSiderMenu?: boolean;
};

type MenuDataItem = {
    /** @name 子菜单 */
    children?: MenuDataItem[];
    /** @name 在菜单中隐藏子节点 */
    hideChildrenInMenu?: boolean;
    /** @name 在菜单中隐藏自己和子节点 */
    hideInMenu?: boolean;
    /** @name 菜单的icon */
    icon?: React.ReactNode;
    /** @name 自定义菜单的国际化 key */
    locale?: string | false;
    /** @name 菜单的名字 */
    name?: string;
    /** @name 用于标定选中的值，默认是 path */
    key?: string;
    /** @name disable 菜单选项 */
    disabled?: boolean;
    /** @name 路径,可以设定为网页链接 */
    path?: string;
    /**
     * 当此节点被选中的时候也会选中 parentKeys 的节点
     *
     * @name 自定义父节点
     */
    parentKeys?: string[];
    /** @name 隐藏自己，并且将子节点提升到与自己平级 */
    flatMenu?: boolean;
    /** @name 指定外链打开形式，同a标签 */
    target?: string;
    [key: string]: any;
};

type PageContainerProps = {
    title?: React.ReactNode | false;
    content?: React.ReactNode;
    extraContent?: React.ReactNode;
    prefixCls?: string;
    footer?: ReactNode[];
    /** @name 是否显示背景色 */
    ghost?: boolean;
    /**
     * 与 antd 完全相同
     *
     * @name PageHeader 的配置
     */
    header?: Partial<PageHeaderProps> & {
        children?: React.ReactNode;
    };
    /** @name 自定义 pageHeader */
    pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
    /**
     * 与 antd 完全相同
     *
     * @name 固钉的配置
     */
    affixProps?: Omit<AffixProps, 'children'>;
    /**
     * 只加载内容区域
     *
     * @name 是否加载
     */
    loading?: boolean | SpinProps | React.ReactNode;
    /** 自定义 breadcrumb,返回false不展示 */
    breadcrumbRender?: PageHeaderProps['breadcrumbRender'] | false;
    /** @name 水印的配置 */
    waterMarkProps?: WaterMarkProps;
    /** @name 配置面包屑 */
    breadcrumb?: BreadcrumbProps;
    children?: React.ReactNode;
} & PageHeaderTabConfig &
    Omit<PageHeaderProps, 'title' | 'footer' | 'breadcrumbRender' | 'breadcrumb'>;

type ProSettings = PureSettings & RenderSetting;

type RouteContextType = {
    breadcrumb?: BreadcrumbListReturn;
    menuData?: MenuDataItem[];
    isMobile?: boolean;
    prefixCls?: string;
    collapsed?: boolean;
    hasSiderMenu?: boolean;
    hasHeader?: boolean;
    siderWidth?: number;
    isChildrenLayout?: boolean;
    hasFooterToolbar?: boolean;
    hasFooter?: boolean;
    setHasFooterToolbar?: React.Dispatch<React.SetStateAction<boolean>>;
    pageTitleInfo?: {
        title: string;
        id: string;
        pageName: string;
    };
    matchMenus?: MenuDataItem[];
    matchMenuKeys?: string[];
    currentMenu?: PureSettings & MenuDataItem;
    /** PageHeader 的 BreadcrumbProps 配置，会透传下去 */
    breadcrumbProps?: BreadcrumbProps;
    waterMarkProps?: WaterMarkProps;
} & Partial<PureSettings>;

type SettingDrawerProps = {
    defaultSettings?: MergerSettingsType<ProSettings>;
    settings?: MergerSettingsType<ProSettings>;
    collapse?: boolean;
    onCollapseChange?: (collapse: boolean) => void;
    getContainer?: any;
    hideHintAlert?: boolean;
    hideCopyButton?: boolean;
    /** 使用实验性质的黑色主题 */
    enableDarkTheme?: boolean;
    prefixCls?: string;
    colorList?:
        | false
        | {
              key: string;
              color: string;
          }[];
    onSettingChange?: (settings: MergerSettingsType<ProSettings>) => void;
    pathname?: string;
    disableUrlParams?: boolean;
    themeOnly?: boolean;
};

type SettingDrawerState = {
    collapse?: boolean;
    language?: string;
} & MergerSettingsType<ProSettings>;

type ProSettings = PureSettings & RenderSetting;

type TopNavHeaderProps = SiderMenuProps & GlobalHeaderProps & PrivateSiderMenuProps;