From 89940105c4ee7521c07e9e4aa46b8441f492cd44 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 24 Feb 2018 13:32:40 +0000
Subject: [PATCH] feat: add delay prop to <Render> and <RenderInterv

---
 src/Render/__story__/story.tsx         | 21 ++++++--
 src/Render/index.ts                    | 21 ++++++--
 src/RenderInterval/__story__/story.tsx | 74 ++++++++++++++++++--------
 src/RenderInterval/index.ts            | 31 +++++++----
 src/Tween/__story__/story.tsx          | 73 +++++++++++++++----------
 5 files changed, 151 insertions(+), 69 deletions(-)

diff --git a/src/Render/__story__/story.tsx b/src/Render/__story__/story.tsx
index c29b4d8c..f4d7e803 100644
--- a/src/Render/__story__/story.tsx
+++ b/src/Render/__story__/story.tsx
@@ -6,7 +6,7 @@ import {Render} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
 storiesOf('Animation/Render', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Overlay.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Render.md')}))
   .add('Defaults', () =>
     <div>
       <Render>{({value}) =>
@@ -21,9 +21,24 @@ storiesOf('Animation/Render', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
-          top: (value * 100) - 100,
+          top: (value * 100),
+          left: 100
+        }}>{value}</div>
+      }</Render>
+    </div>
+  )
+  .add('Entry with delay', () =>
+    <div>
+      <Render delay={1000} ms={2000}>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 100),
           left: 100
         }}>{value}</div>
       }</Render>
diff --git a/src/Render/index.ts b/src/Render/index.ts
index 301b8205..bf268124 100644
--- a/src/Render/index.ts
+++ b/src/Render/index.ts
@@ -3,6 +3,7 @@ import {render, createEnhancer} from 'react-universal-interface';
 import {h} from '../util';
 
 export interface IRenderProps {
+  delay?: number;
   ms?: number;
 }
 
@@ -17,6 +18,7 @@ export class Render extends Component<IRenderProps, IRenderState> {
     ms: 300
   };
 
