timeout and cascade text fixes

lukesthl · Feb 16, 2018 · 8b3f932 · 8b3f932
1 parent 4bb2d71
commit 8b3f932
Show file tree

Hide file tree

Showing 23 changed files with 67 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-reveal",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "author": "Roman Nosov <rnosov@gmail.com>",
   "description": "Really simple way to add reveal on scroll animation to your React app.",
   "license": "MIT",

diff --git a/src/Reveal.js b/src/Reveal.js
@@ -20,6 +20,7 @@ const
     effect: string,
     effectOut: string,
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
@@ -40,12 +41,12 @@ const
 
 
 
-function Reveal({ children, duration, delay, count, forever, durationOut, delayOut, countOut, foreverOut, effect, effectOut, inEffect, outEffect,  ...props}) {
+function Reveal({ children, timeout, duration, delay, count, forever, durationOut, delayOut, countOut, foreverOut, effect, effectOut, inEffect, outEffect,  ...props}) {
 
   function factory(reverse) {
     return reverse
     ? effectOut ? { duration: durationOut, delay: delayOut, count: countOut, forever: foreverOut, className: effectOut, style: {} } : outEffect
-    : effect ? { duration, delay, count, forever, className: effect, style: {} } : inEffect;
+    : effect ? { duration: timeout === undefined ? duration : timeout, delay, count, forever, className: effect, style: {} } : inEffect;
   }
 
   return wrap(props, factory, children);

diff --git a/src/RevealBase.js b/src/RevealBase.js
@@ -312,7 +312,7 @@ class RevealBase extends React.Component {
   }
 
   cascade(children) {
-    let newChildren;//, reverse = false;
+    let newChildren;
     if (typeof children === 'string') {
           newChildren = children.split("").map( (ch, index) => <span key={index} style={{display: 'inline-block', whiteSpace:'pre'}}>{ch}</span> );
           //reverse = this.props.reverse;
@@ -321,23 +321,23 @@ class RevealBase extends React.Component {
           newChildren = React.Children.toArray(children);
     //if (newChildren.length === 1)
     //  return newChildren;
-    let duration = this.props[this.isOn || !this.props.outEffect ?'inEffect':'outEffect'].duration,
+    let { duration, reverse } = this.props[this.isOn || !this.props.outEffect ?'inEffect':'outEffect'],
           count = newChildren.length,
           total = duration*2;
+          //reverse = false;
     if (this.props.collapse) {
       total = parseInt(this.state.style.animationDuration, 10);
       duration = total/2;
     }
-    //total =  duration + ( this.props.cascade === true ? 1000 : this.props.cascade);
-    //let i = reverse ? count : 0;
-    let i = 0;
+    let i = reverse ? count : 0;
+    //let i = 0;
     newChildren = newChildren.map( child =>
       typeof child === 'object' && 'type' in child && typeof child.type === 'string'
       ? React.cloneElement(child,{
           style: {
             ...child.props.style,
             ...(this.props.collapse?{...this.state.style, boxSizing: void 0, height: void 0, border: void 0, padding: void 0, transition: void 0}:this.state.style),
-            animationDuration: Math.round(cascade( /*reverse ? i-- : i++ */i++,0 , count, duration, total)) + 'ms',
+            animationDuration: Math.round(cascade( reverse ? i-- : i++ /*i++*/,0 , count, duration, total)) + 'ms',
           },
           //ref: i === count? (el => this.finalEl = el) : void 0,
         })

diff --git a/src/in-and-out/Bounce.js b/src/in-and-out/Bounce.js
@@ -23,13 +23,14 @@ const
     mirror: bool,
     opposite: bool,
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
   };
 
 function Bounce({ children, out, left, right, up, down, top, bottom, mirror, opposite, forever,
-                duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
+                timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
@@ -150,7 +151,7 @@ function Bounce({ children, out, left, right, up, down, top, bottom, mirror, opp
       return animation(rule);
     }
 
-    return { make, duration, delay, forever, count, style: { animationFillMode: 'both', } };
+    return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', }, reverse: left, };
   }
 
   return context

diff --git a/src/in-and-out/Fade.js b/src/in-and-out/Fade.js
@@ -23,14 +23,15 @@ const
     mirror: bool,
     opposite: bool,
     duration: number,
+    timeout: number,
     distance: string,
     delay: number,
     count: number,
     forever: bool,
   };
 
 function Fade({ children, out, distance, left, right, up, down, top, bottom, big, mirror, opposite, forever,
-              duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
+              timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
@@ -50,7 +51,7 @@ function Fade({ children, out, distance, left, right, up, down, top, bottom, big
       );
     }
 
-    return { make, duration, delay, forever, count, style: { animationFillMode: 'both', }, reverse: left, };
+    return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', }, reverse: left, };
   }
 
   return context

diff --git a/src/in-and-out/Flip.js b/src/in-and-out/Flip.js
@@ -23,13 +23,14 @@ const
     mirror: bool,
     opposite: bool,
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
   };
 
 function Flip({ children, out, left, right, top, bottom, x, y, mirror, opposite, forever,
-              duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
+              timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
@@ -104,7 +105,7 @@ function Flip({ children, out, left, right, top, bottom, x, y, mirror, opposite,
       return(animation(rule));
     }
 
-    return { make, duration, delay, forever, count, style: { animationFillMode: 'both', backfaceVisibility: 'visible', } };
+    return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', backfaceVisibility: 'visible', } };
   }
 
   return context

diff --git a/src/in-and-out/LightSpeed.js b/src/in-and-out/LightSpeed.js
@@ -21,13 +21,14 @@ const
     mirror: bool,
     opposite: bool,
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
   };
 
 function LightSpeed({ children, out, left, right, mirror, opposite, forever,
-                    duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
+                    timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
@@ -68,7 +69,7 @@ function LightSpeed({ children, out, left, right, mirror, opposite, forever,
       return animation(rule);
     }
 
-    return { make, duration, delay, forever, count, style: { animationFillMode: 'both', } };
+    return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } };
   }
 
   return context

diff --git a/src/in-and-out/Roll.js b/src/in-and-out/Roll.js
@@ -24,13 +24,14 @@ const
     mirror: bool,
     opposite: bool,
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
   };
 
 function Roll({ children, out, left, right, up, down, top, bottom, big, mirror, opposite, forever,
-              duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
+              timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
@@ -46,7 +47,7 @@ function Roll({ children, out, left, right, up, down, top, bottom, big, mirror,
 			`);
     }
 
-    return { make, duration, delay, forever, count, style: { animationFillMode: 'both', } };
+    return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } };
   }
 
   return context

diff --git a/src/in-and-out/Rotate.js b/src/in-and-out/Rotate.js
@@ -23,13 +23,14 @@ const
     mirror: bool,
     opposite: bool,
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
   };
 
 function Rotate({ children, out, left, right, top, bottom, up, down, mirror, opposite, forever,
-                  duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
+                  timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
@@ -47,7 +48,7 @@ function Rotate({ children, out, left, right, top, bottom, up, down, mirror, opp
       `);
     }
 
-    return { make, duration, delay, forever, count, style: { animationFillMode: 'both', } };
+    return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } };
   }
 
   return context

diff --git a/src/in-and-out/Slide.js b/src/in-and-out/Slide.js
@@ -23,13 +23,14 @@ const
     mirror: bool,
     opposite: bool,
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
   };
 
 function Slide({ children, out, left, right, up, down, top, bottom, big, mirror, opposite, forever,
-              duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
+              timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
@@ -49,7 +50,7 @@ function Slide({ children, out, left, right, up, down, top, bottom, big, mirror,
       );
     }
 
-    return { make, duration, delay, forever, count, style: { animationFillMode: 'both', }, reverse: left, };
+    return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', }, reverse: left, };
   }
 
   return context

diff --git a/src/in-and-out/Zoom.js b/src/in-and-out/Zoom.js
@@ -23,13 +23,14 @@ const
     mirror: bool,
     opposite: bool,
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
   };
 
 function Zoom({ children, out, left, right, top, bottom, up, down, mirror, opposite, forever,
-              duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
+              timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
@@ -79,7 +80,7 @@ function Zoom({ children, out, left, right, top, bottom, up, down, mirror, oppos
       return animation(rule);
     }
 
-    return { make, duration, delay, forever, count, style: { animationFillMode: 'both', } };
+    return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', }, reverse: left, };
   }
 
   return context

diff --git a/src/lib/wrap.js b/src/lib/wrap.js
@@ -13,8 +13,6 @@ import RevealBase from '../RevealBase';
 export default function wrap(props, factory, children) {
   if ('in' in props)
     props.when = props.in;
-  if ('timeout' in props)
-    props.duration = props.timeout;
   if (React.Children.count(children) === 1)
     return  <RevealBase {...props} inEffect={factory(false)} outEffect={factory(true)} children={children} />
   children = React.Children.map(children, child =>

diff --git a/src/simple/Flash.js b/src/simple/Flash.js
@@ -16,6 +16,7 @@ import { animation, defaults } from '../lib/globals';
 const
   propTypes = {
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
@@ -31,15 +32,15 @@ from, 50%, to {
 }
 `;
 
-function Flash({ children, out, duration = defaults.duration, delay = defaults.delay, count = defaults.count, forever, ...props } = defaults, context = false) {
+function Flash({ children, out, timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, forever, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
     function make() {
       return animation(rule);
     }
 
-    return reverse ? false : { make, duration, delay, forever, count, style: { animationFillMode: 'both', } };
+    return reverse ? false : { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } };
   }
 
   return context

diff --git a/src/simple/HeadShake.js b/src/simple/HeadShake.js
@@ -16,6 +16,7 @@ import { animation, defaults } from '../lib/globals';
 const
   propTypes = {
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
@@ -47,15 +48,15 @@ const rule = `
 }
 `;
 
-function HeadShake({ children, out, duration = defaults.duration, delay = defaults.delay, count = defaults.count, forever, ...props } = defaults, context = false) {
+function HeadShake({ children, out, timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, forever, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
     function make() {
       return animation(rule);
     }
 
-    return reverse ? false : { make, duration, delay, forever, count, style: { animationFillMode: 'both', } };
+    return reverse ? false : { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } };
   }
 
   return context

diff --git a/src/simple/Jello.js b/src/simple/Jello.js
@@ -16,6 +16,7 @@ import { animation, defaults } from '../lib/globals';
 const
   propTypes = {
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
@@ -55,15 +56,15 @@ const rule = `
 }
 `;
 
-function Jello({ children, out, duration = defaults.duration, delay = defaults.delay, count = defaults.count, forever, ...props } = defaults, context = false) {
+function Jello({ children, out, timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, forever, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
     function make() {
       return animation(rule);
     }
 
-    return reverse ? false : { make, duration, delay, forever, count, style: { animationFillMode: 'both', } };
+    return reverse ? false : { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } };
   }
 
   return context

diff --git a/src/simple/Jump.js b/src/simple/Jump.js
@@ -16,6 +16,7 @@ import { animation, defaults } from '../lib/globals';
 const
   propTypes = {
     duration: number,
+    timeout: number,
     delay: number,
     count: number,
     forever: bool,
@@ -42,15 +43,15 @@ const rule = `
 }
 `;
 
-function Jump({ children, out, duration = defaults.duration, delay = defaults.delay, count = defaults.count, forever, ...props } = defaults, context = false) {
+function Jump({ children, out, timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, forever, ...props } = defaults, context = false) {
 
   function factory(reverse) {
 
     function make() {
       return animation(rule);
     }
 
-    return reverse ? false : { make, duration, delay, forever, count, style: { animationFillMode: 'both', } };
+    return reverse ? false : { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } };
   }
 
   return context