mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +08:00
5f1dd427df
* feat: css variables theme * chore: temp * chore temp * chore: temp * chore: temp * chore: tmp * chore: temp * feat: full css variables * feat: css var * chore: code clean * chore: code clean * chore: bump cssinjs * test: fix lint * feat: better key logic * feat: useStyle add param rootCls for cssVar scope * chore: fix lint * chore: code clean * chore: fix lint * perf: minimize component token size * chore: make useId compatible * chore: code clean * chore: fix lint * chore: code clean * chore: update test case * feat: genCSSVarRegister * feat: RPN Calculator * chore: add test for css var * chore: code clean * test: add test for calc * feat: better calc type * chore: code clean * chore: update size limit * feat: better useCSSVar * chore: better useCSSVar * test: add cov * feat: better calc logic * test: add test case * chore: code clean --------- Signed-off-by: MadCcc <madccc@foxmail.com>
108 lines
2.5 KiB
TypeScript
108 lines
2.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Button, ConfigProvider, Drawer, Space } from 'antd';
|
|
import { createStyles, useTheme } from 'antd-style';
|
|
import type { DrawerClassNames, DrawerStyles } from '../DrawerPanel';
|
|
|
|
const useStyle = createStyles(({ token }) => ({
|
|
'my-drawer-body': {
|
|
background: token.blue1,
|
|
},
|
|
'my-drawer-mask': {
|
|
boxShadow: `inset 0 0 15px #fff`,
|
|
},
|
|
'my-drawer-header': {
|
|
background: token.green1,
|
|
},
|
|
'my-drawer-footer': {
|
|
color: token.colorPrimary,
|
|
},
|
|
'my-drawer-content': {
|
|
borderLeft: '2px dotted #333',
|
|
},
|
|
}));
|
|
|
|
const App: React.FC = () => {
|
|
const [open, setOpen] = useState([false, false]);
|
|
const { styles } = useStyle();
|
|
const token = useTheme();
|
|
|
|
const toggleDrawer = (idx: number, target: boolean) => {
|
|
setOpen((p) => {
|
|
p[idx] = target;
|
|
return [...p];
|
|
});
|
|
};
|
|
|
|
const classNames: DrawerClassNames = {
|
|
body: styles['my-drawer-body'],
|
|
mask: styles['my-drawer-mask'],
|
|
header: styles['my-drawer-header'],
|
|
footer: styles['my-drawer-footer'],
|
|
content: styles['my-drawer-content'],
|
|
};
|
|
|
|
const drawerStyles: DrawerStyles = {
|
|
mask: {
|
|
backdropFilter: 'blur(10px)',
|
|
},
|
|
content: {
|
|
boxShadow: '-10px 0 10px #666',
|
|
},
|
|
header: {
|
|
borderBottom: `1px solid ${token.colorPrimary}`,
|
|
},
|
|
body: {
|
|
fontSize: token.fontSizeLG,
|
|
},
|
|
footer: {
|
|
borderTop: `1px solid ${token.colorBorder}`,
|
|
},
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Space>
|
|
<Button type="primary" onClick={() => toggleDrawer(0, true)}>
|
|
Open
|
|
</Button>
|
|
<Button type="primary" onClick={() => toggleDrawer(1, true)}>
|
|
ConfigProvider
|
|
</Button>
|
|
</Space>
|
|
<Drawer
|
|
title="Basic Drawer"
|
|
placement="right"
|
|
footer="Footer"
|
|
onClose={() => toggleDrawer(0, false)}
|
|
open={open[0]}
|
|
classNames={classNames}
|
|
styles={drawerStyles}
|
|
>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Drawer>
|
|
<ConfigProvider
|
|
drawer={{
|
|
classNames,
|
|
styles: drawerStyles,
|
|
}}
|
|
>
|
|
<Drawer
|
|
title="Basic Drawer"
|
|
placement="right"
|
|
footer="Footer"
|
|
onClose={() => toggleDrawer(1, false)}
|
|
open={open[1]}
|
|
>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Drawer>
|
|
</ConfigProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|