Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Commit 36e6316

Browse files
author
Matt Goo
committed
fix(drawer): initialize foundation if props.open updates (#427)
1 parent c2fa3a3 commit 36e6316

File tree

5 files changed

+89
-6
lines changed

5 files changed

+89
-6
lines changed

packages/drawer/index.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,18 @@ class Drawer extends React.Component {
4242
state = {classList: new Set()};
4343

4444
componentDidMount() {
45-
const {dismissible, modal, open} = this.props;
45+
const {open} = this.props;
46+
this.initFoundation();
47+
if (open && this.foundation_) {
48+
this.foundation_.open();
49+
}
50+
}
51+
52+
initFoundation = () => {
53+
const {dismissible, modal} = this.props;
54+
if (this.foundation_) {
55+
this.foundation_.destroy();
56+
}
4657
if (dismissible) {
4758
this.foundation_ = new MDCDismissibleDrawerFoundation(this.adapter);
4859
this.foundation_.init();
@@ -51,15 +62,17 @@ class Drawer extends React.Component {
5162
this.foundation_ = new MDCModalDrawerFoundation(this.adapter);
5263
this.foundation_.init();
5364
}
54-
55-
if (open && this.foundation_) {
56-
this.foundation_.open();
57-
}
5865
}
5966

6067
componentDidUpdate(prevProps) {
6168
const {dismissible, modal, open} = this.props;
62-
if (!(dismissible || modal)) return;
69+
const changedToModal = prevProps.modal !== this.props.modal;
70+
const changedToDismissible = prevProps.dismissible !== this.props.dismissible;
71+
if (!dismissible && !modal) return;
72+
73+
if (changedToModal || changedToDismissible) {
74+
this.initFoundation();
75+
}
6376

6477
if (open !== prevProps.open) {
6578
open ? this.foundation_.open() : this.foundation_.close();
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import DrawerTest from './DrawerTest';
3+
4+
class PermanentToModalDrawerScreenshotTest extends React.Component {
5+
6+
state = {
7+
isPhone: window.innerWidth < 599,
8+
};
9+
10+
componentDidMount() {
11+
window.addEventListener('resize', this.updateDrawerVariant);
12+
}
13+
14+
shouldComponentUpdate(_, nextState) {
15+
if (nextState.isPhone === this.state.isPhone) {
16+
return false;
17+
}
18+
return true;
19+
}
20+
21+
componentWillUnmount() {
22+
window.removeEventListener('resize', this.updateDrawerVariant);
23+
}
24+
25+
updateDrawerVariant = () => {
26+
const isPhone = window.innerWidth < 599;
27+
this.setState({isPhone});
28+
}
29+
30+
render() {
31+
if (this.state.isPhone) {
32+
return <DrawerTest open={false} modal title='Modal Drawer' />;
33+
}
34+
return <DrawerTest hideNavigationIcon title='Permanent Drawer' />;
35+
}
36+
};
37+
38+
export default PermanentToModalDrawerScreenshotTest;

test/screenshot/drawer/variants.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export default [
44
'modal',
55
'permanentBelowTopAppBar',
66
'dismissibleBelowTopAppBar',
7+
'permanentToModal',
78
];

test/screenshot/golden.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,6 @@
3737
"drawer/permanent": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561",
3838
"drawer/dismissible": "6ea0638441e0e6df3c97028136239498a31bba206253a01d114431eda20d1060",
3939
"drawer/modal": "11d4ad79b8c4e672952cbb5dc3f7deb810e17fad00dc29ba7cba81b0aacb72fa",
40+
"drawer/permanentToModal": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561",
4041
"typography": "c5e87d672d8c05ca3b61c0df4971eabe3c6a6a1f24a9b98f71f55a23360c498a"
4142
}

test/unit/drawer/index.test.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,36 @@ test('when props.open updates to false from true, #foundation.close is called wh
4949
td.verify(wrapper.instance().foundation_.close(), {times: 1});
5050
});
5151

52+
test('when changes from permanent to modal drawer with no foundation, creates a foundation', () => {
53+
const wrapper = shallow(<Drawer />);
54+
assert.notExists(wrapper.instance().foundation_);
55+
wrapper.setProps({modal: true});
56+
assert.exists(wrapper.instance().foundation_);
57+
});
58+
59+
test('when changes from permanent to dismissible drawer with no foundation, creates a foundation', () => {
60+
const wrapper = shallow(<Drawer />);
61+
assert.notExists(wrapper.instance().foundation_);
62+
wrapper.setProps({dismissible: true});
63+
assert.exists(wrapper.instance().foundation_);
64+
});
65+
66+
test('when the drawer changes from dismissible to modal the foundation changes ', () => {
67+
const wrapper = shallow(<Drawer dismissible />);
68+
const originalFoundation = wrapper.instance().foundation_;
69+
wrapper.setProps({modal: true});
70+
assert.notEqual(wrapper.instance().foundation_, originalFoundation);
71+
assert.exists(wrapper.instance().foundation_);
72+
});
73+
74+
test('when the drawer changes from dismissible to modal the original foundation calls destroy', () => {
75+
const wrapper = shallow(<Drawer dismissible />);
76+
const destroy = td.func();
77+
wrapper.instance().foundation_ = {destroy};
78+
wrapper.setProps({modal: true});
79+
td.verify(destroy(), {times: 1});
80+
});
81+
5282
test('#componentWillUnmount destroys foundation', () => {
5383
const wrapper = shallow(<Drawer dismissible />);
5484
const foundation = wrapper.instance().foundation_;

0 commit comments

Comments
 (0)