fix(ripple): setState warning when unmounting the component (#112)

Author: lucasecdb

packages/ripple/index.js

@@ -9,6 +9,8 @@ const withRipple = (WrappedComponent) => {
 
     foundation_ = null;
 
+    isMounted_ = true;
+
     state = {
       classList: new Set(),
       style: {},
@@ -23,6 +25,7 @@ const withRipple = (WrappedComponent) => {
 
     componentWillUnmount() {
       if (this.foundation_) {
+        this.isMounted_ = false;
         this.foundation_.destroy();
       }
     }
@@ -41,9 +44,17 @@ const withRipple = (WrappedComponent) => {
         isUnbounded: () => this.props.unbounded,
         isSurfaceActive: () => instance[MATCHES](':active'),
         isSurfaceDisabled: () => this.props.disabled,
-        addClass: (className) =>
-          this.setState({classList: this.state.classList.add(className)}),
+        addClass: (className) => {
+          if (!this.isMounted_) {
+            return;
+          }
+          this.setState({classList: this.state.classList.add(className)});
+        },
         removeClass: (className) => {
+          if (!this.isMounted_) {
+            return;
+          }
+
           const {classList} = this.state;
           classList.delete(className);
           this.setState({classList});
@@ -109,6 +120,10 @@ const withRipple = (WrappedComponent) => {
     }
 
     updateCssVariable = (varName, value) => {
+      if (!this.isMounted_) {
+        return;
+      }
+
       const updatedStyle = Object.assign({}, this.state.style);
       updatedStyle[varName] = value;
       this.setState({style: updatedStyle});

test/unit/ripple/index.test.js

@@ -182,7 +182,17 @@ test('#adapter.addClass adds a class to the root element', () => {
       .hasClass('test-class'));
 });
 
-test('#adapter.removeClass adds a class to the root element', () => {
+test('#adapter.addClass does not add class if isMounted is false', () => {
+  const wrapper = mount(<DivRipple />);
+  wrapper.instance().isMounted_ = false;
+  wrapper.instance().foundation_.adapter_.addClass('test-class');
+  assert.isFalse(
+    wrapper.update()
+      .find('.ripple-test-component')
+      .hasClass('test-class'));
+});
+
+test('#adapter.removeClass removes a class to the root element', () => {
   const wrapper = mount(<DivRipple />);
   wrapper.instance().foundation_.adapter_.addClass('test-class');
 
@@ -195,12 +205,33 @@ test('#adapter.removeClass adds a class to the root element', () => {
       .hasClass('test-class'));
 });
 
+test('#adapter.removeClass removes a class to the root element', () => {
+  const wrapper = mount(<DivRipple />);
+  wrapper.instance().foundation_.adapter_.addClass('test-class');
+
+  wrapper.instance().isMounted_ = false;
+  wrapper.update();
+  wrapper.instance().foundation_.adapter_.removeClass('test-class');
+
+  assert.isTrue(
+    wrapper.update()
+      .find('.ripple-test-component')
+      .hasClass('test-class'));
+});
+
 test('#adapter.updateCssVariable updates style', () => {
   const wrapper = mount(<DivRipple />);
   wrapper.instance().foundation_.adapter_.updateCssVariable('color', 'blue');
   assert.equal(wrapper.state().style.color, 'blue');
 });
 
+test('#adapter.updateCssVariable does not update style if isMounted_ is false', () => {
+  const wrapper = mount(<DivRipple />);
+  wrapper.instance().isMounted_ = false;
+  wrapper.instance().foundation_.adapter_.updateCssVariable('color', 'blue');
+  assert.notEqual(wrapper.state().style.color, 'blue');
+});
+
 test('#adapter.registerDocumentInteractionHandler triggers handler on document scroll', () => {
   const wrapper = mount(<DivRipple />);
   const testHandler = td.func();