feat(Slideshow): Change SlideShow to wait Card exit animations to com…

…plete
Climb-social · May 19, 2016 · f3a4d09 · f3a4d09
1 parent 3fb0a1d
commit f3a4d09
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 19 deletions.
diff --git a/src/components/cards/BigScreenCard/BigScreenCard.js b/src/components/cards/BigScreenCard/BigScreenCard.js
@@ -17,6 +17,7 @@ class BigScreenCard extends React.Component {
   static propTypes = {
     ...propTypes,
     index: PropTypes.number.isRequired,
+    onLeave: PropTypes.func,
   };
 
   static defaultProps = defaultProps;
@@ -27,7 +28,14 @@ class BigScreenCard extends React.Component {
 
 
   componentWillLeave(cb) {
-    this.setState({ handleLeave: cb });
+    const { onLeave } = this.props;
+
+    const handleLeave = () => {
+      if (onLeave) onLeave();
+      cb();
+    };
+
+    this.setState({ handleLeave });
   }
 
 

diff --git a/src/components/cards/BigScreenCard/FeaturePanel.js b/src/components/cards/BigScreenCard/FeaturePanel.js
@@ -6,7 +6,7 @@ import styles from './FeaturePanel.sass';
 
 
 const featureStyleHide = {
-  opacity: spring(0.01),
+  opacity: spring(0.0),
 };
 const featureStyleShow = {
   opacity: spring(1),
@@ -36,6 +36,7 @@ export default class FeaturePanel extends React.Component {
   state = {
     featureStyle: featureStyleHide,
     bodyStyle: bodyStyleHide,
+    isLeaving: false,
   };
 
   componentDidMount() {
@@ -49,9 +50,14 @@ export default class FeaturePanel extends React.Component {
 
   componentWillUnmount() {
     clearTimeout(this.showBodyTimeout);
+    clearTimeout(this.staggeredTransitionTimeout);
   }
 
 
+  handleOnRest() {
+    if (this.state.isLeaving) this.props.onLeave();
+  }
+
   staggeredTransitionTimeout = null;
 
   transitionIn() {
@@ -60,6 +66,7 @@ export default class FeaturePanel extends React.Component {
   }
 
   transitionOut() {
+    this.setState({ isLeaving: true });
     this.hideBody();
     this.staggeredTransitionTimeout = setTimeout(() => this.hideFeature(), 250);
   }
@@ -71,15 +78,15 @@ export default class FeaturePanel extends React.Component {
 
 
   render() {
-    const { feature, children, reverse, onLeave } = this.props;
+    const { feature, children, reverse } = this.props;
     const { featureStyle, bodyStyle } = this.state;
 
     return (
       <div styleName="root">
 
         <Motion
           style={featureStyle}
-          onRest={onLeave}
+          onRest={() => this.handleOnRest()}
         >{style =>
           <div
             className={styles[`feature-${reverse ? 'right' : 'left'}`]}

diff --git a/src/components/cards/BigScreenCard/Panel.js b/src/components/cards/BigScreenCard/Panel.js
@@ -9,7 +9,9 @@ class Panel extends React.Component {
 
   componentWillUpdate({ onLeave: nextOnLeave }) {
     const { onLeave: currentOnLeave } = this.props;
-    if (!currentOnLeave && nextOnLeave) nextOnLeave();
+    if (!currentOnLeave && nextOnLeave) {
+      setTimeout(nextOnLeave, 0);
+    }
   }
 
   render() {

diff --git a/src/components/layouts/SlideshowLayout/SlideshowLayout.js b/src/components/layouts/SlideshowLayout/SlideshowLayout.js
@@ -40,37 +40,63 @@ export default class SlideshowLayout extends React.Component {
   };
 
   componentDidMount() {
-    this.checkStartTimer();
-    // setTimeout(() => this.stopTimer(), 4000);
+    this.timerCheck();
   }
 
   componentDidUpdate() {
-    this.checkStartTimer();
+    this.timerCheck();
   }
 
   componentWillUnmount() {
-    this.stopTimer();
+    this.timerStop();
   }
 
 
-  checkStartTimer() {
-    if (!this.timer && this.props.items.length) this.startTimer();
+  getNextItemIndex() {
+    const { items } = this.props;
+    const { currentIndex } = this.state;
+    return currentIndex >= items.length - 1 ? 0 : currentIndex + 1;
+  }
+
+
+  timerCheck() {
+    if (!this.timer && this.props.items.length) this.timerStart();
   }
 
-  startTimer() {
+  timerStart() {
     const { duration } = this.props;
-    this.timer = setInterval(() => this.showNextItem(), duration);
+    this.timer = setTimeout(() => this.timerTick(), duration);
   }
 
-  stopTimer() {
-    clearInterval(this.timer);
+  timerStop() {
+    clearTimeout(this.timer);
     this.timer = null;
   }
 
-  showNextItem() {
-    const { items } = this.props;
-    const { currentIndex } = this.state;
-    this.setState({ currentIndex: currentIndex >= items.length - 1 ? 0 : currentIndex + 1 });
+  timerReset() {
+    this.timerStop();
+    this.timerStart();
+  }
+
+  timerTick() {
+    if (!this.state.isInTransition) {
+      this.setState({
+        isInTransition: true,
+        show: false,
+      });
+    }
+  }
+
+  handleCardLeave() {
+    if (this.state.isInTransition) {
+      setTimeout(() =>
+        this.setState({
+          isInTransition: false,
+          show: true,
+          currentIndex: this.getNextItemIndex(),
+        }), 0);
+      this.timerStart();
+    }
   }
 
 
@@ -87,6 +113,7 @@ export default class SlideshowLayout extends React.Component {
           <Card
             key={currentItem.id}
             index={currentIndex}
+            onLeave={() => this.handleCardLeave()}
             {...currentItem}
           />
         : null}