From c33feb9cd9e54a34dd59641cc7c7ab6f2d117e09 Mon Sep 17 00:00:00 2001
From: benito <benitogf@users.noreply.github.com>
Date: Sun, 19 Jan 2020 21:13:30 +0800
Subject: [PATCH] usafe component will receive props (#538)

* usafe component will receive props

* usafe component will receive props, fix lint

* use static getDerivedStateFromProps

* copy props to state

* comment out setIndexCurrent

* comment out setIndexCurrent

Co-authored-by: Jean-Paul van Houten <jeanpaulvanhouten@gmail.com>
---
 .../src/SwipeableViews.js                     | 53 ++++++++++---------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/react-swipeable-views/src/SwipeableViews.js b/packages/react-swipeable-views/src/SwipeableViews.js
index 4605d6df..86d57846 100644
--- a/packages/react-swipeable-views/src/SwipeableViews.js
+++ b/packages/react-swipeable-views/src/SwipeableViews.js
@@ -242,6 +242,7 @@ class SwipeableViews extends React.Component {
 
     this.state = {
       indexLatest: props.index,
+      childrenLatest: props.children,
       // Set to true as soon as the component is swiping.
       // It's the state counter part of this.isSwiping.
       isDragging: false,
@@ -319,32 +320,6 @@ class SwipeableViews extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { index } = nextProps;
-
-    if (typeof index === 'number' && index !== this.props.index) {
-      if (process.env.NODE_ENV !== 'production') {
-        checkIndexBounds(nextProps);
-      }
-
-      this.setIndexCurrent(index);
-      this.setState({
-        // If true, we are going to change the children. We shoudn't animate it.
-        displaySameSlide: getDisplaySameSlide(this.props, nextProps),
-        indexLatest: index,
-      });
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    // If animateHeight is on
-    // and has changed children, readjust height
-    const { animateHeight, children } = this.props;
-    if (animateHeight === true && prevProps.children !== children) {
-      this.updateHeight();
-    }
-  }
-
   componentWillUnmount() {
     this.resizeListener.remove();
     this.transitionListener.remove();
@@ -382,6 +357,32 @@ class SwipeableViews extends React.Component {
     this.updateHeight();
   };
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const { index, children } = nextProps;
+
+    if (typeof index === 'number' && index !== prevState.indexLatest) {
+      if (process.env.NODE_ENV !== 'production') {
+        checkIndexBounds(nextProps);
+      }
+
+      // this.setIndexCurrent(index);
+      // this method heavily realies on having access to the class :/
+      const fakeProps = {
+        index: prevState.indexLatest,
+        children: prevState.childrenLatest,
+      };
+      return {
+        // If true, we are going to change the children. We shoudn't animate it.
+        displaySameSlide: getDisplaySameSlide(fakeProps, nextProps),
+        childrenLatest: children,
+        indexLatest: index,
+      };
+    }
+
+    // no change to the state
+    return null;
+  }
+
   handleSwipeStart = event => {
     const { axis } = this.props;