fix(drawer): initialize foundation if props.open updates (#427)

Author: Matt Goo

packages/drawer/index.js

@@ -42,7 +42,18 @@ class Drawer extends React.Component {
   state = {classList: new Set()};
 
   componentDidMount() {
-    const {dismissible, modal, open} = this.props;
+    const {open} = this.props;
+    this.initFoundation();
+    if (open && this.foundation_) {
+      this.foundation_.open();
+    }
+  }
+
+  initFoundation = () => {
+    const {dismissible, modal} = this.props;
+    if (this.foundation_) {
+      this.foundation_.destroy();
+    }
     if (dismissible) {
       this.foundation_ = new MDCDismissibleDrawerFoundation(this.adapter);
       this.foundation_.init();
@@ -51,15 +62,17 @@ class Drawer extends React.Component {
       this.foundation_ = new MDCModalDrawerFoundation(this.adapter);
       this.foundation_.init();
     }
-
-    if (open && this.foundation_) {
-      this.foundation_.open();
-    }
   }
 
   componentDidUpdate(prevProps) {
     const {dismissible, modal, open} = this.props;
-    if (!(dismissible || modal)) return;
+    const changedToModal = prevProps.modal !== this.props.modal;
+    const changedToDismissible = prevProps.dismissible !== this.props.dismissible;
+    if (!dismissible && !modal) return;
+
+    if (changedToModal || changedToDismissible) {
+      this.initFoundation();
+    }
 
     if (open !== prevProps.open) {
       open ? this.foundation_.open() : this.foundation_.close();

test/screenshot/drawer/permanentToModal.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import DrawerTest from './DrawerTest';
+
+class PermanentToModalDrawerScreenshotTest extends React.Component {
+
+  state = {
+    isPhone: window.innerWidth < 599,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.updateDrawerVariant);
+  }
+
+  shouldComponentUpdate(_, nextState) {
+    if (nextState.isPhone === this.state.isPhone) {
+      return false;
+    }
+    return true;
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateDrawerVariant);
+  }
+
+  updateDrawerVariant = () => {
+    const isPhone = window.innerWidth < 599;
+    this.setState({isPhone});
+  }
+
+  render() {
+    if (this.state.isPhone) {
+      return <DrawerTest open={false} modal title='Modal Drawer' />;
+    }
+    return <DrawerTest hideNavigationIcon title='Permanent Drawer' />;
+  }
+};
+
+export default PermanentToModalDrawerScreenshotTest;

test/screenshot/drawer/variants.js

@@ -4,4 +4,5 @@ export default [
   'modal',
   'permanentBelowTopAppBar',
   'dismissibleBelowTopAppBar',
+  'permanentToModal',
 ];

test/screenshot/golden.json

@@ -37,5 +37,6 @@
   "drawer/permanent": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561",
   "drawer/dismissible": "6ea0638441e0e6df3c97028136239498a31bba206253a01d114431eda20d1060",
   "drawer/modal": "11d4ad79b8c4e672952cbb5dc3f7deb810e17fad00dc29ba7cba81b0aacb72fa",
+  "drawer/permanentToModal": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561",
   "typography": "c5e87d672d8c05ca3b61c0df4971eabe3c6a6a1f24a9b98f71f55a23360c498a"
 }

test/unit/drawer/index.test.js

@@ -49,6 +49,36 @@ test('when props.open updates to false from true, #foundation.close is called wh
   td.verify(wrapper.instance().foundation_.close(), {times: 1});
 });
 
+test('when changes from permanent to modal drawer with no foundation, creates a foundation', () => {
+  const wrapper = shallow(<Drawer />);
+  assert.notExists(wrapper.instance().foundation_);
+  wrapper.setProps({modal: true});
+  assert.exists(wrapper.instance().foundation_);
+});
+
+test('when changes from permanent to dismissible drawer with no foundation, creates a foundation', () => {
+  const wrapper = shallow(<Drawer />);
+  assert.notExists(wrapper.instance().foundation_);
+  wrapper.setProps({dismissible: true});
+  assert.exists(wrapper.instance().foundation_);
+});
+
+test('when the drawer changes from dismissible to modal the foundation changes ', () => {
+  const wrapper = shallow(<Drawer dismissible />);
+  const originalFoundation = wrapper.instance().foundation_;
+  wrapper.setProps({modal: true});
+  assert.notEqual(wrapper.instance().foundation_, originalFoundation);
+  assert.exists(wrapper.instance().foundation_);
+});
+
+test('when the drawer changes from dismissible to modal the original foundation calls destroy', () => {
+  const wrapper = shallow(<Drawer dismissible />);
+  const destroy = td.func();
+  wrapper.instance().foundation_ = {destroy};
+  wrapper.setProps({modal: true});
+  td.verify(destroy(), {times: 1});
+});
+
 test('#componentWillUnmount destroys foundation', () => {
   const wrapper = shallow(<Drawer dismissible />);
   const foundation = wrapper.instance().foundation_;