mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 11:08:45 +08:00
💄 Drawer close icon should scroll with content (#14030)
* 💄 Drawer close icon should scroll with content like its title close #13811 * ✅ fix snapshots
This commit is contained in:
偏右
GitHub
parent
23e8bc93f2
commit
5c36f9f61d
@ -21,12 +21,12 @@ exports[`Drawer className is test_drawer 1`] = `
|
||||
class="ant-drawer-wrapper-body"
|
||||
style="overflow:auto;height:100%;opacity:0;transition:opacity .3s"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<span
|
||||
class="ant-drawer-close-x"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-close"
|
||||
@ -45,8 +45,8 @@ exports[`Drawer className is test_drawer 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
@ -113,12 +113,12 @@ exports[`Drawer destroyOnClose is true 1`] = `
|
||||
class="ant-drawer-wrapper-body"
|
||||
style="overflow:auto;height:100%;opacity:0;transition:opacity .3s"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<span
|
||||
class="ant-drawer-close-x"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-close"
|
||||
@ -137,8 +137,8 @@ exports[`Drawer destroyOnClose is true 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
@ -180,13 +180,9 @@ exports[`Drawer have a title 1`] = `
|
||||
>
|
||||
Test Title
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<span
|
||||
class="ant-drawer-close-x"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-close"
|
||||
@ -205,8 +201,8 @@ exports[`Drawer have a title 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
@ -240,12 +236,12 @@ exports[`Drawer render correctly 1`] = `
|
||||
class="ant-drawer-wrapper-body"
|
||||
style="overflow:auto;height:100%"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<span
|
||||
class="ant-drawer-close-x"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-close"
|
||||
@ -264,8 +260,8 @@ exports[`Drawer render correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
@ -298,12 +294,12 @@ exports[`Drawer render top drawer 1`] = `
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<span
|
||||
class="ant-drawer-close-x"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-close"
|
||||
@ -322,8 +318,8 @@ exports[`Drawer render top drawer 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
|
||||
@ -30,12 +30,12 @@ exports[`Drawer render correctly 1`] = `
|
||||
class="ant-drawer-wrapper-body"
|
||||
style="overflow: auto; height: 100%;"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<span
|
||||
class="ant-drawer-close-x"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-close"
|
||||
@ -54,8 +54,8 @@ exports[`Drawer render correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
|
||||
@ -144,13 +144,37 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
|
||||
}
|
||||
};
|
||||
|
||||
renderHeader() {
|
||||
const { prefixCls, title, closable } = this.props;
|
||||
if (!title && !closable) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={`${prefixCls}-header`}>
|
||||
{title && <div className={`${prefixCls}-title`}>{title}</div>}
|
||||
{this.renderCloseIcon()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderCloseIcon() {
|
||||
const { prefixCls, closable } = this.props;
|
||||
return (
|
||||
closable && (
|
||||
<button onClick={this.close} aria-label="Close" className={`${prefixCls}-close`}>
|
||||
<Icon type="close" />
|
||||
</button>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// render drawer body dom
|
||||
renderBody = () => {
|
||||
if (this.destoryClose && !this.props.visible) {
|
||||
const { placement, prefixCls, visible } = this.props;
|
||||
if (this.destoryClose && !visible) {
|
||||
return null;
|
||||
}
|
||||
this.destoryClose = false;
|
||||
const { placement } = this.props;
|
||||
|
||||
const containerStyle: React.CSSProperties =
|
||||
placement === 'left' || placement === 'right'
|
||||
@ -167,28 +191,6 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
|
||||
containerStyle.opacity = 0;
|
||||
containerStyle.transition = 'opacity .3s';
|
||||
}
|
||||
const { prefixCls, title, closable } = this.props;
|
||||
|
||||
// is have header dom
|
||||
let header;
|
||||
if (title) {
|
||||
header = (
|
||||
<div className={`${prefixCls}-header`}>
|
||||
<div className={`${prefixCls}-title`}>{title}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// is have closer button
|
||||
let closer;
|
||||
if (closable) {
|
||||
closer = (
|
||||
<button onClick={this.close} aria-label="Close" className={`${prefixCls}-close`}>
|
||||
<span className={`${prefixCls}-close-x`}>
|
||||
<Icon type="close" />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -196,8 +198,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
|
||||
style={containerStyle}
|
||||
onTransitionEnd={this.onDestoryTransitionEnd}
|
||||
>
|
||||
{header}
|
||||
{closer}
|
||||
{this.renderHeader()}
|
||||
<div className={`${prefixCls}-body`}>{this.props.children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -122,24 +122,20 @@
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
transition: color @animation-duration-slow;
|
||||
color: @text-color-secondary;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
|
||||
&-x {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
display: block;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-size: @font-size-lg;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
@ -154,6 +150,7 @@
|
||||
background: @component-background;
|
||||
color: @text-color;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-body {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user