Skip to content

Commit d2f52c0

Browse files
jljsj33jljsj33
committed
fix: uninstalled in open state, transform not remove
1 parent f9d4f68 commit d2f52c0

File tree

6 files changed

+149
-18
lines changed

6 files changed

+149
-18
lines changed

‎examples/assets/index.less‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,33 @@
1-
.drawer{
2-
.ant-menu-inline, .ant-menu-vertical{
1+
.drawer {
2+
.ant-menu-inline,
3+
.ant-menu-vertical {
34
border-right: none;
45
}
5-
&-content{
6+
&-content {
67
padding-top: 40px;
78
}
8-
&-left{
9-
.ant-menu-inline .ant-menu-item:after, .ant-menu-vertical .ant-menu-item:after{
9+
&-left {
10+
.ant-menu-inline .ant-menu-item:after,
11+
.ant-menu-vertical .ant-menu-item:after {
1012
left: 0;
1113
right: auto;
1214
}
1315
}
16+
}
17+
18+
.drawer-wrapper {
19+
.drawer {
20+
animation: AlphaTo .3s ease-out .3s;
21+
animation-fill-mode: forwards;
22+
opacity: 0;
23+
transform: translateX(-40px);
24+
}
25+
}
26+
27+
@keyframes AlphaTo {
28+
to {
29+
opacity: 1;
30+
left: 0;
31+
transform: translateX(0px);
32+
}
1433
}

‎examples/change-remove.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

‎examples/change-remove.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* eslint-disable no-console,react/no-multi-comp */
2+
import Drawer from 'rc-drawer-menu';
3+
import React from 'react';
4+
import ReactDom from 'react-dom';
5+
import { Menu, Icon } from 'antd';
6+
7+
import 'antd/lib/style';
8+
import 'antd/lib/menu/style';
9+
10+
import 'rc-drawer-menu/assets/index.less';
11+
import './assets/index.less';
12+
13+
const SubMenu = Menu.SubMenu;
14+
const MenuItemGroup = Menu.ItemGroup;
15+
class Demo extends React.Component {
16+
state = {
17+
show: true,
18+
}
19+
componentDidMount() {
20+
setTimeout(() => {
21+
this.setState({
22+
show: false,
23+
});
24+
}, 2000);
25+
}
26+
render() {
27+
return (
28+
<div >
29+
{this.state.show && <Drawer
30+
width="240px"
31+
wrapperClassName="drawer-wrapper"
32+
>
33+
<Menu
34+
style={{ width: 240 }}
35+
defaultSelectedKeys={['1']}
36+
defaultOpenKeys={['sub1']}
37+
mode="inline"
38+
>
39+
<SubMenu
40+
key="sub1"
41+
title={<span><Icon type="mail" /><span>Navigation One</span></span>}
42+
>
43+
<MenuItemGroup key="g1" title="Item 1">
44+
<Menu.Item key="1">Option 1</Menu.Item>
45+
<Menu.Item key="2">Option 2</Menu.Item>
46+
</MenuItemGroup>
47+
<MenuItemGroup key="g2" title="Item 2">
48+
<Menu.Item key="3">Option 3</Menu.Item>
49+
<Menu.Item key="4">Option 4</Menu.Item>
50+
</MenuItemGroup>
51+
</SubMenu>
52+
<SubMenu
53+
key="sub2"
54+
title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}
55+
>
56+
<Menu.Item key="5">Option 5</Menu.Item>
57+
<Menu.Item key="6">Option 6</Menu.Item>
58+
<SubMenu key="sub3" title="Submenu">
59+
<Menu.Item key="7">Option 7</Menu.Item>
60+
<Menu.Item key="8">Option 8</Menu.Item>
61+
</SubMenu>
62+
</SubMenu>
63+
<SubMenu
64+
key="sub4"
65+
title={<span><Icon type="setting" /><span>Navigation Three</span></span>}
66+
>
67+
<Menu.Item key="9">Option 9</Menu.Item>
68+
<Menu.Item key="10">Option 10</Menu.Item>
69+
<Menu.Item key="11">Option 11</Menu.Item>
70+
<Menu.Item key="12">Option 12</Menu.Item>
71+
</SubMenu>
72+
</Menu>
73+
</Drawer>}
74+
<div
75+
style={{
76+
width: '100%', height: 667, background: '#fff000',
77+
color: '#fff', textAlign: 'center', lineHeight: '667px',
78+
}}
79+
>
80+
内容区块
81+
</div>
82+
</div>
83+
);
84+
}
85+
}
86+
ReactDom.render(<Demo />, document.getElementById('__react-content'));

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rc-drawer-menu",
3-
"version": "0.3.2",
3+
"version": "0.3.3",
44
"description": "drawer menu animation component for react",
55
"keywords": [
66
"react",

‎src/Drawer.jsx‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ class Drawer extends React.PureComponent {
3737
levelDom = [];
3838

3939
contextDom = null;
40+
contextWrapDom = null;
4041

4142
mousePos = null;
4243

@@ -65,15 +66,24 @@ class Drawer extends React.PureComponent {
6566

6667
componentDidUpdate() {
6768
this.renderPickerComponent(this.getChildToRender());
68-
this.contextDom = this.container.getElementsByClassName(`${
69-
this.props.className}-content`)[0];
7069
}
7170

7271
componentWillUnmount() {
7372
if (this.container) {
74-
ReactDOM.unmountComponentAtNode(this.container);
75-
this.container.parentNode.removeChild(this.container);
76-
this.container = null;
73+
this.setLevelDomTransform(false, true);
74+
this.contextWrapDom.style.transform = '';
75+
this.container.style.opacity = 0;
76+
this.container.style.transition = 'opacity .3s';
77+
const removeElemetFunc = () => {
78+
this.container.removeEventListener(transitionEnd, removeElemetFunc);
79+
this.levelDom.forEach(dom => {
80+
dom.style.transition = '';
81+
});
82+
ReactDOM.unmountComponentAtNode(this.container);
83+
this.container.parentNode.removeChild(this.container);
84+
this.container = null;
85+
};
86+
this.container.addEventListener(transitionEnd, removeElemetFunc);
7787
}
7888
}
7989

@@ -207,10 +217,10 @@ class Drawer extends React.PureComponent {
207217
}
208218
}
209219

210-
setLevelDomTransform = (open) => {
220+
setLevelDomTransform = (open, openTransition) => {
211221
const { placement, levelTransition, width, onChange } = this.props;
212222
this.levelDom.forEach(dom => {
213-
if (this.isOpenChange) {
223+
if (this.isOpenChange || openTransition) {
214224
dom.style.transition = levelTransition;
215225
dom.addEventListener(transitionEnd, this.trnasitionEnd);
216226
}
@@ -270,11 +280,20 @@ class Drawer extends React.PureComponent {
270280
onTouchEnd={(e) => { this.onTouchEnd(e, true); }}
271281
onClick={(e) => { this.onTouchEnd(e, true); }}
272282
/>
273-
<div className={`${className}-content-wrapper`} style={contentStyle}>
283+
<div
284+
className={`${className}-content-wrapper`}
285+
style={contentStyle}
286+
ref={(c) => {
287+
this.contextWrapDom = c;
288+
}}
289+
>
274290
<div
275291
className={`${className}-content`}
276292
onTouchStart={this.touchStart}
277293
onTouchEnd={this.touchEnd}
294+
ref={(c) => {
295+
this.contextDom = c;
296+
}}
278297
>
279298
{children}
280299
</div>

‎tests/index.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import ReactDom from 'react-dom';
55
import expect from 'expect.js';
66
import Drawer from '../src';
77
import '../assets/index.less';
8+
import { setTimeout } from 'timers';
89

910
describe('rc-drawer-menu', () => {
1011
let div;
@@ -31,6 +32,7 @@ describe('rc-drawer-menu', () => {
3132
defaultOpen={this.props.defaultOpen}
3233
level={this.props.level}
3334
iconChild={props.iconChild}
35+
wrapperClassName={props.wrapperClassName}
3436
>
3537
<div>
3638
test
@@ -77,14 +79,17 @@ describe('rc-drawer-menu', () => {
7779
defaultOpen: true,
7880
level: [],
7981
iconChild: (<i className="a">a</i>),
82+
wrapperClassName: 'drawer-1',
8083
});
81-
const drawer = document.getElementsByClassName('drawer-content-wrapper')[0];
84+
const drawer = document.querySelectorAll('.drawer-1 .drawer-content-wrapper')[0];
8285
expect(drawer.style.transform).to.eql('translateX(60vw)');
8386
});
8487

8588
it('switch open drawer', (done) => {
86-
instance = createDrawerInstance({});
87-
const drawer = document.getElementsByClassName('drawer-content-wrapper')[0];
89+
instance = createDrawerInstance({
90+
wrapperClassName: 'drawer-2',
91+
});
92+
const drawer = document.querySelectorAll('.drawer-2 .drawer-content-wrapper')[0];
8893
console.log(drawer.style.transform);
8994
expect(drawer.style.transform).to.eql('');
9095
instance.switchMenu();
@@ -103,8 +108,9 @@ describe('rc-drawer-menu', () => {
103108
it('icon child is array', (done) => {
104109
instance = createDrawerInstance({
105110
iconChild: [<i className="a">a</i>, <i className="b">b</i>],
111+
wrapperClassName: 'drawer-3',
106112
});
107-
const icon = document.getElementsByClassName('drawer-button')[0];
113+
const icon = document.querySelectorAll('.drawer-3 .drawer-button')[0];
108114
const iconChild = icon.children[0];
109115
expect(iconChild.className).to.eql('a');
110116
instance.switchMenu();

0 commit comments

Comments
 (0)