update drawer test

This commit is contained in:
jljsj33 2018-07-20 16:02:42 +08:00 committed by 偏右
parent 57a2fc667e
commit 2cd863929a
5 changed files with 25 additions and 13 deletions

View File

@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Drawer closable is false 1`] = ` exports[`Drawer closable is false 1`] = `
<div> <div
class=""
>
<div <div
class="ant-drawer ant-drawer-right" class="ant-drawer ant-drawer-right"
> >
@ -31,7 +33,9 @@ exports[`Drawer closable is false 1`] = `
`; `;
exports[`Drawer destroyOnClose is true 1`] = ` exports[`Drawer destroyOnClose is true 1`] = `
<div> <div
class=""
>
<div <div
class="ant-drawer ant-drawer-right" class="ant-drawer ant-drawer-right"
> >
@ -69,7 +73,9 @@ exports[`Drawer destroyOnClose is true 1`] = `
`; `;
exports[`Drawer have a title 1`] = ` exports[`Drawer have a title 1`] = `
<div> <div
class=""
>
<div <div
class="ant-drawer ant-drawer-right" class="ant-drawer ant-drawer-right"
> >
@ -116,7 +122,9 @@ exports[`Drawer have a title 1`] = `
`; `;
exports[`Drawer render correctly 1`] = ` exports[`Drawer render correctly 1`] = `
<div> <div
class=""
>
<div <div
class="ant-drawer ant-drawer-right" class="ant-drawer ant-drawer-right"
> >

View File

@ -10,7 +10,9 @@ exports[`Drawer render correctly 1`] = `
open open
</span> </span>
</button> </button>
<div> <div
class=""
>
<div <div
class="ant-drawer ant-drawer-right ant-drawer-open" class="ant-drawer ant-drawer-right ant-drawer-open"
> >

View File

@ -107,8 +107,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
}); });
} }
onDestoryTransitionEnd = () => { onDestoryTransitionEnd = () => {
const { destroyOnClose, visible } = this.props; const isDestroyOnClose = this.getDestoryOnClose();
const isDestroyOnClose = destroyOnClose && !visible;
if (!isDestroyOnClose) { if (!isDestroyOnClose) {
return; return;
} }
@ -117,20 +116,23 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
this.forceUpdate(); this.forceUpdate();
} }
} }
getDestoryOnClose = () => (this.props.destroyOnClose && !this.props.visible);
renderBody = () => { renderBody = () => {
if (this.destoryClose && !this.props.visible) { if (this.destoryClose && !this.props.visible) {
return null; return null;
} }
this.destoryClose = false; this.destoryClose = false;
const { destroyOnClose, visible, placement } = this.props; const { placement } = this.props;
const containerStyle: React.CSSProperties = placement === 'left' const containerStyle: React.CSSProperties = placement === 'left'
|| placement === 'right' ? { || placement === 'right' ? {
overflow: 'auto', overflow: 'auto',
height: '100%', height: '100%',
} : {}; } : {};
const isDestroyOnClose = destroyOnClose && !visible; const isDestroyOnClose = this.getDestoryOnClose();
if (isDestroyOnClose) { if (isDestroyOnClose) {
// 增加透明渐变,跟关闭的动画时间相同,在关闭后删除子元素; // Increase the opacity transition, delete children after closing.
containerStyle.opacity = 0; containerStyle.opacity = 0;
containerStyle.transition = 'opacity .3s'; containerStyle.transition = 'opacity .3s';
} }

View File

@ -28,7 +28,7 @@
&-left { &-left {
&.@{dawer-prefix-cls}-open { &.@{dawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper { .@{dawer-prefix-cls}-content-wrapper {
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); box-shadow: @shadow-1-right;
} }
} }
} }
@ -40,7 +40,7 @@
} }
&.@{dawer-prefix-cls}-open { &.@{dawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper { .@{dawer-prefix-cls}-content-wrapper {
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); box-shadow: @shadow-1-left;
} }
} }
} }

View File

@ -59,7 +59,7 @@
"rc-checkbox": "~2.1.5", "rc-checkbox": "~2.1.5",
"rc-collapse": "~1.9.0", "rc-collapse": "~1.9.0",
"rc-dialog": "~7.1.0", "rc-dialog": "~7.1.0",
"rc-drawer": "~1.6.1", "rc-drawer": "~1.6.2",
"rc-dropdown": "~2.2.0", "rc-dropdown": "~2.2.0",
"rc-editor-mention": "^1.0.2", "rc-editor-mention": "^1.0.2",
"rc-form": "^2.1.0", "rc-form": "^2.1.0",