Adds autoStartDelay prop (#28)

VincentCATILLON · May 1, 2020 · f09a60a · f09a60a
1 parent f782dc6
commit f09a60a
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,8 @@ const MyComponent = () => (
 | fallSpeed        | number                 | fall duration (ms) from top to bottom      |          | 3000           |
 | fadeOut          | boolean                | make the confettis disappear at the end    |          | false          |
 | colors           | string[]               | give your own colors to the confettis      |          | default colors |
-| autoStart        | boolean                | give your own colors to the confettis      |          | true           |
+| autoStart        | boolean                | auto start the animation                   |          | true           |
+| autoStartDelay   | number                 | delay to wait before triggering animation  |          | 0              |
 
 ## Events
 

diff --git a/example/storybook/stories/index.js b/example/storybook/stories/index.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
-import { storiesOf, addDecorator } from '@storybook/react-native';
+import { Dimensions } from 'react-native';
+import { storiesOf } from '@storybook/react-native';
 import { withKnobs, boolean, number, array, button } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import ConfettiCannon, {DEFAULT_COLORS, DEFAULT_EXPLOSION_SPEED, DEFAULT_FALL_SPEED} from 'react-native-confetti-cannon';
 
 import ScreenSimulator from './components/screen-simulator';
 
+const { width } = Dimensions.get('window');
+
 storiesOf('Demo', module)
   .addDecorator(withKnobs)
   .addDecorator(ScreenSimulator)
@@ -24,6 +27,7 @@ storiesOf('Demo', module)
         fadeOut={boolean('fadeOut', false, 'Props')}
         colors={array('colors', DEFAULT_COLORS, ',', 'Props')}
         autoStart={boolean('autoStart', true, 'Props')}
+        autoStartDelay={number('autoStartDelay', 1000, {}, 'Props')}
         onAnimationStart={action('onAnimationStart')}
         onAnimationStop={action('onAnimationStop')}
         onAnimationResume={action('onAnimationResume')}
@@ -36,5 +40,63 @@ storiesOf('Demo', module)
     button('Stop', () => ref.stop(), 'Methods');
     button('Resume', () => ref.resume(), 'Methods');
 
+    return result;
+  })
+  .add('Multiple', () => {
+    let ref1;
+    let ref2;
+
+    const result = (
+      <React.Fragment>
+        <ConfettiCannon
+          count={number('count', 100, {}, 'Props (left)')}
+          origin={{
+            x: number('origin.x', -10, {}, 'Props (left)'),
+            y: number('origin.y', -10, {}, 'Props (left)')
+          }}
+          explosionSpeed={number('explosionSpeed', DEFAULT_EXPLOSION_SPEED, {}, 'Props (left)')}
+          fallSpeed={number('fallSpeed', DEFAULT_FALL_SPEED, {}, 'Props (left)')}
+          fadeOut={boolean('fadeOut', false, 'Props (left)')}
+          colors={array('colors', DEFAULT_COLORS, ',', 'Props (left)')}
+          autoStart={boolean('autoStart', true, 'Props (left)')}
+          autoStartDelay={number('autoStartDelay', 0, {}, 'Props (left)')}
+          onAnimationStart={() => {
+            action('onAnimationStart (left)');
+            setTimeout(ref2.start, DEFAULT_EXPLOSION_SPEED);
+          }}
+          onAnimationStop={action('onAnimationStop (left)')}
+          onAnimationResume={action('onAnimationResume (left)')}
+          onAnimationEnd={action('onAnimationEnd (left)')}
+          ref={ref => ref1 = ref}
+        />
+        <ConfettiCannon
+          count={number('count', 100, {}, 'Props (right)')}
+          origin={{
+            x: number('origin.x', width + 10, {}, 'Props (right)'),
+            y: number('origin.y', -10, {}, 'Props (right)')
+          }}
+          explosionSpeed={number('explosionSpeed', DEFAULT_EXPLOSION_SPEED, {}, 'Props (right)')}
+          fallSpeed={number('fallSpeed', DEFAULT_FALL_SPEED, {}, 'Props (right)')}
+          fadeOut={boolean('fadeOut', false, 'Props (right)')}
+          colors={array('colors', DEFAULT_COLORS, ',', 'Props (right)')}
+          autoStart={boolean('autoStart', false, 'Props (right)')}
+          autoStartDelay={number('autoStartDelay', 0, {}, 'Props (right)')}
+          onAnimationStart={action('onAnimationStart (right)')}
+          onAnimationStop={action('onAnimationStop (right)')}
+          onAnimationResume={action('onAnimationResume (right)')}
+          onAnimationEnd={action('onAnimationEnd (right)')}
+          ref={ref => ref2 = ref}
+        />
+      </React.Fragment>
+    );
+
+    button('Start', () => ref1.start(), 'Methods (left)');
+    button('Stop', () => ref1.stop(), 'Methods (left)');
+    button('Resume', () => ref1.resume(), 'Methods (left)');
+
+    button('Start', () => ref2.start(), 'Methods (right)');
+    button('Stop', () => ref2.stop(), 'Methods (right)');
+    button('Resume', () => ref2.resume(), 'Methods (right)');
+
     return result;
   });
diff --git a/src/__tests__/index.js b/src/__tests__/index.js
@@ -27,6 +27,8 @@ describe('index', () => {
       />
     );
 
+    jest.runOnlyPendingTimers();
+
     expect(handleAnimationStart).toHaveBeenCalledTimes(1);
     expect(handleAnimationEnd).toHaveBeenCalledTimes(0);
 
@@ -79,6 +81,28 @@ describe('index', () => {
     expect(handleAnimationStart).toHaveBeenCalledTimes(0);
   });
 
+  it('should start after delay', () => {
+    const autoStartDelay = 100;
+    const handleAnimationStart = jest.fn();
+
+    renderer.create(
+      <ConfettiCannon
+        count={10}
+        origin={{x: -10, y: 0}}
+        autoStartDelay={autoStartDelay}
+        onAnimationStart={handleAnimationStart}
+      />
+    );
+
+    jest.advanceTimersByTime(autoStartDelay - 1);
+
+    expect(handleAnimationStart).toHaveBeenCalledTimes(0);
+
+    jest.advanceTimersByTime(1);
+
+    expect(handleAnimationStart).toHaveBeenCalledTimes(1);
+  });
+
   it('should be able to start animation programmatically', () => {
     const handleAnimationStart = jest.fn();
     const handleAnimationResume = jest.fn();

diff --git a/src/index.js b/src/index.js
@@ -19,6 +19,7 @@ type Props = {|
   colors?: Array<string>,
   fadeOut?: boolean,
   autoStart?: boolean,
+  autoStartDelay?: number,
   onAnimationStart?: () => void,
   onAnimationResume?: () => void,
   onAnimationStop?: () => void,
@@ -84,10 +85,10 @@ class Explosion extends React.PureComponent<Props, State> {
   }
 
   componentDidMount = () => {
-    const { autoStart = true } = this.props;
+    const { autoStart = true, autoStartDelay = 0 } = this.props;
 
     if (autoStart) {
-      this.start();
+      setTimeout(this.start, autoStartDelay);
     }
   };