Skip to content

Commit e7c8060

Browse files
tangjinzhoutangjinzhou
committed
feat: update drawer
1 parent 2ee50b4 commit e7c8060

18 files changed

+292
-84
lines changed

‎build/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
dev: {
3-
componentName: 'divider', // dev components
3+
componentName: 'drawer', // dev components
44
},
55
};

‎components/drawer/__tests__/__snapshots__/Drawer.test.js.snap

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Drawer class is test_drawer 1`] = `
4-
<div class="">
5-
<div class="ant-drawer ant-drawer-right test_drawer">
4+
<div tabindex="-1" class="">
5+
<div tabindex="-1" class="ant-drawer ant-drawer-right test_drawer">
66
<div class="ant-drawer-mask"></div>
77
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
88
<div class="ant-drawer-content">
9-
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%; opacity: 0; transition: opacity .3s;">
9+
<div class="ant-drawer-wrapper-body" style="opacity: 0; transition: opacity .3s;">
1010
<div class="ant-drawer-header-no-title"><button aria-label="Close" class="ant-drawer-close"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
1111
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
1212
</svg></i></button></div>
@@ -19,12 +19,12 @@ exports[`Drawer class is test_drawer 1`] = `
1919
`;
2020

2121
exports[`Drawer closable is false 1`] = `
22-
<div class="">
23-
<div class="ant-drawer ant-drawer-right">
22+
<div tabindex="-1" class="">
23+
<div tabindex="-1" class="ant-drawer ant-drawer-right">
2424
<div class="ant-drawer-mask"></div>
2525
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
2626
<div class="ant-drawer-content">
27-
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;">
27+
<div class="ant-drawer-wrapper-body">
2828
<div class="ant-drawer-body">Here is content of Drawer</div>
2929
</div>
3030
</div>
@@ -34,12 +34,12 @@ exports[`Drawer closable is false 1`] = `
3434
`;
3535

3636
exports[`Drawer destroyOnClose is true 1`] = `
37-
<div class="">
38-
<div class="ant-drawer ant-drawer-right">
37+
<div tabindex="-1" class="">
38+
<div tabindex="-1" class="ant-drawer ant-drawer-right">
3939
<div class="ant-drawer-mask"></div>
4040
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
4141
<div class="ant-drawer-content">
42-
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%; opacity: 0; transition: opacity .3s;">
42+
<div class="ant-drawer-wrapper-body" style="opacity: 0; transition: opacity .3s;">
4343
<div class="ant-drawer-body">Here is content of Drawer</div>
4444
</div>
4545
</div>
@@ -49,12 +49,12 @@ exports[`Drawer destroyOnClose is true 1`] = `
4949
`;
5050

5151
exports[`Drawer have a title 1`] = `
52-
<div class="">
53-
<div class="ant-drawer ant-drawer-right">
52+
<div tabindex="-1" class="">
53+
<div tabindex="-1" class="ant-drawer ant-drawer-right">
5454
<div class="ant-drawer-mask"></div>
5555
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
5656
<div class="ant-drawer-content">
57-
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;">
57+
<div class="ant-drawer-wrapper-body">
5858
<div class="ant-drawer-header">
5959
<div class="ant-drawer-title">Test Title</div><button aria-label="Close" class="ant-drawer-close"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
6060
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
@@ -69,12 +69,12 @@ exports[`Drawer have a title 1`] = `
6969
`;
7070

7171
exports[`Drawer render correctly 1`] = `
72-
<div class="">
73-
<div class="ant-drawer ant-drawer-right">
72+
<div tabindex="-1" class="">
73+
<div tabindex="-1" class="ant-drawer ant-drawer-right">
7474
<div class="ant-drawer-mask"></div>
7575
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 400px;">
7676
<div class="ant-drawer-content">
77-
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;">
77+
<div class="ant-drawer-wrapper-body">
7878
<div class="ant-drawer-header-no-title"><button aria-label="Close" class="ant-drawer-close"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
7979
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
8080
</svg></i></button></div>
@@ -87,8 +87,8 @@ exports[`Drawer render correctly 1`] = `
8787
`;
8888

