/
index.tsx
81 lines (76 loc) 路 1.98 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import React, { useState } from 'react';
import { history } from 'umi';
import classNames from 'classnames';
import { NavBar, Icon, Drawer } from 'antd-mobile';
import { DrawerProps } from 'antd-mobile/lib/drawer/PropsType';
import { NavBarProps } from 'antd-mobile/lib/nav-bar/PropsType';
import styles from './index.less';
export interface PageWrapperProps extends NavBarProps {
title?: any;
backable?: boolean;
backPath?: string;
fixed?: boolean;
setSidebar?: (setOpen: (open: boolean) => void) => DrawerProps['sidebar'];
}
export default function PageWrapper(props: PageWrapperProps) {
const {
title,
backable,
backPath,
fixed = true,
className,
leftContent,
setSidebar,
children,
...rest
} = props;
const [open, setOpen] = useState(false);
const useDrawer = leftContent && setSidebar;
let backableConfig: any = {};
let drawerConfig: any = {};
if (leftContent && setSidebar) {
drawerConfig = {
leftContent,
onLeftClick: () => {
setOpen(!open);
},
};
} else if (backable) {
backableConfig = {
icon: <Icon type="left" />,
onLeftClick: () => (backPath ? history.push(backPath) : history.goBack()),
};
}
const renderChildren = () => {
if (useDrawer && setSidebar) {
return (
<Drawer
className={styles.drawer}
style={{ height: `calc(${document.documentElement.clientHeight}px - ${90 / 75}rem)` }}
sidebar={setSidebar(setOpen)}
open={open}
onOpenChange={() => {
setOpen(!open);
}}
>
{children}
</Drawer>
);
}
return fixed ? <div className={styles.fixedContent}>{children}</div> : children;
};
return (
<div>
<NavBar
mode="dark"
{...backableConfig}
{...drawerConfig}
className={classNames(fixed && styles.fixed, className)}
{...rest}
>
{title}
</NavBar>
{renderChildren()}
</div>
);
}