Skip to content

Commit d01a7b1

Browse files
LuckyFBBLuckyFBB
authored
feat(slidepane): add footer and extends DrawerProps (#440)
* feat(slidepane): add footer and extends DrawerProps * feat(slidepane): support size and banner * fix(slidepane): use composeOpen as uesEffect dependence * feat(slidepane): remove bodyClassName in footer
1 parent 8f606d7 commit d01a7b1

15 files changed

+295
-68
lines changed

‎src/resize/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
title: Resize Resize 事件监听
2+
title: Resize 事件监听
33
group: 组件
44
toc: content
55
demo:
66
cols: 2
77
---
88

9-
# Resize Resize 事件监听
9+
# Resize 事件监听
1010

1111
用于监听 window 或者是其他元素的尺寸变化
1212

‎src/slidePane/__tests/__snapshots__/index.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`test SlidePane snapshot match 1`] = `
1818
/>
1919
<div
2020
class="dtc-slide-pane-content-wrapper"
21-
style="width: 378px;"
21+
style="width: 1000px;"
2222
>
2323
<div
2424
aria-modal="true"

‎src/slidePane/__tests/index.test.tsx

+51-12
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,39 @@
11
import React from 'react';
22
import { fireEvent, render } from '@testing-library/react';
3+
import { alert } from 'ant-design-testing';
34
import '@testing-library/jest-dom/extend-expect';
45

56
import SlidePane from '../index';
67

78
describe('test SlidePane ', () => {
89
test('snapshot match', () => {
9-
const wrapper = render(<SlidePane visible>Hello World</SlidePane>);
10+
const wrapper = render(<SlidePane open>Hello World</SlidePane>);
1011
expect(wrapper).toMatchSnapshot();
1112
});
12-
test('should be invisible', () => {
13-
const { container } = render(<SlidePane visible={false}>Hello World</SlidePane>);
13+
test('should be not open', () => {
14+
const { container } = render(<SlidePane open={false}>Hello World</SlidePane>);
1415
expect(container).not.toHaveClass();
1516
});
1617
test('should render loading correct ', () => {
17-
const { unmount } = render(<SlidePane visible>Hello World</SlidePane>);
18+
const { unmount } = render(<SlidePane open>Hello World</SlidePane>);
1819
const dom = document.querySelector('.ant-spin-spinning');
1920
expect(dom).toBe(null);
2021
unmount();
2122
render(
22-
<SlidePane visible loading>
23+
<SlidePane open loading>
2324
Hello World
2425
</SlidePane>
2526
);
2627
const domLoading = document.querySelector('.ant-spin-spinning');
2728
expect(domLoading).not.toBe(null);
2829
});
2930
test('should render mask correct ', () => {
30-
const { unmount } = render(<SlidePane visible>Hello World</SlidePane>);
31+
const { unmount } = render(<SlidePane open>Hello World</SlidePane>);
3132
const dom = document.querySelector('.dtc-slide-pane-mask');
3233
expect(dom).toBe(null);
3334
unmount();
3435
render(
35-
<SlidePane visible mask>
36+
<SlidePane open mask>
3637
Hello World
3738
</SlidePane>
3839
);
@@ -41,18 +42,28 @@ describe('test SlidePane ', () => {
4142
});
4243
test('should render width correct', () => {
4344
render(
44-
<SlidePane visible width={640}>
45+
<SlidePane open width={640}>
4546
Hello World
4647
</SlidePane>
4748
);
4849
expect(document.querySelector('.dtc-slide-pane-content-wrapper')).toHaveStyle({
4950
width: '640px',
5051
});
5152
});
53+
test('should render size width correct', () => {
54+
render(
55+
<SlidePane open size="large">
56+
Hello World
57+
</SlidePane>
58+
);
59+
expect(document.querySelector('.dtc-slide-pane-content-wrapper')).toHaveStyle({
60+
width: '1256px',
61+
});
62+
});
5263
test('should render className/style correct', () => {
5364
const { unmount } = render(
5465
<SlidePane
55-
visible
66+
open
5667
rootClassName="root-className"
5768
bodyClassName="body-className"
5869
rootStyle={{ color: 'red' }}
@@ -72,7 +83,7 @@ describe('test SlidePane ', () => {
7283
test('should render tab correct', () => {
7384
const { getByText, unmount } = render(
7485
<SlidePane
75-
visible
86+
open
7687
width={640}
7788
tabs={[
7889
{ key: '1', title: 'tab1' },
@@ -98,7 +109,7 @@ describe('test SlidePane ', () => {
98109

99110
const { getByText: getByText1 } = render(
100111
<SlidePane
101-
visible
112+
open
102113
width={640}
103114
tabs={[
104115
{ key: '1', title: 'tab1' },
@@ -121,10 +132,38 @@ describe('test SlidePane ', () => {
121132
expect(getByText1('变更记录')).toBeTruthy();
122133
expect(getByText1('tab2').parentNode).toHaveClass('ant-tabs-tab-active');
123134
});
135+
test('Should support string banner', async () => {
136+
const { getByText } = render(
137+
<SlidePane open banner="banner">
138+
Hello World
139+
</SlidePane>
140+
);
141+
142+
expect(getByText('banner')).toBeInTheDocument();
143+
});
144+
test('Should support ReactNode', async () => {
145+
const { getByTestId } = render(
146+
<SlidePane open banner={<div data-testid="banner">xxxx</div>}>
147+
test
148+
</SlidePane>
149+
);
150+
151+
expect(getByTestId('banner')).toBeInTheDocument();
152+
});
153+
it('Should support AlertProps', async () => {
154+
const { getByText } = render(
155+
<SlidePane open banner={{ message: 'banner', type: 'error' }}>
156+
test
157+
</SlidePane>
158+
);
159+
160+
expect(getByText('banner')).toBeInTheDocument();
161+
expect(alert.query(document)?.classList.contains('ant-alert-error')).toBeTruthy();
162+
});
124163
test('should callback to be called', () => {
125164
const fn = jest.fn();
126165
const { getByRole } = render(
127-
<SlidePane visible onClose={fn}>
166+
<SlidePane open onClose={fn}>
128167
Hello World
129168
</SlidePane>
130169
);

‎src/slidePane/demos/basic.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default () => {
2929
click me
3030
</Button>
3131
<SlidePane
32-
visible={visible}
32+
open={visible}
3333
loading={loading}
3434
width={`${width}%`}
3535
onClose={() => setVisible(false)}

‎src/slidePane/demos/basicBanner.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { useState } from 'react';
2+
import { Button } from 'antd';
3+
import { SlidePane } from 'dt-react-component';
4+
5+
export default () => {
6+
const [visible, setVisible] = useState(false);
7+
8+
return (
9+
<>
10+
<Button style={{ margin: '10px' }} onClick={() => setVisible((v) => !v)}>
11+
click me
12+
</Button>
13+
<SlidePane
14+
open={visible}
15+
banner="这是 SlidePane 的 banner"
16+
onClose={() => setVisible(false)}
17+
title="title"
18+
>
19+
<div>hello world</div>
20+
</SlidePane>
21+
</>
22+
);
23+
};

‎src/slidePane/demos/basicBannerProps.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { useState } from 'react';
2+
import { Button } from 'antd';
3+
import { SlidePane } from 'dt-react-component';
4+
5+
export default () => {
6+
const [visible, setVisible] = useState(false);
7+
8+
return (
9+
<>
10+
<Button style={{ margin: '10px' }} onClick={() => setVisible((v) => !v)}>
11+
click me
12+
</Button>
13+
<SlidePane
14+
open={visible}
15+
banner={{
16+
message: 'SlidePane 可以支持 banner 属性',
17+
type: 'error',
18+
showIcon: true,
19+
}}
20+
onClose={() => setVisible(false)}
21+
title="title"
22+
>
23+
<div>hello world</div>
24+
</SlidePane>
25+
</>
26+
);
27+
};

‎src/slidePane/demos/basicSize.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useState } from 'react';
2+
import { Button, Space } from 'antd';
3+
import { SlidePane } from 'dt-react-component';
4+
import { SlidePaneProps } from 'dt-react-component/slidePane';
5+
6+
export default () => {
7+
const [visible, setVisible] = useState(false);
8+
const [size, setSize] = useState<SlidePaneProps<[]>['size']>('default');
9+
10+
return (
11+
<>
12+
<Space>
13+
<Button
14+
type="primary"
15+
onClick={() => {
16+
setVisible(true);
17+
setSize('small');
18+
}}
19+
>
20+
小尺寸
21+
</Button>
22+
<Button
23+
type="primary"
24+
onClick={() => {
25+
setVisible(true);
26+
setSize('default');
27+
}}
28+
>
29+
正常尺寸
30+
</Button>
31+
<Button
32+
type="primary"
33+
onClick={() => {
34+
setVisible(true);
35+
setSize('large');
36+
}}
37+
>
38+
大尺寸
39+
</Button>
40+
</Space>
41+
<SlidePane open={visible} size={size} onClose={() => setVisible(false)} title="title">
42+
<div>hello world</div>
43+
</SlidePane>
44+
</>
45+
);
46+
};

‎src/slidePane/demos/basic_mask.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default () => {
1919
click me
2020
</Button>
2121
<SlidePane
22-
visible={visible}
22+
open={visible}
2323
rootStyle={{
2424
minHeight: '600px',
2525
height: '100%',

‎src/slidePane/demos/basic_top.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { useState } from 'react';
2+
import { Alert, Button } from 'antd';
3+
import { SlidePane } from 'dt-react-component';
4+
5+
export default () => {
6+
const [visible, setVisible] = useState(false);
7+
8+
return (
9+
<>
10+
<Alert message="产品中抽屉的距离顶部高度 64px，可通过 rootStyle 设置" />
11+
<Button
12+
style={{ margin: '10px' }}
13+
onClick={() => {
14+
setVisible((v) => !v);
15+
}}
16+
>
17+
click me
18+
</Button>
19+
<SlidePane
20+
open={visible}
21+
onClose={() => setVisible(false)}
22+
title="title"
23+
rootStyle={{ top: 64 }}
24+
>
25+
<div>hello world</div>
26+
</SlidePane>
27+
</>
28+
);
29+
};

‎src/slidePane/demos/customTitle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default () => {
99
<>
1010
<Button onClick={() => setVisible(true)}>打开</Button>
1111
<SlidePane
12-
visible={visible}
12+
open={visible}
1313
rootStyle={{
1414
minHeight: '600px',
1515
height: '100%',

‎src/slidePane/demos/footer.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { useState } from 'react';
2+
import { Button, Space } from 'antd';
3+
import { SlidePane } from 'dt-react-component';
4+
5+
export default () => {
6+
const [visible, setVisible] = useState(false);
7+
8+
return (
9+
<>
10+
<Button onClick={() => setVisible(true)}>打开</Button>
11+
<SlidePane
12+
open={visible}
13+
onClose={() => setVisible(false)}
14+
title="Title"
15+
footer={
16+
<Space>
17+
<Button>重置</Button>
18+
<Button type="primary">立即执行</Button>
19+
</Space>
20+
}
21+
>
22+
<div style={{ height: '110vh' }}>超长可滚动</div>
23+
</SlidePane>
24+
</>
25+
);
26+
};

‎src/slidePane/demos/tabs.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default () => {
99
<>
1010
<Button onClick={() => setVisible(true)}>打开</Button>
1111
<SlidePane
12-
visible={visible}
12+
open={visible}
1313
onClose={() => setVisible(false)}
1414
title={'Title'}
1515
tabs={

‎src/slidePane/index.md

+24-14
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,32 @@ demo:
1717

1818
<code src="./demos/basic.tsx" title="基础使用"></code>
1919
<code src="./demos/basic_mask.tsx" title="基础 mask 使用"></code>
20+
<code src="./demos/basicSize.tsx" title="尺寸"></code>
21+
<code src="./demos/basic_top.tsx" title="抽屉距顶部高度"></code>
2022
<code src="./demos/customTitle.tsx" title="自定义 Title"></code>
2123
<code src="./demos/tabs.tsx" title="展示 tabs"></code>
24+
<code src="./demos/footer.tsx" title="展示 footer"></code>
25+
<code src="./demos/basicBanner.tsx" title="支持 banner"></code>
26+
<code src="./demos/basicBannerProps.tsx" title="支持传 banner 的 Props 属性"></code>
2227

2328
## API
2429

25-
| 参数 | 说明 | 类型 | 默认值 |
26-
| ------------- | ------------------------------ | ----------------------------------------------------- | ------ |
27-
| visible | SlidePanel 是否可见 | `boolean` | - |
28-
| title | 右侧面板的 title | `React.ReactNode` | - |
29-
| mask | 是否展示遮罩层 | `boolean` | false |
30-
| width | 右侧面板的宽度 | `number \| string` | - |
31-
| children | 右侧面板展示内容 | `(key: string) => React.ReactNode \| React.ReactNode` | - |
32-
| tabs | 右侧面板的内容的 Tabs | `{ key: string; title: React.ReactNode }[]` | - |
33-
| activeKeys | 右侧面板的内容的 Tabs 的选中项 | `string` | - |
34-
| rootClassName | 右侧面板外层容器的类名 | `string` | - |
35-
| bodyClassName | 内容容器的类名 | `string` | - |
36-
| rootStyle | 右侧面板内部容器的样式 | `CSSProperties` | - |
37-
| bodyStyle | 内容容器的样式 | `CSSProperties` | - |
38-
| onClose | 关闭回调 | `function` | - |
30+
### AlertProps
31+
32+
[AlertProps](https://4x-ant-design.antgroup.com/components/alert-cn/#API)
33+
34+
| 参数 | 说明 | 类型 | 默认值 |
35+
| ------------- | ------------------------------ | ----------------------------------------------------- | --------- |
36+
| activeKeys | 右侧面板的内容的 Tabs 的选中项 | `string` | - |
37+
| banner | 提示 | `React.ReactNode \| AlertProps` | - |
38+
| bodyClassName | 内容容器的类名 | `string` | - |
39+
| bodyStyle | 内容容器的样式 | `CSSProperties` | - |
40+
| children | 右侧面板展示内容 | `(key: string) => React.ReactNode \| React.ReactNode` | - |
41+
| footer | 右侧面板的底部内容 | `React.ReactNode` | - |
42+
| size | 尺寸 | `'small' \| 'default' \| 'large'` | `default` |
43+
| tabs | 右侧面板的内容的 Tabs | `{ key: string; title: React.ReactNode }[]` | - |
44+
| title | 右侧面板的 title | `React.ReactNode` | - |
45+
46+
:::info
47+
其余属性继承 [antd4.x 的 Drawer](https://4x.ant.design/components/drawer-cn/#API)
48+
:::

0 commit comments

Comments
 (0)