8989
exports[`Drawer render top drawer 1`] = `
90-
<div class="">
91-
<div class="ant-drawer ant-drawer-top">
90+
<div tabindex="-1" class="">
91+
<div tabindex="-1" class="ant-drawer ant-drawer-top">
9292
<div class="ant-drawer-mask"></div>
9393
<div class="ant-drawer-content-wrapper" style="transform: translateY(-100%); height: 400px;">
9494
<div class="ant-drawer-content">

‎components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Drawer render correctly 1`] = `
4-
<div><button type="button" class="ant-btn"><span>open</span></button>
5-
<div class="">
6-
<div class="ant-drawer ant-drawer-right">
4+
<div><button type="button" class="ant-btn" ant-click-animating-without-extra-node="false"><span>open</span></button>
5+
<div tabindex="-1" class="">
6+
<div tabindex="-1" class="ant-drawer ant-drawer-right">
77
<div class="ant-drawer-mask"></div>
88
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
99
<div class="ant-drawer-content">
10-
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;">
10+
<div class="ant-drawer-wrapper-body">
1111
<div class="ant-drawer-header-no-title"><button aria-label="Close" class="ant-drawer-close"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
1212
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
1313
</svg></i></button></div>

‎components/drawer/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,30 @@ exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
2828
</div>
2929
`;
3030
31+
exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
32+
<div style="height: 200px; overflow: hidden; position: relative; border: 1px solid #ebedf0; border-radius: 2px; padding: 48px; text-align: center; background: rgb(250, 250, 250);">
33+
Render in this
34+
<div style="margin-top: 16px;"><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button></div>
35+
<div tabindex="-1" class="" style="position: absolute;">
36+
<div tabindex="-1" class="ant-drawer ant-drawer-right">
37+
<div class="ant-drawer-mask"></div>
38+
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
39+
<div class="ant-drawer-content">
40+
<div class="ant-drawer-wrapper-body">
41+
<div class="ant-drawer-header">
42+
<div class="ant-drawer-title">Basic Drawer</div>
43+
</div>
44+
<div class="ant-drawer-body">
45+
<p>Some contents...</p>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
`;
54+
3155
exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
3256
<div>
3357
<div class="ant-list ant-list-split ant-list-bordered">
@@ -38,7 +62,7 @@ exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
3862
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
3963
<div class="ant-list-item-meta-content">
4064
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4>
41-
<div class="ant-list-item-meta-description">Progresser AFX</div>
65+
<div class="ant-list-item-meta-description">Progresser XTech</div>
4266
</div>
4367
</div>
4468
<ul class="ant-list-item-action">
@@ -50,7 +74,7 @@ exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
5074
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
5175
<div class="ant-list-item-meta-content">
5276
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4>
53-
<div class="ant-list-item-meta-description">Progresser AFX</div>
77+
<div class="ant-list-item-meta-description">Progresser XTech</div>
5478
</div>
5579
</div>
5680
<ul class="ant-list-item-action">

‎components/drawer/demo/basic-right.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ Basic drawer.
2020
:closable="false"
2121
@close="onClose"
2222
:visible="visible"
23+
:maskClosable="false"
24+
:afterVisibleChange="afterVisibleChange"
2325
>
2426
<p>Some contents...</p>
2527
<p>Some contents...</p>
@@ -35,6 +37,9 @@ Basic drawer.
3537
};
3638
},
3739
methods: {
40+
afterVisibleChange(val) {
41+
console.log('visible', val)
42+
},
3843
showDrawer() {
3944
this.visible = true;
4045
},

‎components/drawer/demo/form-in-drawer.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Use form in drawer with submit button.
1717
:width="720"
1818
@close="onClose"
1919
:visible="visible"
20-
:wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
20+
:bodyStyle="{paddingBottom: '80px'}"
2121
>
2222
<a-form :form="form" layout="vertical" hideRequiredMark>
2323
<a-row :gutter="16">
@@ -116,13 +116,14 @@ Use form in drawer with submit button.
116116
<div
117117
:style="{
118118
position: 'absolute',
119-
left: 0,
119+
right: 0,
120120
bottom: 0,
121121
width: '100%',
122122
borderTop: '1px solid #e9e9e9',
123123
padding: '10px 16px',
124124
background: '#fff',
125125
textAlign: 'right',
126+
zIndex: 1,
126127
}"
127128
>
128129
<a-button :style="{marginRight: '8px'}" @click="onClose">

‎components/drawer/demo/index.vue

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Placement from './placement';
44
import UserProfile from './user-profile';
55
import MultiLevelDrawer from './multi-level-drawer';
66
import FormInDrawer from './form-in-drawer';
7+
import RenderInCurrent from './render-in-current';
78
// import CustomPaging from './customPaging'
89
// import CustomArrows from './customArrows'
910
@@ -20,21 +21,21 @@ const md = {
2021
2122
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
2223
23-
* 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
24-
* 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
24+
- 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
25+
- 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
2526
2627
## 代码演示
2728
`,
2829
us: `# Drawer
29-
Panel slides from screen edge.
30+
A panel which slides in from the edge of the screen.
3031
3132
## When To Use
3233
33-
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
34+
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
3435
35-
* Use a Form to create or edit a set of information.
36-
* Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
37-
* When a same Form is needed in multiple places.
36+
- Use a Form to create or edit a set of information.
37+
- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
38+
- When the same Form is needed in multiple places.
3839
## Examples
3940
`,
4041
};
@@ -53,6 +54,7 @@ export default {
5354
<FormInDrawer />
5455
<UserProfile />
5556
<MultiLevelDrawer />
57+
<RenderInCurrent />
5658
<api>
5759
<CN slot="cn" />
5860
<US />

‎components/drawer/demo/multi-level-drawer.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<us>
77
#### Multi-level drawer
8-
Open a new drawer on top of an existing drawer to handle multi branch tasks
8+
Open a new drawer on top of an existing drawer to handle multi branch tasks.
99
</us>
1010

1111
```tpl

‎components/drawer/demo/placement.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<us>
77
#### Custom Placement
8-
Basic drawer.
8+
The Drawer can appear from any edge of the screen.
99
</us>
1010

1111
```tpl

‎components/drawer/demo/render-in-current.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<cn>
2+
#### 渲染在当前 DOM
3+
渲染在当前 dom 里。自定义容器，查看 getContainer。
4+
</cn>
5+
6+
<us>
7+
#### Render in current dom
8+
Render in current dom. custom container, check getContainer.
9+
</us>
10+
11+
```tpl
12+
<template>
13+
<div
14+
:style="{
15+
height: '200px',
16+
overflow: 'hidden',
17+
position: 'relative',
18+
border: '1px solid #ebedf0',
19+
borderRadius: '2px',
20+
padding: '48px',
21+
textAlign: 'center',
22+
background: '#fafafa',
23+
}"
24+
>
25+
Render in this
26+
<div style="margin-top: 16px">
27+
<a-button type="primary" @click="showDrawer">
28+
Open
29+
</a-button>
30+
</div>
31+
<a-drawer
32+
title="Basic Drawer"
33+
placement="right"
34+
:closable="false"
35+
@close="onClose"
36+
:visible="visible"
37+
:getContainer="false"
38+
style="position: absolute"
39+
>
40+
<p>Some contents...</p>
41+
</a-drawer>
42+
</div>
43+
</template>
44+
<script>
45+
export default {
46+
data() {
47+
return {
48+
visible: false,
49+
};
50+
},
51+
methods: {
52+
afterVisibleChange(val) {
53+
console.log('visible', val)
54+
},
55+
showDrawer() {
56+
this.visible = true;
57+
},
58+
onClose() {
59+
this.visible = false;
60+
},
61+
},
62+
};
63+
</script>
64+
```

0 commit comments

Comments
 (0)