mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
refactor: Drawer refactor (#36672)
* chore: back part of styl * chore: all basic * test: part test case * test: part test case * test: more test case * test: update snapshot * test: demo test support * test: update snapshot * chore: adjust mock logic to inject on rc-drawer instead * test: more snapshot * chore: adjust pos * chore: back of render * test: drawer demo extends test
This commit is contained in:
二货机器人
GitHub
parent
6386431c49
commit
d422d71c1e
@ -14417,449 +14417,519 @@ exports[`ConfigProvider components Divider prefixCls 1`] = `
|
||||
|
||||
exports[`ConfigProvider components Drawer configProvider 1`] = `
|
||||
<div
|
||||
class=""
|
||||
class="config-drawer config-drawer-right config-drawer-open config-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="config-drawer config-drawer-right"
|
||||
tabindex="-1"
|
||||
class="config-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="config-drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="config-drawer-content-wrapper"
|
||||
style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
|
||||
aria-modal="true"
|
||||
class="config-drawer-content"
|
||||
role="dialog"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-content"
|
||||
class="config-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-wrapper-body"
|
||||
class="config-drawer-header config-drawer-header-close-only"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-header config-drawer-header-close-only"
|
||||
class="config-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-header-title"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="config-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="config-drawer-close"
|
||||
type="button"
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<div
|
||||
class="config-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Drawer configProvider componentDisabled 1`] = `
|
||||
<div
|
||||
class=""
|
||||
class="config-drawer config-drawer-right config-drawer-open config-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="config-drawer config-drawer-right"
|
||||
tabindex="-1"
|
||||
class="config-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="config-drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="config-drawer-content-wrapper"
|
||||
style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
|
||||
aria-modal="true"
|
||||
class="config-drawer-content"
|
||||
role="dialog"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-content"
|
||||
class="config-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-wrapper-body"
|
||||
class="config-drawer-header config-drawer-header-close-only"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-header config-drawer-header-close-only"
|
||||
class="config-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-header-title"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="config-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="config-drawer-close"
|
||||
type="button"
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<div
|
||||
class="config-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Drawer configProvider componentSize large 1`] = `
|
||||
<div
|
||||
class=""
|
||||
class="config-drawer config-drawer-right config-drawer-open config-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="config-drawer config-drawer-right"
|
||||
tabindex="-1"
|
||||
class="config-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="config-drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="config-drawer-content-wrapper"
|
||||
style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
|
||||
aria-modal="true"
|
||||
class="config-drawer-content"
|
||||
role="dialog"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-content"
|
||||
class="config-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-wrapper-body"
|
||||
class="config-drawer-header config-drawer-header-close-only"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-header config-drawer-header-close-only"
|
||||
class="config-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-header-title"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="config-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="config-drawer-close"
|
||||
type="button"
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<div
|
||||
class="config-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Drawer configProvider componentSize middle 1`] = `
|
||||
<div
|
||||
class=""
|
||||
class="config-drawer config-drawer-right config-drawer-open config-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="config-drawer config-drawer-right"
|
||||
tabindex="-1"
|
||||
class="config-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="config-drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="config-drawer-content-wrapper"
|
||||
style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
|
||||
aria-modal="true"
|
||||
class="config-drawer-content"
|
||||
role="dialog"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-content"
|
||||
class="config-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-wrapper-body"
|
||||
class="config-drawer-header config-drawer-header-close-only"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-header config-drawer-header-close-only"
|
||||
class="config-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="config-drawer-header-title"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="config-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="config-drawer-close"
|
||||
type="button"
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<div
|
||||
class="config-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Drawer configProvider virtual and dropdownMatchSelectWidth 1`] = `
|
||||
<div
|
||||
class=""
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right"
|
||||
tabindex="-1"
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content"
|
||||
role="dialog"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
class="ant-drawer-header ant-drawer-header-close-only"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header ant-drawer-header-close-only"
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Drawer normal 1`] = `
|
||||
<div
|
||||
class=""
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right"
|
||||
tabindex="-1"
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content"
|
||||
role="dialog"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
class="ant-drawer-header ant-drawer-header-close-only"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header ant-drawer-header-close-only"
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Drawer prefixCls 1`] = `
|
||||
<div
|
||||
class=""
|
||||
class="prefix-Drawer prefix-Drawer-right prefix-Drawer-open prefix-Drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="prefix-Drawer prefix-Drawer-right"
|
||||
tabindex="-1"
|
||||
class="prefix-Drawer-mask"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="prefix-Drawer-content-wrapper"
|
||||
>
|
||||
<div
|
||||
class="prefix-Drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="prefix-Drawer-content-wrapper"
|
||||
style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
|
||||
aria-modal="true"
|
||||
class="prefix-Drawer-content"
|
||||
role="dialog"
|
||||
style="width:378px"
|
||||
>
|
||||
<div
|
||||
class="prefix-Drawer-content"
|
||||
class="prefix-Drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="prefix-Drawer-wrapper-body"
|
||||
class="prefix-Drawer-header prefix-Drawer-header-close-only"
|
||||
>
|
||||
<div
|
||||
class="prefix-Drawer-header prefix-Drawer-header-close-only"
|
||||
class="prefix-Drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="prefix-Drawer-header-title"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="prefix-Drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="prefix-Drawer-close"
|
||||
type="button"
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<div
|
||||
class="prefix-Drawer-body"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Drawer-body"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import Drawer from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { render } from '../../../tests/utils';
|
||||
import { fireEvent, render } from '../../../tests/utils';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
|
||||
const DrawerTest = ({ getContainer }) => (
|
||||
@ -17,19 +18,53 @@ describe('Drawer', () => {
|
||||
mountTest(Drawer);
|
||||
rtlTest(Drawer);
|
||||
|
||||
beforeEach(() => {
|
||||
jest.useFakeTimers();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
function triggerMotion() {
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
const mask = document.querySelector('.ant-drawer-mask');
|
||||
if (mask) {
|
||||
fireEvent.animationEnd(mask);
|
||||
}
|
||||
|
||||
const panel = document.querySelector('.ant-drawer-content');
|
||||
if (panel) {
|
||||
fireEvent.animationEnd(panel);
|
||||
}
|
||||
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
}
|
||||
|
||||
it('render correctly', () => {
|
||||
const { container: wrapper } = render(
|
||||
<Drawer visible width={400} getContainer={false}>
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
triggerMotion();
|
||||
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('getContainer return undefined', () => {
|
||||
const { container: wrapper, rerender } = render(<DrawerTest getContainer={() => undefined} />);
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
|
||||
rerender(<DrawerTest getContainer={false} />);
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -39,6 +74,8 @@ describe('Drawer', () => {
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -48,6 +85,8 @@ describe('Drawer', () => {
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -57,6 +96,8 @@ describe('Drawer', () => {
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -66,15 +107,19 @@ describe('Drawer', () => {
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('className is test_drawer', () => {
|
||||
const { container: wrapper } = render(
|
||||
<Drawer destroyOnClose visible={false} className="test_drawer" getContainer={false}>
|
||||
<Drawer destroyOnClose visible className="test_drawer" getContainer={false}>
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -94,6 +139,8 @@ describe('Drawer', () => {
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -103,6 +150,8 @@ describe('Drawer', () => {
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -131,6 +180,8 @@ describe('Drawer', () => {
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
|
||||
triggerMotion();
|
||||
expect(wrapper.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -147,15 +198,4 @@ describe('Drawer', () => {
|
||||
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('should support ref', () => {
|
||||
const ref = React.createRef();
|
||||
render(
|
||||
<Drawer visible ref={ref} width={400}>
|
||||
Here is content of Drawer
|
||||
</Drawer>,
|
||||
);
|
||||
expect(typeof ref.current.push).toBe('function');
|
||||
expect(typeof ref.current.pull).toBe('function');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import Drawer from '..';
|
||||
import { fireEvent, render } from '../../../tests/utils';
|
||||
import { act, fireEvent, render } from '../../../tests/utils';
|
||||
|
||||
describe('Drawer', () => {
|
||||
const getDrawer = props => (
|
||||
@ -9,6 +9,14 @@ describe('Drawer', () => {
|
||||
</Drawer>
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
jest.useFakeTimers();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('render correctly', () => {
|
||||
const { container, asFragment, rerender } = render(getDrawer());
|
||||
expect(container.querySelector('.ant-drawer-body')).toBeTruthy();
|
||||
@ -48,54 +56,68 @@ describe('Drawer', () => {
|
||||
|
||||
it('dom should be removed after close when destroyOnClose is true', () => {
|
||||
const { container, rerender } = render(getDrawer({ destroyOnClose: true }));
|
||||
expect(container.querySelector('.ant-drawer')).toBeTruthy();
|
||||
|
||||
rerender(getDrawer({ destroyOnClose: true, visible: false }));
|
||||
const ev = new TransitionEvent('transitionend', { bubbles: true });
|
||||
ev.propertyName = 'transform';
|
||||
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeFalsy();
|
||||
expect(container.querySelector('.ant-drawer')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('dom should be existed after close when destroyOnClose is false', () => {
|
||||
const { container, rerender } = render(getDrawer());
|
||||
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
|
||||
expect(container.querySelector('.ant-drawer')).toBeTruthy();
|
||||
|
||||
rerender(getDrawer({ visible: false }));
|
||||
const ev = new TransitionEvent('transitionend', { bubbles: true });
|
||||
ev.propertyName = 'transform';
|
||||
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
|
||||
|
||||
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
|
||||
expect(container.querySelector('.ant-drawer')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('dom should be existed after close twice when getContainer is false', () => {
|
||||
const { container, rerender } = render(getDrawer({ visible: true, getContainer: false }));
|
||||
rerender(getDrawer({ visible: false, getContainer: false }));
|
||||
const ev = new TransitionEvent('transitionend', { bubbles: true });
|
||||
ev.propertyName = 'transform';
|
||||
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
|
||||
expect(container.querySelector('.ant-drawer-content')).toBeTruthy();
|
||||
|
||||
// Hide
|
||||
rerender(getDrawer({ visible: false, getContainer: false }));
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
|
||||
expect(container.querySelector('.ant-drawer-content-hidden')).toBeTruthy();
|
||||
|
||||
// Show
|
||||
rerender(getDrawer({ visible: true, getContainer: false }));
|
||||
const ev2 = new TransitionEvent('transitionend', { bubbles: true });
|
||||
ev2.propertyName = 'transform';
|
||||
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev2);
|
||||
expect(container.querySelector('.ant-drawer-content')).toBeTruthy();
|
||||
expect(container.querySelector('.ant-drawer-content-hidden')).toBeFalsy();
|
||||
|
||||
// Hide
|
||||
rerender(getDrawer({ visible: false, getContainer: false }));
|
||||
const ev3 = new TransitionEvent('transitionend', { bubbles: true });
|
||||
ev3.propertyName = 'transform';
|
||||
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev3);
|
||||
|
||||
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
|
||||
expect(container.querySelector('.ant-drawer-content-hidden')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('test afterVisibleChange', async () => {
|
||||
const afterVisibleChange = jest.fn();
|
||||
const { rerender } = render(getDrawer({ afterVisibleChange, visible: true }));
|
||||
const { container, rerender } = render(getDrawer({ afterVisibleChange, visible: true }));
|
||||
rerender(getDrawer({ afterVisibleChange, visible: false }));
|
||||
const ev = new TransitionEvent('transitionend', { bubbles: true });
|
||||
ev.propertyName = 'transform';
|
||||
fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
|
||||
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
|
||||
|
||||
expect(afterVisibleChange).toBeCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should support children ref', () => {
|
||||
const fn = jest.fn();
|
||||
|
||||
|
||||
@ -113,8 +113,10 @@ describe('Drawer', () => {
|
||||
const { container: wrapper } = render(<MultiDrawer placement="right" />);
|
||||
fireEvent.click(wrapper.querySelector('button#open_drawer'));
|
||||
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
|
||||
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
|
||||
expect(translateX).toEqual('translateX(-180px)');
|
||||
|
||||
expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
|
||||
transform: 'translateX(-180px)',
|
||||
});
|
||||
expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
|
||||
});
|
||||
|
||||
@ -122,8 +124,10 @@ describe('Drawer', () => {
|
||||
const { container: wrapper } = render(<MultiDrawer placement="left" />);
|
||||
fireEvent.click(wrapper.querySelector('button#open_drawer'));
|
||||
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
|
||||
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
|
||||
expect(translateX).toEqual('translateX(180px)');
|
||||
|
||||
expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
|
||||
transform: 'translateX(180px)',
|
||||
});
|
||||
expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
|
||||
fireEvent.click(wrapper.querySelector('.Two-level .ant-drawer-close'));
|
||||
expect(wrapper.querySelector('.childrenDrawer').innerHTML).toEqual('false');
|
||||
@ -133,8 +137,9 @@ describe('Drawer', () => {
|
||||
const { container: wrapper } = render(<MultiDrawer placement="top" />);
|
||||
fireEvent.click(wrapper.querySelector('button#open_drawer'));
|
||||
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
|
||||
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
|
||||
expect(translateX).toEqual('translateY(180px)');
|
||||
expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
|
||||
transform: 'translateY(180px)',
|
||||
});
|
||||
expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
|
||||
});
|
||||
|
||||
@ -143,11 +148,15 @@ describe('Drawer', () => {
|
||||
fireEvent.click(wrapper.querySelector('button#open_drawer'));
|
||||
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
|
||||
fireEvent.click(wrapper.querySelector('button#remove_drawer'));
|
||||
let translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
|
||||
expect(translateX).toEqual('');
|
||||
|
||||
expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
|
||||
transform: '',
|
||||
});
|
||||
|
||||
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
|
||||
translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
|
||||
expect(translateX).toEqual('translateY(180px)');
|
||||
expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
|
||||
transform: 'translateY(180px)',
|
||||
});
|
||||
expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
|
||||
});
|
||||
|
||||
@ -155,23 +164,26 @@ describe('Drawer', () => {
|
||||
const { container: wrapper } = render(<MultiDrawer push={{ distance: 256 }} />);
|
||||
fireEvent.click(wrapper.querySelector('button#open_drawer'));
|
||||
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
|
||||
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
|
||||
expect(translateX).toEqual('translateX(-256px)');
|
||||
expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
|
||||
transform: 'translateX(-256px)',
|
||||
});
|
||||
});
|
||||
|
||||
it('custom MultiDrawer push with true', () => {
|
||||
const { container: wrapper } = render(<MultiDrawer push />);
|
||||
fireEvent.click(wrapper.querySelector('button#open_drawer'));
|
||||
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
|
||||
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
|
||||
expect(translateX).toEqual('translateX(-180px)');
|
||||
expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
|
||||
transform: 'translateX(-180px)',
|
||||
});
|
||||
});
|
||||
|
||||
it('custom MultiDrawer push with false', () => {
|
||||
const { container: wrapper } = render(<MultiDrawer push={false} />);
|
||||
fireEvent.click(wrapper.querySelector('button#open_drawer'));
|
||||
fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
|
||||
const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
|
||||
expect(translateX).toEqual('');
|
||||
expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
|
||||
transform: '',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,66 +2,76 @@
|
||||
|
||||
exports[`Drawer render correctly 1`] = `
|
||||
<div
|
||||
class=""
|
||||
class="ant-drawer ant-drawer-right ant-drawer-inline"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right"
|
||||
tabindex="-1"
|
||||
class="ant-drawer-mask ant-drawer-mask-motion-leave ant-drawer-mask-motion-leave-start ant-drawer-mask-motion"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="width: 378px; transform: translateX(100%);"
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content ant-drawer-panel-motion-right-leave ant-drawer-panel-motion-right-leave-start ant-drawer-panel-motion-right"
|
||||
role="dialog"
|
||||
style="width: 378px;"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
class="ant-drawer-header ant-drawer-header-close-only"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header ant-drawer-header-close-only"
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Here is content of Drawer
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Here is content of Drawer
|
||||
</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>
|
||||
`;
|
||||
|
||||
@ -23,6 +23,95 @@ exports[`renders ./components/drawer/demo/config-provider.md extend context corr
|
||||
Open
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open"
|
||||
style="position: absolute;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
|
||||
role="dialog"
|
||||
style="width: 378px;"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
ConfigProvider
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
<p>
|
||||
Some contents...
|
||||
</p>
|
||||
<p>
|
||||
Some contents...
|
||||
</p>
|
||||
<p>
|
||||
Some contents...
|
||||
</p>
|
||||
</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>
|
||||
`;
|
||||
|
||||
@ -32,7 +121,7 @@ exports[`renders ./components/drawer/demo/extra.md extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
@ -150,7 +239,9 @@ exports[`renders ./components/drawer/demo/form-in-drawer.md extend context corre
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs />
|
||||
<defs>
|
||||
<style />
|
||||
</defs>
|
||||
<path
|
||||
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
|
||||
/>
|
||||
@ -193,7 +284,7 @@ exports[`renders ./components/drawer/demo/placement.md extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
@ -298,7 +389,7 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
|
||||
>
|
||||
Render in this
|
||||
<div
|
||||
style="margin-top:16px"
|
||||
style="margin-top: 16px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
@ -310,50 +401,60 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class=""
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||
style="position: absolute;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right"
|
||||
style="position:absolute"
|
||||
tabindex="-1"
|
||||
class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-active ant-drawer-mask-motion"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
|
||||
role="dialog"
|
||||
style="width: 378px;"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
class="ant-drawer-title"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-title"
|
||||
>
|
||||
Basic Drawer
|
||||
</div>
|
||||
Basic Drawer
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
<p>
|
||||
Some contents...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
<p>
|
||||
Some contents...
|
||||
</p>
|
||||
</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>
|
||||
`;
|
||||
@ -364,7 +465,7 @@ exports[`renders ./components/drawer/demo/size.md extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
@ -310,50 +310,25 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class=""
|
||||
class="ant-drawer ant-drawer-right ant-drawer-inline"
|
||||
style="position:absolute"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right"
|
||||
style="position:absolute"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-title"
|
||||
>
|
||||
Basic Drawer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
<p>
|
||||
Some contents...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
aria-hidden="true"
|
||||
data-sentinel="start"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
data-sentinel="end"
|
||||
style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import { extendTest } from '../../../tests/shared/demoTest';
|
||||
|
||||
extendTest('drawer');
|
||||
18
components/drawer/__tests__/demo-extend.test.tsx
Normal file
18
components/drawer/__tests__/demo-extend.test.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import * as React from 'react';
|
||||
import { extendTest } from '../../../tests/shared/demoTest';
|
||||
|
||||
jest.mock('rc-drawer', () => {
|
||||
const Drawer = jest.requireActual('rc-drawer');
|
||||
const MockDrawer = Drawer.default;
|
||||
return (props: any) => {
|
||||
const newProps = {
|
||||
...props,
|
||||
open: true,
|
||||
};
|
||||
return <MockDrawer {...newProps} />;
|
||||
};
|
||||
});
|
||||
|
||||
extendTest('drawer', {
|
||||
testingLib: true,
|
||||
});
|
||||
@ -1,18 +1,14 @@
|
||||
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
||||
import classNames from 'classnames';
|
||||
import RcDrawer from 'rc-drawer';
|
||||
import type { DrawerProps as RcDrawerProps } from 'rc-drawer';
|
||||
import type { CSSMotionProps } from 'rc-motion';
|
||||
import * as React from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { NoFormStyle } from '../form/context';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
import { tuple } from '../_util/type';
|
||||
|
||||
type DrawerRef = {
|
||||
push(): void;
|
||||
pull(): void;
|
||||
};
|
||||
|
||||
const DrawerContext = React.createContext<DrawerRef | null>(null);
|
||||
|
||||
type EventType =
|
||||
| React.KeyboardEvent<HTMLDivElement>
|
||||
| React.MouseEvent<HTMLDivElement | HTMLButtonElement>;
|
||||
@ -70,208 +66,132 @@ export interface DrawerProps {
|
||||
|
||||
const defaultPushState: PushState = { distance: 180 };
|
||||
|
||||
const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
|
||||
(
|
||||
function Drawer({
|
||||
width,
|
||||
height,
|
||||
size = 'default',
|
||||
closable = true,
|
||||
mask = true,
|
||||
push = defaultPushState,
|
||||
closeIcon = <CloseOutlined />,
|
||||
bodyStyle,
|
||||
drawerStyle,
|
||||
className,
|
||||
visible,
|
||||
children,
|
||||
zIndex,
|
||||
style,
|
||||
title,
|
||||
headerStyle,
|
||||
onClose,
|
||||
footer,
|
||||
footerStyle,
|
||||
prefixCls: customizePrefixCls,
|
||||
getContainer: customizeGetContainer,
|
||||
extra,
|
||||
afterVisibleChange,
|
||||
...rest
|
||||
}: DrawerProps) {
|
||||
const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
|
||||
|
||||
const getContainer =
|
||||
// 有可能为 false，所以不能直接判断
|
||||
customizeGetContainer === undefined && getPopupContainer
|
||||
? () => getPopupContainer(document.body)
|
||||
: customizeGetContainer;
|
||||
|
||||
const closeIconNode = closable && (
|
||||
<button type="button" onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
|
||||
{closeIcon}
|
||||
</button>
|
||||
);
|
||||
|
||||
function renderHeader() {
|
||||
if (!title && !closable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(`${prefixCls}-header`, {
|
||||
[`${prefixCls}-header-close-only`]: closable && !title && !extra,
|
||||
})}
|
||||
style={headerStyle}
|
||||
>
|
||||
<div className={`${prefixCls}-header-title`}>
|
||||
{closeIconNode}
|
||||
{title && <div className={`${prefixCls}-title`}>{title}</div>}
|
||||
</div>
|
||||
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderFooter() {
|
||||
if (!footer) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const footerClassName = `${prefixCls}-footer`;
|
||||
return (
|
||||
<div className={footerClassName} style={footerStyle}>
|
||||
{footer}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const drawerClassName = classNames(
|
||||
{
|
||||
width,
|
||||
height,
|
||||
size = 'default',
|
||||
closable = true,
|
||||
placement = 'right' as placementType,
|
||||
maskClosable = true,
|
||||
mask = true,
|
||||
level = null,
|
||||
keyboard = true,
|
||||
push = defaultPushState,
|
||||
closeIcon = <CloseOutlined />,
|
||||
bodyStyle,
|
||||
drawerStyle,
|
||||
className,
|
||||
visible: propsVisible,
|
||||
forceRender,
|
||||
children,
|
||||
zIndex,
|
||||
destroyOnClose,
|
||||
style,
|
||||
title,
|
||||
headerStyle,
|
||||
onClose,
|
||||
footer,
|
||||
footerStyle,
|
||||
prefixCls: customizePrefixCls,
|
||||
getContainer: customizeGetContainer,
|
||||
extra,
|
||||
afterVisibleChange,
|
||||
...rest
|
||||
'no-mask': !mask,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const [internalPush, setPush] = React.useState(false);
|
||||
const parentDrawer = React.useContext(DrawerContext);
|
||||
const destroyCloseRef = React.useRef<boolean>(false);
|
||||
className,
|
||||
);
|
||||
|
||||
const [load, setLoad] = React.useState(false);
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
// ============================ Size ============================
|
||||
const mergedWidth = React.useMemo(() => width ?? (size === 'large' ? 736 : 378), [width, size]);
|
||||
const mergedHeight = React.useMemo(
|
||||
() => height ?? (size === 'large' ? 736 : 378),
|
||||
[height, size],
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (propsVisible) {
|
||||
setLoad(true);
|
||||
} else {
|
||||
setVisible(false);
|
||||
}
|
||||
}, [propsVisible]);
|
||||
// =========================== Motion ===========================
|
||||
const maskMotion: CSSMotionProps = {
|
||||
motionName: getTransitionName(prefixCls, 'mask-motion'),
|
||||
motionAppear: true,
|
||||
motionEnter: true,
|
||||
motionLeave: true,
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (load && propsVisible) {
|
||||
setVisible(true);
|
||||
}
|
||||
}, [load, propsVisible]);
|
||||
const panelMotion: RcDrawerProps['motion'] = motionPlacement => ({
|
||||
motionName: getTransitionName(prefixCls, `panel-motion-${motionPlacement}`),
|
||||
motionAppear: true,
|
||||
motionEnter: true,
|
||||
motionLeave: true,
|
||||
});
|
||||
|
||||
const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
|
||||
const getContainer =
|
||||
// 有可能为 false，所以不能直接判断
|
||||
customizeGetContainer === undefined && getPopupContainer
|
||||
? () => getPopupContainer(document.body)
|
||||
: customizeGetContainer;
|
||||
|
||||
React.useEffect(() => {
|
||||
// fix: delete drawer in child and re-render, no push started.
|
||||
// <Drawer>{show && <Drawer />}</Drawer>
|
||||
if (propsVisible && parentDrawer) {
|
||||
parentDrawer.push();
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (parentDrawer) {
|
||||
parentDrawer.pull();
|
||||
// parentDrawer = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (parentDrawer) {
|
||||
if (visible) {
|
||||
parentDrawer.push();
|
||||
} else {
|
||||
parentDrawer.pull();
|
||||
}
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
const operations = React.useMemo(
|
||||
() => ({
|
||||
push() {
|
||||
if (push) {
|
||||
setPush(true);
|
||||
}
|
||||
},
|
||||
pull() {
|
||||
if (push) {
|
||||
setPush(false);
|
||||
}
|
||||
},
|
||||
}),
|
||||
[push],
|
||||
);
|
||||
|
||||
React.useImperativeHandle(ref, () => operations, [operations]);
|
||||
|
||||
const getOffsetStyle = () => {
|
||||
// https://github.com/ant-design/ant-design/issues/24287
|
||||
if (!visible && !mask) {
|
||||
return {};
|
||||
}
|
||||
const offsetStyle: any = {};
|
||||
if (placement === 'left' || placement === 'right') {
|
||||
const defaultWidth = size === 'large' ? 736 : 378;
|
||||
offsetStyle.width = typeof width === 'undefined' ? defaultWidth : width;
|
||||
} else {
|
||||
const defaultHeight = size === 'large' ? 736 : 378;
|
||||
offsetStyle.height = typeof height === 'undefined' ? defaultHeight : height;
|
||||
}
|
||||
return offsetStyle;
|
||||
};
|
||||
|
||||
const getRcDrawerStyle = () => {
|
||||
// get drawer push width or height
|
||||
const getPushTransform = (_placement?: placementType) => {
|
||||
let distance: number | string;
|
||||
if (typeof push === 'boolean') {
|
||||
distance = push ? defaultPushState.distance : 0;
|
||||
} else {
|
||||
distance = push!.distance;
|
||||
}
|
||||
distance = parseFloat(String(distance || 0));
|
||||
|
||||
if (_placement === 'left' || _placement === 'right') {
|
||||
return `translateX(${_placement === 'left' ? distance : -distance}px)`;
|
||||
}
|
||||
if (_placement === 'top' || _placement === 'bottom') {
|
||||
return `translateY(${_placement === 'top' ? distance : -distance}px)`;
|
||||
}
|
||||
};
|
||||
|
||||
// 当无 mask 时，将 width 应用到外层容器上
|
||||
// 解决 https://github.com/ant-design/ant-design/issues/12401 的问题
|
||||
const offsetStyle = mask ? {} : getOffsetStyle();
|
||||
return {
|
||||
zIndex,
|
||||
transform: internalPush ? getPushTransform(placement) : undefined,
|
||||
...offsetStyle,
|
||||
...style,
|
||||
};
|
||||
};
|
||||
|
||||
const closeIconNode = closable && (
|
||||
<button type="button" onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
|
||||
{closeIcon}
|
||||
</button>
|
||||
);
|
||||
|
||||
function renderHeader() {
|
||||
if (!title && !closable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(`${prefixCls}-header`, {
|
||||
[`${prefixCls}-header-close-only`]: closable && !title && !extra,
|
||||
})}
|
||||
style={headerStyle}
|
||||
>
|
||||
<div className={`${prefixCls}-header-title`}>
|
||||
{closeIconNode}
|
||||
{title && <div className={`${prefixCls}-title`}>{title}</div>}
|
||||
</div>
|
||||
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderFooter() {
|
||||
if (!footer) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const footerClassName = `${prefixCls}-footer`;
|
||||
return (
|
||||
<div className={footerClassName} style={footerStyle}>
|
||||
{footer}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// render drawer body dom
|
||||
const renderBody = () => {
|
||||
// destroyCloseRef.current =false Load the body only once by default
|
||||
if (destroyCloseRef.current && !forceRender && !propsVisible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
// =========================== Render ===========================
|
||||
return (
|
||||
<NoFormStyle status override>
|
||||
<RcDrawer
|
||||
prefixCls={prefixCls}
|
||||
onClose={onClose}
|
||||
{...rest}
|
||||
open={visible}
|
||||
mask={mask}
|
||||
push={push}
|
||||
width={mergedWidth}
|
||||
height={mergedHeight}
|
||||
rootClassName={drawerClassName}
|
||||
getContainer={getContainer}
|
||||
afterOpenChange={open => {
|
||||
afterVisibleChange?.(open);
|
||||
}}
|
||||
maskMotion={maskMotion}
|
||||
motion={panelMotion}
|
||||
rootStyle={style}
|
||||
>
|
||||
<div className={`${prefixCls}-wrapper-body`} style={{ ...drawerStyle }}>
|
||||
{renderHeader()}
|
||||
<div className={`${prefixCls}-body`} style={bodyStyle}>
|
||||
@ -279,57 +199,11 @@ const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
|
||||
</div>
|
||||
{renderFooter()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</RcDrawer>
|
||||
</NoFormStyle>
|
||||
);
|
||||
}
|
||||
|
||||
const drawerClassName = classNames(
|
||||
{
|
||||
'no-mask': !mask,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
);
|
||||
const offsetStyle = mask ? getOffsetStyle() : {};
|
||||
|
||||
return (
|
||||
<DrawerContext.Provider value={operations}>
|
||||
<NoFormStyle status override>
|
||||
<RcDrawer
|
||||
handler={false}
|
||||
{...{
|
||||
placement,
|
||||
prefixCls,
|
||||
maskClosable,
|
||||
level,
|
||||
keyboard,
|
||||
children,
|
||||
onClose,
|
||||
forceRender,
|
||||
...rest,
|
||||
}}
|
||||
{...offsetStyle}
|
||||
open={visible || propsVisible}
|
||||
showMask={mask}
|
||||
style={getRcDrawerStyle()}
|
||||
className={drawerClassName}
|
||||
getContainer={getContainer}
|
||||
afterVisibleChange={open => {
|
||||
if (open) {
|
||||
destroyCloseRef.current = false;
|
||||
} else if (destroyOnClose) {
|
||||
destroyCloseRef.current = true;
|
||||
setLoad(false);
|
||||
}
|
||||
afterVisibleChange?.(open);
|
||||
}}
|
||||
>
|
||||
{renderBody()}
|
||||
</RcDrawer>
|
||||
</NoFormStyle>
|
||||
</DrawerContext.Provider>
|
||||
);
|
||||
},
|
||||
);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Drawer.displayName = 'Drawer';
|
||||
}
|
||||
|
||||
@ -5,146 +5,117 @@
|
||||
@drawer-animation-ease: @ease-out-quint;
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
@drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2));
|
||||
|
||||
position: fixed;
|
||||
z-index: @zindex-modal;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
transition: width 0s ease @animation-duration-slow, height 0s ease @animation-duration-slow;
|
||||
pointer-events: none;
|
||||
inset: 0;
|
||||
|
||||
&-inline {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// ====================== Mask ======================
|
||||
&-mask {
|
||||
position: absolute;
|
||||
z-index: @zindex-modal;
|
||||
background: @modal-mask-bg;
|
||||
pointer-events: auto;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
// ==================== Content =====================
|
||||
&-content-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform @animation-duration-slow @drawer-animation-ease,
|
||||
box-shadow @animation-duration-slow @drawer-animation-ease;
|
||||
}
|
||||
z-index: @zindex-modal;
|
||||
transition: transform @animation-duration-slow;
|
||||
|
||||
.@{drawer-prefix-cls}-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
top: 0;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
width: 100%;
|
||||
transition: transform @animation-duration-slow @drawer-animation-ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
left: 0;
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
&-content-wrapper {
|
||||
left: 0;
|
||||
}
|
||||
// Placement
|
||||
.@{drawer-prefix-cls}-left & {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-right;
|
||||
}
|
||||
.@{drawer-prefix-cls}-right & {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
right: 0;
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
&-content-wrapper {
|
||||
right: 0;
|
||||
}
|
||||
.@{drawer-prefix-cls}-top & {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-left;
|
||||
}
|
||||
// https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug.
|
||||
&.no-mask {
|
||||
right: 1px;
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
.@{drawer-prefix-cls}-bottom & {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-top,
|
||||
&-bottom {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
height: 100%;
|
||||
transition: transform @animation-duration-slow @drawer-animation-ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-top {
|
||||
top: 0;
|
||||
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-down;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
bottom: 0;
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
&-content-wrapper {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-up;
|
||||
}
|
||||
|
||||
&.no-mask {
|
||||
bottom: 1px;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask {
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition: none;
|
||||
animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @drawer-title-font-size;
|
||||
line-height: @drawer-title-line-height;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: @drawer-bg;
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
pointer-events: auto;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Placement
|
||||
.@{drawer-prefix-cls}-left & {
|
||||
box-shadow: @shadow-1-right;
|
||||
}
|
||||
|
||||
.@{drawer-prefix-cls}-right & {
|
||||
box-shadow: @shadow-1-left;
|
||||
}
|
||||
|
||||
.@{drawer-prefix-cls}-top & {
|
||||
box-shadow: @shadow-1-down;
|
||||
}
|
||||
|
||||
.@{drawer-prefix-cls}-bottom & {
|
||||
box-shadow: @shadow-1-up;
|
||||
}
|
||||
}
|
||||
|
||||
// @drawer-footer-padding-vertical: @modal-footer-padding-vertical;
|
||||
// @drawer-footer-padding-horizontal: @modal-footer-padding-horizontal;
|
||||
// @drawer-header-close-size: 56px;
|
||||
// ===================== Panel ======================
|
||||
&-wrapper-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @drawer-bg;
|
||||
}
|
||||
|
||||
// Header
|
||||
&-header {
|
||||
display: flex;
|
||||
flex: 0;
|
||||
align-items: center;
|
||||
padding: @drawer-header-padding;
|
||||
font-size: @drawer-title-font-size;
|
||||
line-height: @drawer-title-line-height;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-extra {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
&-close {
|
||||
@ -172,78 +143,272 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @drawer-header-padding;
|
||||
color: @text-color;
|
||||
background: @drawer-bg;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-close-only {
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrapper-body {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&-title {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @drawer-title-font-size;
|
||||
line-height: @drawer-title-line-height;
|
||||
}
|
||||
|
||||
// Body
|
||||
&-body {
|
||||
flex-grow: 1;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: @drawer-body-padding;
|
||||
overflow: auto;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// Footer
|
||||
&-footer {
|
||||
flex-shrink: 0;
|
||||
padding: @drawer-footer-padding-vertical @drawer-footer-padding-horizontal;
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
|
||||
&-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background-color: @modal-mask-bg;
|
||||
opacity: 0;
|
||||
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// =================== Hook Components ===================
|
||||
.@{picker-prefix-cls} {
|
||||
&-clear {
|
||||
background: @popover-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antdDrawerFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
// .@{drawer-prefix-cls} {
|
||||
// @drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2));
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// position: fixed;
|
||||
// z-index: @zindex-modal;
|
||||
// width: 0%;
|
||||
// height: 100%;
|
||||
// transition: width 0s ease @animation-duration-slow, height 0s ease @animation-duration-slow;
|
||||
|
||||
// &-content-wrapper {
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// transition: transform @animation-duration-slow @drawer-animation-ease,
|
||||
// box-shadow @animation-duration-slow @drawer-animation-ease;
|
||||
// }
|
||||
|
||||
// .@{drawer-prefix-cls}-content {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// &-left,
|
||||
// &-right {
|
||||
// top: 0;
|
||||
// width: 0%;
|
||||
// height: 100%;
|
||||
// .@{drawer-prefix-cls}-content-wrapper {
|
||||
// height: 100%;
|
||||
// }
|
||||
// &.@{drawer-prefix-cls}-open {
|
||||
// width: 100%;
|
||||
// transition: transform @animation-duration-slow @drawer-animation-ease;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-left {
|
||||
// left: 0;
|
||||
|
||||
// .@{drawer-prefix-cls} {
|
||||
// &-content-wrapper {
|
||||
// left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.@{drawer-prefix-cls}-open {
|
||||
// .@{drawer-prefix-cls}-content-wrapper {
|
||||
// box-shadow: @shadow-1-right;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-right {
|
||||
// right: 0;
|
||||
|
||||
// .@{drawer-prefix-cls} {
|
||||
// &-content-wrapper {
|
||||
// right: 0;
|
||||
// }
|
||||
// }
|
||||
// &.@{drawer-prefix-cls}-open {
|
||||
// .@{drawer-prefix-cls}-content-wrapper {
|
||||
// box-shadow: @shadow-1-left;
|
||||
// }
|
||||
// // https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug.
|
||||
// &.no-mask {
|
||||
// right: 1px;
|
||||
// transform: translateX(1px);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-top,
|
||||
// &-bottom {
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 0%;
|
||||
|
||||
// .@{drawer-prefix-cls}-content-wrapper {
|
||||
// width: 100%;
|
||||
// }
|
||||
// &.@{drawer-prefix-cls}-open {
|
||||
// height: 100%;
|
||||
// transition: transform @animation-duration-slow @drawer-animation-ease;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-top {
|
||||
// top: 0;
|
||||
|
||||
// &.@{drawer-prefix-cls}-open {
|
||||
// .@{drawer-prefix-cls}-content-wrapper {
|
||||
// box-shadow: @shadow-1-down;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-bottom {
|
||||
// bottom: 0;
|
||||
|
||||
// .@{drawer-prefix-cls} {
|
||||
// &-content-wrapper {
|
||||
// bottom: 0;
|
||||
// }
|
||||
// }
|
||||
// &.@{drawer-prefix-cls}-open {
|
||||
// .@{drawer-prefix-cls}-content-wrapper {
|
||||
// box-shadow: @shadow-1-up;
|
||||
// }
|
||||
|
||||
// &.no-mask {
|
||||
// bottom: 1px;
|
||||
// transform: translateY(1px);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask {
|
||||
// height: 100%;
|
||||
// opacity: 1;
|
||||
// transition: none;
|
||||
// animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease;
|
||||
// pointer-events: auto;
|
||||
// }
|
||||
|
||||
// &-title {
|
||||
// flex: 1;
|
||||
// margin: 0;
|
||||
// color: @heading-color;
|
||||
// font-weight: 500;
|
||||
// font-size: @drawer-title-font-size;
|
||||
// line-height: @drawer-title-line-height;
|
||||
// }
|
||||
|
||||
// &-content {
|
||||
// position: relative;
|
||||
// z-index: 1;
|
||||
// overflow: auto;
|
||||
// background-color: @drawer-bg;
|
||||
// background-clip: padding-box;
|
||||
// border: 0;
|
||||
// }
|
||||
|
||||
// &-close {
|
||||
// display: inline-block;
|
||||
// margin-right: 12px;
|
||||
// color: @modal-close-color;
|
||||
// font-weight: 700;
|
||||
// font-size: @font-size-lg;
|
||||
// font-style: normal;
|
||||
// line-height: 1;
|
||||
// text-align: center;
|
||||
// text-transform: none;
|
||||
// text-decoration: none;
|
||||
// background: transparent;
|
||||
// border: 0;
|
||||
// outline: 0;
|
||||
// cursor: pointer;
|
||||
// transition: color @animation-duration-slow;
|
||||
// text-rendering: auto;
|
||||
|
||||
// &:focus,
|
||||
// &:hover {
|
||||
// color: @icon-color-hover;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-header {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
// padding: @drawer-header-padding;
|
||||
// color: @text-color;
|
||||
// background: @drawer-bg;
|
||||
// border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
// border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
|
||||
// &-title {
|
||||
// display: flex;
|
||||
// flex: 1;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
|
||||
// &-close-only {
|
||||
// padding-bottom: 0;
|
||||
// border: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-wrapper-body {
|
||||
// display: flex;
|
||||
// flex-flow: column nowrap;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// &-body {
|
||||
// flex-grow: 1;
|
||||
// padding: @drawer-body-padding;
|
||||
// overflow: auto;
|
||||
// font-size: @font-size-base;
|
||||
// line-height: @line-height-base;
|
||||
// word-wrap: break-word;
|
||||
// }
|
||||
|
||||
// &-footer {
|
||||
// flex-shrink: 0;
|
||||
// padding: @drawer-footer-padding-vertical @drawer-footer-padding-horizontal;
|
||||
// border-top: @border-width-base @border-style-base @border-color-split;
|
||||
// }
|
||||
|
||||
// &-mask {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 0;
|
||||
// background-color: @modal-mask-bg;
|
||||
// opacity: 0;
|
||||
// transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
|
||||
// // =================== Hook Components ===================
|
||||
// .@{picker-prefix-cls} {
|
||||
// &-clear {
|
||||
// background: @popover-background;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// @keyframes antdDrawerFadeIn {
|
||||
// 0% {
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './drawer';
|
||||
@import './motion';
|
||||
@import './rtl';
|
||||
|
||||
.popover-customize-bg(@drawer-prefix-cls, @popover-background);
|
||||
|
||||
134
components/drawer/style/motion.less
Normal file
134
components/drawer/style/motion.less
Normal file
@ -0,0 +1,134 @@
|
||||
@import (reference) '../../style/themes/index';
|
||||
|
||||
@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
|
||||
|
||||
.panel-motion {
|
||||
&-enter,
|
||||
&-appear,
|
||||
&-leave {
|
||||
&-active {
|
||||
transition: all @animation-duration-slow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
// ======================== Mask ========================
|
||||
&-mask-motion {
|
||||
&-enter,
|
||||
&-appear,
|
||||
&-leave {
|
||||
&-active {
|
||||
transition: all @animation-duration-slow;
|
||||
}
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
opacity: 0;
|
||||
|
||||
&-active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-leave {
|
||||
opacity: 1;
|
||||
|
||||
&-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================= Panel ========================
|
||||
&-panel-motion {
|
||||
// Left
|
||||
&-left {
|
||||
.panel-motion();
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateX(-100%);
|
||||
|
||||
&-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translateX(0);
|
||||
|
||||
&-active {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
&-right {
|
||||
.panel-motion();
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateX(100%);
|
||||
|
||||
&-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translateX(0);
|
||||
|
||||
&-active {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Top
|
||||
&-top {
|
||||
.panel-motion();
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateY(-100%);
|
||||
|
||||
&-active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translateY(0);
|
||||
|
||||
&-active {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom
|
||||
&-bottom {
|
||||
.panel-motion();
|
||||
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateY(100%);
|
||||
|
||||
&-active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translateY(0);
|
||||
|
||||
&-active {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -127,7 +127,7 @@
|
||||
"rc-checkbox": "~2.3.0",
|
||||
"rc-collapse": "~3.3.0",
|
||||
"rc-dialog": "~8.9.0",
|
||||
"rc-drawer": "~4.4.2",
|
||||
"rc-drawer": "~5.0.0-alpha.7",
|
||||
"rc-dropdown": "~4.0.0",
|
||||
"rc-field-form": "~1.27.0",
|
||||
"rc-image": "~5.7.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import Trigger from 'rc-trigger/lib/mock';
|
||||
import { TriggerMockContext } from '../shared/demoTest';
|
||||
import { TriggerMockContext } from '../shared/demoTestContext';
|
||||
|
||||
export default React.forwardRef((props, ref) => {
|
||||
const mergedPopupVisible = React.useContext(TriggerMockContext) ?? props.popupVisible;
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
/* eslint-disable react/jsx-no-constructed-context-values */
|
||||
import * as React from 'react';
|
||||
import glob from 'glob';
|
||||
import { render } from 'enzyme';
|
||||
import { render as enzymeRender } from 'enzyme';
|
||||
import MockDate from 'mockdate';
|
||||
import moment from 'moment';
|
||||
import type { TriggerProps } from 'rc-trigger';
|
||||
import { excludeWarning } from './excludeWarning';
|
||||
import { render, act } from '../utils';
|
||||
import { TriggerMockContext } from './demoTestContext';
|
||||
|
||||
export const TriggerMockContext = React.createContext<Partial<TriggerProps> | undefined>(undefined);
|
||||
|
||||
type CheerIO = ReturnType<typeof render>;
|
||||
type CheerIO = ReturnType<typeof enzymeRender>;
|
||||
type CheerIOElement = CheerIO[0];
|
||||
// We should avoid use it in 4.0. Reopen if can not handle this.
|
||||
const USE_REPLACEMENT = false;
|
||||
@ -52,6 +51,7 @@ function ariaConvert(wrapper: CheerIO) {
|
||||
|
||||
type Options = {
|
||||
skip?: boolean | string[];
|
||||
testingLib?: boolean;
|
||||
};
|
||||
|
||||
function baseText(doInject: boolean, component: string, options: Options = {}) {
|
||||
@ -85,14 +85,29 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
|
||||
);
|
||||
}
|
||||
|
||||
const wrapper = render(Demo);
|
||||
if (options?.testingLib) {
|
||||
jest.useFakeTimers();
|
||||
|
||||
// Convert aria related content
|
||||
ariaConvert(wrapper);
|
||||
const { container } = render(Demo);
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
const { children } = container;
|
||||
const child = children.length > 1 ? children : children[0];
|
||||
expect(child).toMatchSnapshot();
|
||||
|
||||
jest.useRealTimers();
|
||||
} else {
|
||||
const wrapper = enzymeRender(Demo);
|
||||
|
||||
// Convert aria related content
|
||||
ariaConvert(wrapper);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
}
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
MockDate.reset();
|
||||
|
||||
errSpy();
|
||||
},
|
||||
);
|
||||
|
||||
7
tests/shared/demoTestContext.ts
Normal file
7
tests/shared/demoTestContext.ts
Normal file
@ -0,0 +1,7 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import * as React from 'react';
|
||||
import type { TriggerProps } from 'rc-trigger';
|
||||
|
||||
// We export context here is to avoid testing-lib inject `afterEach` in `tests/index.test.js`
|
||||
// Which breaks the circle deps
|
||||
export const TriggerMockContext = React.createContext<Partial<TriggerProps> | undefined>(undefined);
|
||||
Loading…
Reference in New Issue
Block a user