Remove legacy context (#645)

oliviertassinari · May 30, 2021 · 4c258a2 · 4c258a2 · vishwajeetv · Jun 18, 2021
1 parent 90d606b
commit 4c258a2
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 85 deletions.
diff --git a/docs/src/pages/demos/DemoAnimateHeight.js b/docs/src/pages/demos/DemoAnimateHeight.js
@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import SwipeableViews from 'react-swipeable-views';
+import SwipeableViews, { SwipeableViewsContext } from 'react-swipeable-views';
 
 const styles = {
   slide: {
@@ -35,12 +34,15 @@ for (let i = 0; i < 30; i += 1) {
 }
 
 class Slide4 extends PureComponent {
+  static contextType = SwipeableViewsContext;
+
   state = {
     large: false,
   };
 
   componentDidUpdate() {
-    this.context.swipeableViews.slideUpdateHeight();
+    const { slideUpdateHeight } = this.context;
+    slideUpdateHeight();
   }
 
   handleClick = () => {
@@ -52,6 +54,12 @@ class Slide4 extends PureComponent {
   render() {
     return (
       <div style={Object.assign({}, styles.slide, styles.slide4)}>
+        <SwipeableViewsContext.Consumer>
+          {value => {
+            this.context = value;
+            return null;
+          }}
+        </SwipeableViewsContext.Consumer>
         {list.slice(0, this.state.large ? 8 : 3)}
         <button onClick={this.handleClick} type="button" style={styles.button}>
           {this.state.large ? 'Collaspe' : 'Expand'}
@@ -61,10 +69,6 @@ class Slide4 extends PureComponent {
   }
 }
 
-Slide4.contextTypes = {
-  swipeableViews: PropTypes.object.isRequired,
-};
-
 function DemoAnimateHeight() {
   return (
     <SwipeableViews animateHeight enableMouseEvents>

diff --git a/packages/react-swipeable-views/src/SwipeableViews.js b/packages/react-swipeable-views/src/SwipeableViews.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
 import {
@@ -197,6 +197,12 @@ export function findNativeHandler(params) {
   });
 }
 
+export const SwipeableViewsContext = React.createContext();
+
+if (process.env.NODE_ENV !== 'production') {
+  SwipeableViewsContext.displayName = 'SwipeableViewsContext';
+}
+
 class SwipeableViews extends React.Component {
   rootNode = null;
 
@@ -251,16 +257,6 @@ class SwipeableViews extends React.Component {
     this.setIndexCurrent(props.index);
   }
 
-  getChildContext() {
-    return {
-      swipeableViews: {
-        slideUpdateHeight: () => {
-          this.updateHeight();
-        },
-      },
-    };
-  }
-
   componentDidMount() {
     // Subscribe to transition end events.
     this.transitionListener = addEventListener(this.containerNode, 'transitionend', event => {
@@ -327,6 +323,14 @@ class SwipeableViews extends React.Component {
     clearTimeout(this.firstRenderTimeout);
   }
 
+  getSwipeableViewsContext() {
+    return {
+      slideUpdateHeight: () => {
+        this.updateHeight();
+      },
+    };
+  }
+
   setIndexCurrent(indexCurrent) {
     if (!this.props.animateTransitions && this.indexCurrent !== indexCurrent) {
       this.handleTransitionEnd();
@@ -785,56 +789,58 @@ So animateHeight is most likely having no effect at all.`,
     }
 
     return (
-      <div
-        ref={this.setRootNode}
-        style={Object.assign({}, axisProperties.root[axis], style)}
-        {...other}
-        {...touchEvents}
-        {...mouseEvents}
-        onScroll={this.handleScroll}
-      >
+      <SwipeableViewsContext.Provider value={this.getSwipeableViewsContext()}>
         <div
-          ref={this.setContainerNode}
-          style={Object.assign({}, containerStyle, styles.container, containerStyleProp)}
-          className="react-swipeable-view-container"
+          ref={this.setRootNode}
+          style={Object.assign({}, axisProperties.root[axis], style)}
+          {...other}
+          {...touchEvents}
+          {...mouseEvents}
+          onScroll={this.handleScroll}
         >
-          {React.Children.map(children, (child, indexChild) => {
-            if (renderOnlyActive && indexChild !== indexLatest) {
-              return null;
-            }
-
-            warning(
-              React.isValidElement(child),
-              `react-swipeable-view: one of the children provided is invalid: ${child}.
-We are expecting a valid React Element`,
-            );
-
-            let ref;
-            let hidden = true;
-
-            if (indexChild === indexLatest) {
-              hidden = false;
-
-              if (animateHeight) {
-                ref = this.setActiveSlide;
-                slideStyle.overflowY = 'hidden';
+          <div
+            ref={this.setContainerNode}
+            style={Object.assign({}, containerStyle, styles.container, containerStyleProp)}
+            className="react-swipeable-view-container"
+          >
+            {React.Children.map(children, (child, indexChild) => {
+              if (renderOnlyActive && indexChild !== indexLatest) {
+                return null;
               }
-            }
-
-            return (
-              <div
-                ref={ref}
-                style={slideStyle}
-                className={slideClassName}
-                aria-hidden={hidden}
-                data-swipeable="true"
-              >
-                {child}
-              </div>
-            );
-          })}
+
+              warning(
+                React.isValidElement(child),
+                `react-swipeable-view: one of the children provided is invalid: ${child}.
+  We are expecting a valid React Element`,
+              );
+
+              let ref;
+              let hidden = true;
+
+              if (indexChild === indexLatest) {
+                hidden = false;
+
+                if (animateHeight) {
+                  ref = this.setActiveSlide;
+                  slideStyle.overflowY = 'hidden';
+                }
+              }
+
+              return (
+                <div
+                  ref={ref}
+                  style={slideStyle}
+                  className={slideClassName}
+                  aria-hidden={hidden}
+                  data-swipeable="true"
+                >
+                  {child}
+                </div>
+              );
+            })}
+          </div>
         </div>
-      </div>
+      </SwipeableViewsContext.Provider>
     );
   }
 }
@@ -1018,10 +1024,4 @@ SwipeableViews.defaultProps = {
   resistance: false,
 };
 
-SwipeableViews.childContextTypes = {
-  swipeableViews: PropTypes.shape({
-    slideUpdateHeight: PropTypes.func,
-  }),
-};
-
 export default SwipeableViews;
diff --git a/packages/react-swipeable-views/src/SwipeableViews.test.js b/packages/react-swipeable-views/src/SwipeableViews.test.js
@@ -201,10 +201,15 @@ describe('SwipeableViews', () => {
         </SwipeableViews>,
         { disableLifecycleMethods: true },
       );
-
-      assert.include(wrapper.childAt(0).props().style, {
-        transition: 'all 0s ease 0s',
-      });
+      assert.include(
+        wrapper
+          .childAt(0)
+          .childAt(0)
+          .props().style,
+        {
+          transition: 'all 0s ease 0s',
+        },
+      );
     });
   });
 
@@ -605,10 +610,16 @@ describe('SwipeableViews', () => {
         );
 
         assert.strictEqual(wrapper.text(), 'slide n°2');
-        assert.shallowDeepEqual(wrapper.childAt(0).props().style, {
-          transition: 'all 0s ease 0s',
-          transform: undefined,
-        });
+        assert.shallowDeepEqual(
+          wrapper
+            .childAt(0)
+            .childAt(0)
+            .props().style,
+          {
+            transition: 'all 0s ease 0s',
+            transform: undefined,
+          },
+        );
       });
 
       it('should render all the children during the second render', () => {
@@ -653,10 +664,16 @@ describe('SwipeableViews', () => {
         );
 
         assert.strictEqual(wrapper.text(), 'slide n°1slide n°2slide n°3slide n°4slide n°5');
-        assert.shallowDeepEqual(wrapper.childAt(0).props().style, {
-          transition: 'all 0s ease 0s',
-          transform: 'translate(-100%, 0)',
-        });
+        assert.shallowDeepEqual(
+          wrapper
+            .childAt(0)
+            .childAt(0)
+            .props().style,
+          {
+            transition: 'all 0s ease 0s',
+            transform: 'translate(-100%, 0)',
+          },
+        );
       });
     });
   });

diff --git a/packages/react-swipeable-views/src/index.js b/packages/react-swipeable-views/src/index.js
@@ -1,3 +1 @@
-import SwipeableViews from './SwipeableViews';
-
-export default SwipeableViews;
+export { default, SwipeableViewsContext } from './SwipeableViews';