feat: add delay prop to <Render> and <RenderInterv

Author: streamich

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>

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);

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>
+)

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);
       };
     }