test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 20:49:14 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

fix: delete drawer in child and re-render, no push started

Browse Source
This commit is contained in:
jljsj 2019-07-17 19:55:59 +08:00
parent a9a24d0d39
commit d4c90d4a3b
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/drawer/index.tsx
View File

@ -63,9 +63,19 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
push: false, push: false,
}; };
parentDrawer: Drawer; parentDrawer: Drawer | null;
destroyClose: boolean; destroyClose: boolean;
public componentDidMount() {
// fix: delete drawer in child and re-render, no push started.
// <Drawer>{show && <Drawer />}</Drawer>
const { visible } = this.props;
if (visible && this.parentDrawer) {
this.parentDrawer.push();
}
}
public componentDidUpdate(preProps: DrawerProps) { public componentDidUpdate(preProps: DrawerProps) {
const { visible } = this.props; const { visible } = this.props;
if (preProps.visible !== visible && this.parentDrawer) { if (preProps.visible !== visible && this.parentDrawer) {
@ -77,6 +87,14 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
} }
} }
public componentWillUnmount() {
// unmount drawer in child, clear push.
if (this.parentDrawer) {
this.parentDrawer.pull();
this.parentDrawer = null;
}
}
push = () => { push = () => {
this.setState({ this.setState({
push: true, push: true,
@ -186,7 +204,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
); );
}; };
// render Provider for Multi-level drawe // render Provider for Multi-level drawer
renderProvider = (value: Drawer) => { renderProvider = (value: Drawer) => {
const { const {
prefixCls, prefixCls,

7
components/drawer/style/drawer.less
View File

@ -11,10 +11,10 @@
z-index: @zindex-modal; z-index: @zindex-modal;
width: 0%; width: 0%;
height: 100%; height: 100%;
transition: transform @animation-duration-slow @ease-base-out;
> * { > * {
transition: transform @animation-duration-slow @ease-base-in, transition: transform @animation-duration-slow @ease-base-out,
box-shadow @animation-duration-slow @ease-base-in; box-shadow @animation-duration-slow @ease-base-out;
} }
&-content-wrapper { &-content-wrapper {
@ -197,7 +197,6 @@
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow; transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
} }
&-open { &-open {
transition: transform @animation-duration-slow @ease-base-out;
&-content { &-content {
box-shadow: @shadow-2; box-shadow: @shadow-2;
} }