Merge d5ce8d1 into f9785b2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-displayable",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "main": "src/index.js",
   "homepage": "https://github.com/mfrachet/rn-displayable",

src/__tests__/displayable.spec.js

@@ -55,4 +55,22 @@ describe('makeDisplayable', () => {
       expect(wrapper.find('Animate').prop('Animation')).toEqual(SomeAnimation);
     });
   });
+
+  describe('shouldComponentUpdate', () => {
+    it('should have updated the component', () => {
+      wrapper = getWrapper();
+
+      const instance = wrapper.instance();
+
+      expect(instance.shouldComponentUpdate({ isDisplayed: true })).toBe(true);
+    });
+
+    it('shouldnt have updated the component', () => {
+      wrapper = getWrapper({ isDisplayed: true });
+
+      const instance = wrapper.instance();
+
+      expect(instance.shouldComponentUpdate({ isDisplayed: true })).toBe(false);
+    });
+  });
 });

src/__tests__/visible.spec.js

@@ -55,4 +55,22 @@ describe('makeVisible', () => {
       expect(wrapper.find('Animate').prop('Animation')).toEqual(SomeAnimation);
     });
   });
+
+  describe('shouldComponentUpdate', () => {
+    it('should have updated the component', () => {
+      wrapper = getWrapper();
+
+      const instance = wrapper.instance();
+
+      expect(instance.shouldComponentUpdate({ isVisible: true })).toBe(true);
+    });
+
+    it('shouldnt have updated the component', () => {
+      wrapper = getWrapper({ isVisible: true });
+
+      const instance = wrapper.instance();
+
+      expect(instance.shouldComponentUpdate({ isVisible: true })).toBe(false);
+    });
+  });
 });

src/displayable.js

@@ -4,12 +4,21 @@ import Animate from './animate';
 import { verifyRules } from './helpers';
 
 const makeDisplayable = (Component) => {
-  const Displayable = ({ rules, Animation, isDisplayed, ...props }) =>
-    (isDisplayed || verifyRules(rules, props) ? (
-      <Animate Animation={Animation}>
-        <Component {...props} />
-      </Animate>
-    ) : null);
+  class Displayable extends React.Component {
+    shouldComponentUpdate(nextProps) {
+      return nextProps.isDisplayed !== this.props.isDisplayed;
+    }
+
+    render() {
+      const { rules, Animation, isDisplayed, ...props } = this.props;
+
+      return (isDisplayed || verifyRules(rules, props) ? (
+        <Animate Animation={Animation}>
+          <Component {...props} />
+        </Animate>
+      ) : null);
+    }
+  }
 
   Displayable.propTypes = {
     isDisplayed: PropTypes.bool,

src/visible.js

@@ -4,15 +4,23 @@ import Animate from './animate';
 import { verifyRules } from './helpers';
 
 const makeVisible = (Component) => {
-  const Visible = ({ rules, Animation, isVisible, style, ...props }) => {
-    const visibilityStyle = { display: isVisible || verifyRules(rules, props) ? 'flex' : 'none' };
+  class Visible extends React.Component {
+    shouldComponentUpdate(nextProps) {
+      return nextProps.isVisible !== this.props.isVisible;
+    }
+
+    render() {
+      const { rules, Animation, isVisible, style, ...props } = this.props;
+      const visibilityStyle = { display: isVisible || verifyRules(rules, props) ? 'flex' : 'none' };
+
+      return (
+        <Animate Animation={Animation}>
+          <Component style={{ ...style, ...visibilityStyle }} {...props} />
+        </Animate>
+      );
+    }
+  }
 
-    return (
-      <Animate Animation={Animation}>
-        <Component style={{ ...style, ...visibilityStyle }} {...props} />
-      </Animate>
-    );
-  };
   Visible.propTypes = {
     isVisible: PropTypes.bool,
     rules: PropTypes.arrayOf(PropTypes.func),