[Browser] Expose a slideUpdateHeight hook

oliviertassinari · Apr 16, 2017 · cabd521 · cabd521
1 parent 3eff5cc
commit cabd521
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 8 deletions.
diff --git a/docs/src/demo/DemoAnimateHeight.js b/docs/src/demo/DemoAnimateHeight.js
@@ -1,6 +1,7 @@
 // @flow weak
 
-import React from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import SwipeableViews from 'react-swipeable-views';
 
 const styles = {
@@ -24,6 +25,9 @@ const styles = {
   slide4: {
     backgroundColor: '#FEA900',
   },
+  button: {
+    marginTop: 14,
+  },
 };
 
 const list = [];
@@ -36,6 +40,37 @@ for (let i = 0; i < 30; i += 1) {
   );
 }
 
+class Slide4 extends PureComponent {
+  static contextTypes = {
+    swipeableViews: PropTypes.object.isRequired,
+  };
+
+  state = {
+    large: false,
+  };
+
+  componentDidUpdate() {
+    this.context.swipeableViews.slideUpdateHeight();
+  }
+
+  handleClick = () => {
+    this.setState(() => ({
+      large: !this.state.large,
+    }));
+  };
+
+  render() {
+    return (
+      <div style={Object.assign({}, styles.slide, styles.slide4)}>
+        {list.slice(0, this.state.large ? 8 : 3)}
+        <button onClick={this.handleClick} type="button" style={styles.button}>
+          {this.state.large ? 'Collaspe' : 'Expand'}
+        </button>
+      </div>
+    );
+  }
+}
+
 const DemoAnimateHeight = () => {
   return (
     <SwipeableViews animateHeight>
@@ -51,9 +86,7 @@ const DemoAnimateHeight = () => {
       <div style={Object.assign({}, styles.slide, styles.slide3)}>
         {list.slice(0, 7)}
       </div>
-      <div style={Object.assign({}, styles.slide, styles.slide4)}>
-        {list.slice(0, 3)}
-      </div>
+      <Slide4 />
     </SwipeableViews>
   );
 };

diff --git a/packages/react-swipeable-views/src/SwipeableViews.js b/packages/react-swipeable-views/src/SwipeableViews.js
@@ -389,8 +389,24 @@ class SwipeableViews extends Component {
     resistance: false,
   };
 
+  static childContextTypes = {
+    swipeableViews: PropTypes.shape({
+      slideUpdateHeight: PropTypes.func,
+    }),
+  };
+
   state = {};
 
+  getChildContext() {
+    return {
+      swipeableViews: {
+        slideUpdateHeight: () => {
+          this.updateHeight();
+        },
+      },
+    };
+  }
+
   componentWillMount() {
     if (process.env.NODE_ENV !== 'production') {
       checkIndexBounds(this.props);
@@ -469,6 +485,7 @@ class SwipeableViews extends Component {
   startIndex = 0;
   transitionListener = null;
   touchMoveListener = null;
+  activeSlide = null;
 
   handleSwipeStart = (event) => {
     const { axis } = this.props;
@@ -768,9 +785,9 @@ class SwipeableViews extends Component {
     }
   };
 
-  updateHeight(node) {
-    if (node !== null) {
-      const child = node.children[0];
+  updateHeight() {
+    if (this.activeSlide !== null) {
+      const child = this.activeSlide.children[0];
       if (child !== undefined && child.offsetHeight !== undefined &&
         this.state.heightLatest !== child.offsetHeight) {
         this.setState({
@@ -899,7 +916,10 @@ We are expecting a valid React Element`);
               hidden = false;
 
               if (animateHeight) {
-                ref = (node) => this.updateHeight(node);
+                ref = (node) => {
+                  this.activeSlide = node;
+                  this.updateHeight();
+                };
                 slideStyle.overflowY = 'hidden';
               }
             }