Merge pull request #7 from emilpalsson/issue5-fix

Issue5 fix
nicolasdelfino · Sep 30, 2017 · c83f988 · c83f988
2 parents a66752b + e212c90
commit c83f988
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -50,6 +50,7 @@ defaultAnimation // optional
       {...data}
       wrapperType='div' // optional ul or whatever, defaults to div
       onClick={this.onClick.bind(this)} // optional
+      enableClickDuringAnimation //optional, boolean (default false)
       onMount={this.onMountComplete.bind(this)} // optional
       onUnmount={this.onUnmountComplete.bind(this)}> // optional
       <YourComponent {...data.content} />

diff --git a/dist/react-metro.js b/dist/react-metro.js
diff --git a/src/MetroHoc.js b/src/MetroHoc.js
@@ -3,13 +3,6 @@ import { TweenMax } from 'gsap'
 
 const MetroHoc = Component =>
   class MetroContainer extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        animating: false
-      }
-    }
-
     // longest animation in sequence
     getLongestAnimationInSequence(io) {
       return Math.max(
@@ -45,7 +38,7 @@ const MetroHoc = Component =>
     componentWillEnter(callback) {
       const el = this.container
 
-      this.setState({ animating: true })
+      this.props.sequence[this.props.itemIndex].animating = true
       TweenMax.fromTo(
         el,
         this.props.animation.in.time,
@@ -62,9 +55,9 @@ const MetroHoc = Component =>
                 'in'
               )
             ) {
-              this.setState({ animating: false })
               this.props.onMount && this.props.onMount()
             }
+            this.props.sequence[this.props.itemIndex].animating = false
             callback()
           }
         }
@@ -80,7 +73,7 @@ const MetroHoc = Component =>
         fullSequenceDuration -
         (this.props.animation.out.time + this.props.animation.out.delay)
 
-      this.setState({ animating: true })
+      this.props.sequence[this.props.itemIndex].animating = true
       TweenMax.fromTo(
         el,
         this.props.animation.out.time,
@@ -98,9 +91,9 @@ const MetroHoc = Component =>
                   'out'
                 )
               ) {
-                this.setState({ animating: false })
                 this.props.onUnmount && this.props.onUnmount()
               }
+              this.props.sequence[this.props.itemIndex].animating = false
               callback()
             }, leftOver * 1000)
           }
@@ -116,7 +109,7 @@ const MetroHoc = Component =>
         </this.props.wrapperType>
       ) : (
         <div ref={c => (this.container = c)}>
-          <Component {...this.props} animating={this.state.animating} />
+          <Component {...this.props} />
         </div>
       )
     }

diff --git a/src/index.js b/src/index.js
@@ -66,14 +66,15 @@ const metroAnimation = MetroHoc(
       return (
         <div
           onClick={() => {
+            const animating = this.props.sequence.some(s => s.animating)
             if (
               this.props.onClick &&
-              (!this.props.animating || this.props.enableClickDuringAnimation)
+              (!animating || this.props.enableClickDuringAnimation)
             ) {
               this.props.onClick(
                 this.props.content,
                 this.props.itemIndex,
-                this.props.animating
+                animating
               )
             }
           }}