+  timeout = null;
   frame = null;
 
   state = {
@@ -26,6 +28,21 @@ export class Render extends Component<IRenderProps, IRenderState> {
   };
 
   componentDidMount () {
+    const {delay} = this.props;
+
+    if (delay) {
+      this.timeout = setTimeout(this.start, delay);
+    } else {
+      this.start();
+    }
+  }
+
+  componentWillUnmount () {
+    cancelAnimationFrame(this.frame);
+    clearTimeout(this.timeout);
+  }
+
+  start = () => {
     const now = Date.now();
 
     this.setState({
@@ -37,10 +54,6 @@ export class Render extends Component<IRenderProps, IRenderState> {
     });
   }
 
-  componentWillUnmount () {
-    cancelAnimationFrame(this.frame);
-  }
-
   onFrame = () => {
     const now = Date.now();
     const value = Math.min((now - this.state.start) / this.props.ms, 1);
diff --git a/src/RenderInterval/__story__/story.tsx b/src/RenderInterval/__story__/story.tsx
index 472e66f6..5c02e061 100644
--- a/src/RenderInterval/__story__/story.tsx
+++ b/src/RenderInterval/__story__/story.tsx
@@ -6,26 +6,56 @@ import {RenderInterval} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
 storiesOf('Animation/RenderInterval', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Overlay.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/RenderInterval.md')}))
   .add('Defaults', () =>
-    <div>
-      <RenderInterval>{({value}) =>
-        <div>{value}</div>
-      }</RenderInterval>
-    </div>
-  )
-  .add('Entry animation', () =>
-    <div>
-      <RenderInterval ms={2000}>{({value}) =>
-        <div style={{
-          width: 100,
-          height: 100,
-          background: 'tomato',
-          opacity: value,
-          position: 'relative',
-          top: (value * 100) - 100,
-          left: 100
-        }}>{value}</div>
-      }</RenderInterval>
-    </div>
-  )
+  <div>
+    <RenderInterval>{({value}) =>
+      <div>{value}</div>
+    }</RenderInterval>
+  </div>
+)
+.add('Entry animation', () =>
+  <div>
+    <RenderInterval ms={2000}>{({value}) =>
+      <div style={{
+        width: 100,
+        height: 100,
+        background: 'tomato',
+        opacity: .1 + .9 * value,
+        position: 'relative',
+        top: (value * 100),
+        left: 100
+      }}>{value}</div>
+    }</RenderInterval>
+  </div>
+)
+.add('Entry with delay', () =>
+  <div>
+    <RenderInterval delay={1000} ms={2000}>{({value}) =>
+      <div style={{
+        width: 100,
+        height: 100,
+        background: 'tomato',
+        opacity: .1 + .9 * value,
+        position: 'relative',
+        top: (value * 100),
+        left: 100
+      }}>{value}</div>
+    }</RenderInterval>
+  </div>
+)
+.add('Custom fps', () =>
+  <div>
+    <RenderInterval fps={10} ms={2000}>{({value}) =>
+      <div style={{
+        width: 100,
+        height: 100,
+        background: 'tomato',
+        opacity: .1 + .9 * value,
+        position: 'relative',
+        top: (value * 100),
+        left: 100
+      }}>{value}</div>
+    }</RenderInterval>
+  </div>
+)
diff --git a/src/RenderInterval/index.ts b/src/RenderInterval/index.ts
index 955e63e7..34d42f32 100644
--- a/src/RenderInterval/index.ts
+++ b/src/RenderInterval/index.ts
@@ -1,16 +1,13 @@
 import {Component} from 'react';
 import {render, createEnhancer} from 'react-universal-interface';
 import {h} from '../util';
+import {IRenderProps, IRenderState} from '../Render';
 
-export interface IRenderIntervalProps {
+export interface IRenderIntervalProps extends IRenderProps {
   fps?: number;
-  ms?: number;
 }
 
-export interface IRenderIntervalState {
-  start?: number;
-  now?: number;
-  value?: number;
+export interface IRenderIntervalState extends IRenderState {
 }
 
 export class RenderInterval extends Component<IRenderIntervalProps, IRenderIntervalState> {
@@ -19,8 +16,9 @@ export class RenderInterval extends Component<IRenderIntervalProps, IRenderInter
     ms: 300
   };
 
-  delay: number = 50;
+  interval: number = 50;
   timeout = null;
+  timeoutDelay = null;
 
   state = {
     start: 0,
@@ -29,27 +27,38 @@ export class RenderInterval extends Component<IRenderIntervalProps, IRenderInter
   };
 
   componentDidMount () {
+    const {delay} = this.props;
+
+    if (delay) {
+      this.timeoutDelay = setTimeout(this.start, delay);
+    } else {
+      this.start();
+    }
+  }
+
+  start = () => {
     const now = Date.now();
 
-    this.delay = 1000 / this.props.fps;
+    this.interval = 1000 / this.props.fps;
 
     this.setState({
       start: now,
       now,
       value: 0
     }, () => {
-      this.timeout = setTimeout(this.onFrame, this.delay);
+      this.timeout = setTimeout(this.onFrame, this.interval);
     });
   }
 
   componentDidUpdate (props) {
     if (props.fps !== this.props.fps) {
-      this.delay = 1000 / this.props.fps;
+      this.interval = 1000 / this.props.fps;
     }
   }
 
   componentWillUnmount () {
     clearTimeout(this.timeout);
+    clearTimeout(this.timeoutDelay);
   }
 
   onFrame = () => {
@@ -59,7 +68,7 @@ export class RenderInterval extends Component<IRenderIntervalProps, IRenderInter
 
     if (value < 1) {
       onState = () => {
-        this.timeout = setTimeout(this.onFrame, this.delay);
+        this.timeout = setTimeout(this.onFrame, this.interval);
       };
     }
 
diff --git a/src/Tween/__story__/story.tsx b/src/Tween/__story__/story.tsx
index 5c51410b..43c8100b 100644
--- a/src/Tween/__story__/story.tsx
+++ b/src/Tween/__story__/story.tsx
@@ -25,7 +25,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -40,7 +40,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -55,7 +55,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -70,7 +70,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -85,7 +85,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -100,7 +100,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -115,7 +115,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -130,7 +130,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -145,7 +145,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -160,7 +160,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -175,7 +175,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -190,7 +190,7 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -205,7 +205,37 @@ storiesOf('Animation/Tween', module)
           width: 100,
           height: 100,
           background: 'tomato',
-          opacity: value,
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('With cubic-bezier', () =>
+    <div>
+      <Tween ms={1000} easing={cubicBezierEasing1}>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
+          position: 'relative',
+          top: (value * 300),
+          left: 100
+        }}>{value}</div>
+      }</Tween>
+    </div>
+  )
+  .add('With delay', () =>
+    <div>
+      <Tween delay={2000} ms={1000}>{({value}) =>
+        <div style={{
+          width: 100,
+          height: 100,
+          background: 'tomato',
+          opacity: .1 + .9 * value,
           position: 'relative',
           top: (value * 300),
           left: 100
@@ -221,7 +251,7 @@ storiesOf('Animation/Tween', module)
             width: 100,
             height: 100,
             background: 'tomato',
-            opacity: value,
+            opacity: .1 + .9 * value,
             position: 'relative',
             top: (value * 300),
             left: 100
@@ -230,18 +260,3 @@ storiesOf('Animation/Tween', module)
       </AfterTimeout>
     </div>
   )
-  .add('With cubic-bezier', () =>
-    <div>
-      <Tween ms={1000} easing={cubicBezierEasing1}>{({value}) =>
-        <div style={{
-          width: 100,
-          height: 100,
-          background: 'tomato',
-          opacity: value,
-          position: 'relative',
-          top: (value * 300),
-          left: 100
-        }}>{value}</div>
-      }</Tween>
-    </div>
-  )