@ant-design/pro-layout

const DefaultFooter: React.FC<FooterProps>;

const DefaultHeader: React.FC<
    {
        collapsed?: boolean;
        onCollapse?: (collapsed: boolean) => void;
        isMobile?: boolean;
        logo?: React.ReactNode;
        menuRender?: WithFalse<
            (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
        >;
        rightContentRender?: WithFalse<(props: HeaderViewProps) => React.ReactNode>;
        className?: string;
        prefixCls?: string;
        appList?: AppsLogoComponentsAppList;
        itemClick?: (item: AppsLogoComponentsAppItem) => void;
        menuData?: MenuDataItem[];
        onMenuHeaderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
        style?: React.CSSProperties;
        menuHeaderRender?: WithFalse<
            (
                logo: React.ReactNode,
                title: React.ReactNode,
                props?: SiderMenuProps
            ) => React.ReactNode
        >;
        headerContentRender?: WithFalse<
            (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
        >;
        collapsedButtonRender?: WithFalse<
            (collapsed?: boolean, defaultDom?: React.ReactNode) => React.ReactNode
        >;
        splitMenus?: boolean;
        actionsRender?: WithFalse<(props: HeaderViewProps) => React.ReactNode[]>;
        avatarProps?: any;
        children?: React.ReactNode;
    } & Partial<PureSettings> & {
            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;
        } & PrivateSiderMenuProps
>;

const FooterToolbar: React.FC<FooterToolbarProps>;

const GridContent: React.FC<GridContentProps>;

const PageContainer: React.FC<PageContainerProps>;

const PageHeader: React.FC<PageHeaderProps>;

const PageLoading: React.FC<any>;

const ProBreadcrumb: React.FC<BreadcrumbProps>;

const ProLayout: React.FC<ProLayoutProps>;

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 },
    formatMessage?: (message: MessageDescriptor) => string,
    menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[]
) => {
    breadcrumb: Record<string, MenuDataItem>;
    breadcrumbMap: Map<string, MenuDataItem>;
    menuData: MenuDataItem[];
};

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

ProPageHeader: (
    props: PageContainerProps & { prefixedClassName: string }
) => JSX.Element | null;

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[];
    routes?: undefined;
    /** @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;
    /**
     * menuItem 的 tooltip 显示的路径
     */
    tooltip?: string;
    [key: string]: any;
};

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

type ProLayoutProps = GlobalTypes & {
    stylish?: {
        header?: GenerateStyle<SiderMenuToken>;
        sider?: GenerateStyle<SiderMenuToken>;
    };
    /** Layout 的品牌配置，表现为一张背景图片 */
    bgLayoutImgList?: {
        src?: string;
        width?: string;
        height?: string;
        left?: number;
        top?: number;
        bottom?: number;
        right?: number;
    }[];
    /**
     * @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['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;
    /** 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;
    /**
     * @name  侧边菜单的类型, menu.type 的快捷方式
     * @type "sub" | "group"
     * @example group
     */
    siderMenuType?: 'sub' | 'group';
    isChildrenLayout?: boolean;
};

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;
    hasPageContainer?: number;
    setHasFooterToolbar?: React.Dispatch<React.SetStateAction<boolean>>;
    setHasPageContainer?: React.Dispatch<React.SetStateAction<number>>;
    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;
              title?: 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;

type WaterMarkProps = {
    /** 类名 */
    className?: string;
    /** 样式 */
    style?: React.CSSProperties;
    /** 水印样式 */
    markStyle?: React.CSSProperties;
    /** 水印类名 */
    markClassName?: string;
    /** 水印之间的水平间距 */
    gapX?: number;
    /** 水印之间的垂直间距 */
    gapY?: number;
    /** 追加的水印元素的z-index */
    zIndex?: number;
    /** 水印的宽度 */
    width?: number;
    /** 水印的高度 */
    height?: number;
    /** 水印在canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置, 即 offsetTop = gapY / 2 */
    offsetTop?: number;
    /** 水印在canvas 画布上绘制的水平偏移量, 正常情况下，水印绘制在中间位置, 即 offsetTop = gapX / 2 */
    offsetLeft?: number;
    /** 水印绘制时，旋转的角度，单位 ° */
    rotate?: number;
    /** ClassName 前缀 */
    prefixCls?: string;
    /** 高清印图片源, 为了高清屏幕显示，建议使用 2倍或3倍图，优先使用图片渲染水印。 */
    image?: string;
    /** 水印文字内容 */
    content?: string | string[];
    /** 文字颜色 */
    fontColor?: string;
    /** 文字样式 */
    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
    /** 文字族 */
    fontFamily?: string;
    /** 文字粗细 */
    fontWeight?: 'normal' | 'light' | 'weight' | number;
    /** 文字大小 */
    fontSize?: number | string;
    children?: React.ReactNode;
};