mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 08:09:13 +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>
111 lines
2.6 KiB
TypeScript
111 lines
2.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Button, ConfigProvider, Modal, Space } from 'antd';
|
|
import { createStyles, useTheme } from 'antd-style';
|
|
|
|
const useStyle = createStyles(({ token }) => ({
|
|
'my-modal-body': {
|
|
background: token.blue1,
|
|
padding: token.paddingSM,
|
|
},
|
|
'my-modal-mask': {
|
|
boxShadow: `inset 0 0 15px #fff`,
|
|
},
|
|
'my-modal-header': {
|
|
borderBottom: `1px dotted ${token.colorPrimary}`,
|
|
},
|
|
'my-modal-footer': {
|
|
color: token.colorPrimary,
|
|
},
|
|
'my-modal-content': {
|
|
border: '1px solid #333',
|
|
},
|
|
}));
|
|
|
|
const App: React.FC = () => {
|
|
const [isModalOpen, setIsModalOpen] = useState([false, false]);
|
|
const { styles } = useStyle();
|
|
const token = useTheme();
|
|
|
|
const toggleModal = (idx: number, target: boolean) => {
|
|
setIsModalOpen((p) => {
|
|
p[idx] = target;
|
|
return [...p];
|
|
});
|
|
};
|
|
|
|
const classNames = {
|
|
body: styles['my-modal-body'],
|
|
mask: styles['my-modal-mask'],
|
|
header: styles['my-modal-header'],
|
|
footer: styles['my-modal-footer'],
|
|
content: styles['my-modal-content'],
|
|
};
|
|
|
|
const modalStyles = {
|
|
header: {
|
|
borderLeft: `5px solid ${token.colorPrimary}`,
|
|
borderRadius: 0,
|
|
paddingInlineStart: 5,
|
|
},
|
|
body: {
|
|
boxShadow: 'inset 0 0 5px #999',
|
|
borderRadius: 5,
|
|
},
|
|
mask: {
|
|
backdropFilter: 'blur(10px)',
|
|
},
|
|
footer: {
|
|
borderTop: '1px solid #333',
|
|
},
|
|
content: {
|
|
boxShadow: '0 0 30px #999',
|
|
},
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Space>
|
|
<Button type="primary" onClick={() => toggleModal(0, true)}>
|
|
Open Modal
|
|
</Button>
|
|
<Button type="primary" onClick={() => toggleModal(1, true)}>
|
|
ConfigProvider
|
|
</Button>
|
|
</Space>
|
|
<Modal
|
|
title="Basic Modal"
|
|
open={isModalOpen[0]}
|
|
onOk={() => toggleModal(0, false)}
|
|
onCancel={() => toggleModal(0, false)}
|
|
footer="Footer"
|
|
classNames={classNames}
|
|
styles={modalStyles}
|
|
>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Modal>
|
|
<ConfigProvider
|
|
modal={{
|
|
classNames,
|
|
styles: modalStyles,
|
|
}}
|
|
>
|
|
<Modal
|
|
title="Basic Modal"
|
|
open={isModalOpen[1]}
|
|
onOk={() => toggleModal(1, false)}
|
|
onCancel={() => toggleModal(1, false)}
|
|
footer="Footer"
|
|
>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Modal>
|
|
</ConfigProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|