mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
fix: Nest Drawer default open show order (#37767)
* chore: bump drawer * docs: Drawer test demo * test: Update snapshot * docs: Update demo * chore: fix nest style * chore: trigger CI * chore: modify bundle size
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
b093690028
commit
f4859202f5
@ -2973,6 +2973,330 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/drawer/demo/scroll-debug.md extend context correctly 1`] = `
|
||||||
|
<div
|
||||||
|
style="position: relative; z-index: 999999;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 8px;"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-switch-handle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
|
>
|
||||||
|
Drawer
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 8px;"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-switch-handle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
|
>
|
||||||
|
Drawer2
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 8px;"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-switch-handle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
|
>
|
||||||
|
Modal
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-switch-handle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
|
>
|
||||||
|
Modal2
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-mask"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
data-sentinel="start"
|
||||||
|
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-content-wrapper"
|
||||||
|
style="width: 378px; transform: translateX(-180px);"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-modal="true"
|
||||||
|
class="ant-drawer-content"
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-wrapper-body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-header"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-header-title"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="Close"
|
||||||
|
class="ant-drawer-close"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="close"
|
||||||
|
class="anticon anticon-close"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="close"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<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 00203 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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-title"
|
||||||
|
>
|
||||||
|
Drawer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-body"
|
||||||
|
>
|
||||||
|
Some contents...
|
||||||
|
<div
|
||||||
|
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-mask"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
data-sentinel="start"
|
||||||
|
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-content-wrapper"
|
||||||
|
style="width: 378px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-modal="true"
|
||||||
|
class="ant-drawer-content"
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-wrapper-body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-header"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-header-title"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="Close"
|
||||||
|
class="ant-drawer-close"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="close"
|
||||||
|
class="anticon anticon-close"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="close"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<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 00203 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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-title"
|
||||||
|
>
|
||||||
|
Drawer Sub
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-body"
|
||||||
|
>
|
||||||
|
Sub contents...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
data-sentinel="end"
|
||||||
|
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
data-sentinel="end"
|
||||||
|
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-mask"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
data-sentinel="start"
|
||||||
|
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-content-wrapper"
|
||||||
|
style="width: 378px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-modal="true"
|
||||||
|
class="ant-drawer-content"
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-wrapper-body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-header"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-header-title"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="Close"
|
||||||
|
class="ant-drawer-close"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="close"
|
||||||
|
class="anticon anticon-close"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="close"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<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 00203 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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-title"
|
||||||
|
>
|
||||||
|
Drawer2
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-drawer-body"
|
||||||
|
>
|
||||||
|
Some contents...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
data-sentinel="end"
|
||||||
|
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/drawer/demo/size.md extend context correctly 1`] = `
|
exports[`renders ./components/drawer/demo/size.md extend context correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -311,23 +311,95 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/drawer/demo/scroll-debug.md correctly 1`] = `
|
||||||
|
<div
|
||||||
|
style="position: relative; z-index: 999999;"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-drawer ant-drawer-right ant-drawer-inline"
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
style="position: absolute;"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
class="ant-space-item"
|
||||||
data-sentinel="start"
|
style="margin-right: 8px;"
|
||||||
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
>
|
||||||
tabindex="0"
|
<button
|
||||||
/>
|
aria-checked="false"
|
||||||
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
class="ant-switch-handle"
|
||||||
data-sentinel="end"
|
|
||||||
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
|
||||||
tabindex="0"
|
|
||||||
/>
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
|
>
|
||||||
|
Drawer
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 8px;"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-switch-handle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
|
>
|
||||||
|
Drawer2
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 8px;"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-switch-handle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
|
>
|
||||||
|
Modal
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-switch-handle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
|
>
|
||||||
|
Modal2
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
75
components/drawer/demo/scroll-debug.md
Normal file
75
components/drawer/demo/scroll-debug.md
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
---
|
||||||
|
order: 999
|
||||||
|
title:
|
||||||
|
zh-CN: 滚动锁定调试
|
||||||
|
en-US: Scroll Debug
|
||||||
|
debug: true
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
当 Modal 和 Drawer 共同作用时的滚动锁定调试。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Scroll lock debug with Modal & Drawer.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Switch, Space, Drawer, Modal } from 'antd';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [drawer, setDrawer] = useState(false);
|
||||||
|
const [drawer2, setDrawer2] = useState(false);
|
||||||
|
const [modal, setModal] = useState(false);
|
||||||
|
const [modal2, setModal2] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ position: 'relative', zIndex: 999999 }}>
|
||||||
|
<Space>
|
||||||
|
<Switch
|
||||||
|
checkedChildren="Drawer"
|
||||||
|
unCheckedChildren="Drawer"
|
||||||
|
checked={drawer}
|
||||||
|
onChange={() => setDrawer(!drawer)}
|
||||||
|
/>
|
||||||
|
<Switch
|
||||||
|
checkedChildren="Drawer2"
|
||||||
|
unCheckedChildren="Drawer2"
|
||||||
|
checked={drawer2}
|
||||||
|
onChange={() => setDrawer2(!drawer2)}
|
||||||
|
/>
|
||||||
|
<Switch
|
||||||
|
checkedChildren="Modal"
|
||||||
|
unCheckedChildren="Modal"
|
||||||
|
checked={modal}
|
||||||
|
onChange={() => setModal(!modal)}
|
||||||
|
/>
|
||||||
|
<Switch
|
||||||
|
checkedChildren="Modal2"
|
||||||
|
unCheckedChildren="Modal2"
|
||||||
|
checked={modal2}
|
||||||
|
onChange={() => setModal2(!modal2)}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
<Drawer title="Drawer" open={drawer}>
|
||||||
|
Some contents...
|
||||||
|
<Drawer title="Drawer Sub" open={drawer}>
|
||||||
|
Sub contents...
|
||||||
|
</Drawer>
|
||||||
|
</Drawer>
|
||||||
|
<Drawer title="Drawer2" open={drawer2}>
|
||||||
|
Some contents...
|
||||||
|
</Drawer>
|
||||||
|
<Modal title="Modal" open={modal}>
|
||||||
|
Some contents...
|
||||||
|
</Modal>
|
||||||
|
<Modal title="Modal2" open={modal2}>
|
||||||
|
Some contents...
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
```
|
||||||
@ -53,7 +53,9 @@
|
|||||||
|
|
||||||
&-enter,
|
&-enter,
|
||||||
&-appear {
|
&-appear {
|
||||||
transform: translateX(-100%);
|
&-start {
|
||||||
|
transform: translateX(-100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
@ -75,7 +77,9 @@
|
|||||||
|
|
||||||
&-enter,
|
&-enter,
|
||||||
&-appear {
|
&-appear {
|
||||||
transform: translateX(100%);
|
&-start {
|
||||||
|
transform: translateX(100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
@ -97,7 +101,9 @@
|
|||||||
|
|
||||||
&-enter,
|
&-enter,
|
||||||
&-appear {
|
&-appear {
|
||||||
transform: translateY(-100%);
|
&-start {
|
||||||
|
transform: translateY(-100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
@ -119,7 +125,9 @@
|
|||||||
|
|
||||||
&-enter,
|
&-enter,
|
||||||
&-appear {
|
&-appear {
|
||||||
transform: translateY(100%);
|
&-start {
|
||||||
|
transform: translateY(100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
|
|||||||
@ -129,7 +129,7 @@
|
|||||||
"rc-checkbox": "~2.3.0",
|
"rc-checkbox": "~2.3.0",
|
||||||
"rc-collapse": "~3.4.2",
|
"rc-collapse": "~3.4.2",
|
||||||
"rc-dialog": "~8.9.0",
|
"rc-dialog": "~8.9.0",
|
||||||
"rc-drawer": "~5.1.0",
|
"rc-drawer": "~6.0.0",
|
||||||
"rc-dropdown": "~4.0.0",
|
"rc-dropdown": "~4.0.0",
|
||||||
"rc-field-form": "~1.27.0",
|
"rc-field-form": "~1.27.0",
|
||||||
"rc-image": "~5.8.0",
|
"rc-image": "~5.8.0",
|
||||||
@ -332,7 +332,7 @@
|
|||||||
"bundlesize": [
|
"bundlesize": [
|
||||||
{
|
{
|
||||||
"path": "./dist/antd.min.js",
|
"path": "./dist/antd.min.js",
|
||||||
"maxSize": "282 kB"
|
"maxSize": "283 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./dist/antd.min.css",
|
"path": "./dist/antd.min.css",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user