mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +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>
|
||||
`;
|
||||
|
||||
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`] = `
|
||||
Array [
|
||||
<div
|
||||
|
||||
@ -311,23 +311,95 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/drawer/demo/scroll-debug.md correctly 1`] = `
|
||||
<div
|
||||
style="position: relative; z-index: 999999;"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right ant-drawer-inline"
|
||||
style="position: absolute;"
|
||||
tabindex="-1"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
||||
tabindex="0"
|
||||
/>
|
||||
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
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
|
||||
tabindex="0"
|
||||
/>
|
||||
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>
|
||||
`;
|
||||
|
||||
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,
|
||||
&-appear {
|
||||
transform: translateX(-100%);
|
||||
&-start {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transform: translateX(0);
|
||||
@ -75,7 +77,9 @@
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateX(100%);
|
||||
&-start {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transform: translateX(0);
|
||||
@ -97,7 +101,9 @@
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateY(-100%);
|
||||
&-start {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transform: translateY(0);
|
||||
@ -119,7 +125,9 @@
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateY(100%);
|
||||
&-start {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transform: translateY(0);
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
"rc-checkbox": "~2.3.0",
|
||||
"rc-collapse": "~3.4.2",
|
||||
"rc-dialog": "~8.9.0",
|
||||
"rc-drawer": "~5.1.0",
|
||||
"rc-drawer": "~6.0.0",
|
||||
"rc-dropdown": "~4.0.0",
|
||||
"rc-field-form": "~1.27.0",
|
||||
"rc-image": "~5.8.0",
|
||||
@ -332,7 +332,7 @@
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./dist/antd.min.js",
|
||||
"maxSize": "282 kB"
|
||||
"maxSize": "283 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/antd.min.css",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user