1 | import './BasicLayout.less';
|
2 | import type { CSSProperties } from 'react';
|
3 | import React from 'react';
|
4 | import type { BreadcrumbProps as AntdBreadcrumbProps } from 'antd/lib/breadcrumb';
|
5 | import type { HeaderViewProps } from './Header';
|
6 | import type { MenuDataItem, MessageDescriptor, Route, RouterTypes, WithFalse } from './typings';
|
7 | import type { GetPageTitleProps } from './getPageTitle';
|
8 | import type { LocaleType } from './locales';
|
9 | import type { SiderMenuProps } from './components/SiderMenu/SiderMenu';
|
10 | import type { WaterMarkProps } from './components/WaterMark';
|
11 | export declare type LayoutBreadcrumbProps = {
|
12 | minLength?: number;
|
13 | };
|
14 | declare type GlobalTypes = Omit<Partial<RouterTypes<Route>> & SiderMenuProps & HeaderViewProps, 'collapsed'>;
|
15 | export declare type BasicLayoutProps = GlobalTypes & {
|
16 | /**
|
17 | * @name 简约模式,设置了之后不渲染的任何 layout 的东西,但是会有 context,可以获取到当前菜单。
|
18 | *
|
19 | * @example pure={true}
|
20 | */
|
21 | pure?: boolean;
|
22 | /**
|
23 | * @name logo 的配置,可以配置url,React 组件 和 false
|
24 | *
|
25 | * @example 设置 logo 为网络地址 logo="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
|
26 | * @example 设置 logo 为组件 logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/>}
|
27 | * @example 设置 logo 为 false 不显示 logo logo={false}
|
28 | * @example 设置 logo 为 方法 logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
|
29 | * */
|
30 | logo?: React.ReactNode | JSX.Element | WithFalse<() => React.ReactNode | JSX.Element>;
|
31 | /**
|
32 | * @name 页面切换的时候触发
|
33 | *
|
34 | * @example 获取切换的页面地址 onPageChange={(location) => { console.log("切换到:"+location.pathname) }}
|
35 | *
|
36 | * */
|
37 | onPageChange?: (location?: RouterTypes<Route>['location']) => void;
|
38 | /**
|
39 | * @name layout 的 loading 效果,设置完成之后只展示一个 loading
|
40 | *
|
41 | * @example loading={true}
|
42 | */
|
43 | loading?: boolean;
|
44 | /**
|
45 | * @name layout
|
46 | *
|
47 | * @description "zh-CN" | "zh-TW" | "en-US" | "it-IT" | "ko-KR"
|
48 | * @example 中文 layout="zh-CN"
|
49 | * @example 英文 layout="en-US"
|
50 | */
|
51 | locale?: LocaleType;
|
52 | /**
|
53 | * @name 是否收起 layout 是严格受控的,可以 设置为 true,一直收起
|
54 | *
|
55 | * @example collapsed={true}
|
56 | */
|
57 | collapsed?: boolean;
|
58 | /**
|
59 | * @name 收起和展开的时候触发事件
|
60 | *
|
61 | * @example onCollapse=(collapsed)=>{ setCollapsed(collapsed) };
|
62 | */
|
63 | onCollapse?: (collapsed: boolean) => void;
|
64 | /**
|
65 | * @name 页脚的配置
|
66 | *
|
67 | * @example 不展示dom footerRender={false}
|
68 | * @example 使用 layout 的 DefaultFooter footerRender={() => (<DefaultFooter copyright="这是一条测试文案"/>}
|
69 | */
|
70 | footerRender?: WithFalse<(props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode>;
|
71 | /**
|
72 | * @name 设置 PageHeader 的面包屑,只能处理数据
|
73 | *
|
74 | * @example 手动设置 breadcrumbRender={(routers = []) => [ { path: '/', breadcrumbName: '主页'} ]
|
75 | * @example 增加一项 breadcrumbRender={(routers = []) => { return [{ path: '/', breadcrumbName: '主页'} ,...routers ]}
|
76 | * @example 删除首页 breadcrumbRender={(routers = []) => { return routers.filter(item => item.path !== '/')}
|
77 | * @example 不显示面包屑 breadcrumbRender={false}
|
78 | */
|
79 | breadcrumbRender?: WithFalse<(routers: AntdBreadcrumbProps['routes']) => AntdBreadcrumbProps['routes']>;
|
80 | /**
|
81 | * @name 设置页面的标题
|
82 | * @example 根据页面的路由设置标题 pageTitleRender={(props) => { return props.location.pathname }}
|
83 | * @example 不显示标题 pageTitleRender={false}
|
84 | * @example 根据默认的标题设置 pageTitleRender={(props,defaultPageTitle) => { return defaultPageTitle + '这是一个测试标题' }}
|
85 | * @example 根据 info 来自己组合标题 pageTitleRender={(props,defaultPageTitle,info) => { return info.title + "-" + info.pageName }
|
86 | */
|
87 | pageTitleRender?: WithFalse<(props: GetPageTitleProps, defaultPageTitle?: string, info?: {
|
88 | title: string;
|
89 | id: string;
|
90 | pageName: string;
|
91 | }) => string>;
|
92 | /**
|
93 | * @name 处理 menuData 的数据,可以动态的控制数据
|
94 | * @see 尽量不要用异步数据来处理,否则可能造成更新不及时,如果异步数据推荐使用 menu.request 和 params。
|
95 | *
|
96 | * @example 删除一些菜单 menuDataRender=((menuData) => { return menuData.filter(item => item.name !== 'test') })
|
97 | * @example 增加一些菜单 menuDataRender={(menuData) => { return menuData.concat({ path: '/test', name: '测试', icon: 'smile' }) }}
|
98 | * @example 修改菜单 menuDataRender={(menuData) => { return menuData.map(item => { if (item.name === 'test') { item.name = '测试' } return item }) }}
|
99 | * @example 打平数据 menuDataRender={(menuData) => { return menuData.reduce((pre, item) => { return pre.concat(item.children || []) }, []) }}
|
100 | */
|
101 | menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[];
|
102 | /**
|
103 | * @name 处理每个面包屑的配置,需要直接返回 dom
|
104 | * @description (route: Route, params: any, routes: Array<Route>, paths: Array<string>) => React.ReactNode
|
105 | *
|
106 | * @example 设置 disabled: itemRender={(route, params, routes, paths) => { return <Button disabled>{route.breadcrumbName}</Button> }}
|
107 | * @example 拼接 path: itemRender={(route, params, routes, paths) => { return <a href={paths.join('/')}>{route.breadcrumbName}</Button> }}
|
108 | */
|
109 | itemRender?: AntdBreadcrumbProps['itemRender'];
|
110 | formatMessage?: (message: MessageDescriptor) => string;
|
111 | /** @name 是否禁用移动端模式
|
112 | *
|
113 | * @see 有的管理系统不需要移动端模式,此属性设置为true即可
|
114 | * @example disableMobile={true}
|
115 | * */
|
116 | disableMobile?: boolean;
|
117 | /**
|
118 | * content 的样式
|
119 | *
|
120 | * @example 背景颜色为红色 contentStyle={{ backgroundColor: 'red '}}
|
121 | */
|
122 | contentStyle?: CSSProperties;
|
123 | className?: string;
|
124 | /**
|
125 | * @name 取消 content的 margin
|
126 | *
|
127 | * @example 取消内容的 margin disableContentMargin={true}
|
128 | * */
|
129 | disableContentMargin?: boolean;
|
130 | /** PageHeader 的 BreadcrumbProps 配置,会透传下去 */
|
131 | breadcrumbProps?: AntdBreadcrumbProps & LayoutBreadcrumbProps;
|
132 | /** @name 水印的相关配置 */
|
133 | waterMarkProps?: WaterMarkProps;
|
134 | /**
|
135 | * @name 操作菜单重新刷新
|
136 | *
|
137 | * @example 重新获取菜单 actionRef.current.reload();
|
138 | * */
|
139 | actionRef?: React.MutableRefObject<{
|
140 | reload: () => void;
|
141 | } | undefined>;
|
142 | /**
|
143 | * @name 错误处理组件
|
144 | *
|
145 | * @example ErrorBoundary={<MyErrorBoundary/>}
|
146 | */
|
147 | ErrorBoundary?: any;
|
148 | isChildrenLayout?: boolean;
|
149 | };
|
150 | export declare type BasicLayoutContext = {
|
151 | [K in 'location']: BasicLayoutProps[K];
|
152 | } & {
|
153 | breadcrumb: Record<string, MenuDataItem>;
|
154 | };
|
155 | /**
|
156 | * 🌃 Powerful and easy to use beautiful layout 🏄 Support multiple topics and layout types
|
157 | *
|
158 | * @param props
|
159 | */
|
160 | declare const BasicLayout: React.FC<BasicLayoutProps>;
|
161 | export default BasicLayout;
|