UNPKG

7.25 kBTypeScriptView Raw
1import type { BreadcrumbProps as AntdBreadcrumbProps } from 'antd/lib/breadcrumb';
2import type { CSSProperties } from 'react';
3import React from 'react';
4import './BasicLayout.less';
5import type { SiderMenuProps } from './components/SiderMenu/SiderMenu';
6import type { WaterMarkProps } from './components/WaterMark';
7import type { GetPageTitleProps } from './getPageTitle';
8import type { HeaderViewProps } from './Header';
9import type { LocaleType } from './locales';
10import type { MenuDataItem, MessageDescriptor, Route, RouterTypes, WithFalse } from './typings';
11export declare type LayoutBreadcrumbProps = {
12 minLength?: number;
13};
14declare type GlobalTypes = Omit<Partial<RouterTypes<Route>> & SiderMenuProps & HeaderViewProps, 'collapsed'>;
15export 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};
150export 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 */
160declare const BasicLayout: React.FC<BasicLayoutProps>;
161export default BasicLayout;