Apply changes from VincentCATILLON#53

Author: felipecsl

.gitignore

@@ -2,6 +2,9 @@
 #
 .DS_Store
 
+# IntelliJ
+.idea
+
 # node.js
 #
 node_modules/

src/index.js

@@ -1,12 +1,12 @@
 // @flow
 
 import * as React from 'react';
-import { Animated, Dimensions, Easing, Platform } from 'react-native';
-import type { CompositeAnimation } from 'react-native/Libraries/Animated/src/AnimatedImplementation';
-import type { EndResult } from 'react-native/Libraries/Animated/src/animations/Animation';
+import {Animated, Dimensions, Easing, Platform} from 'react-native';
+import type {CompositeAnimation} from 'react-native/Libraries/Animated/src/AnimatedImplementation';
+import type {EndResult} from 'react-native/Libraries/Animated/src/animations/Animation';
 
 import Confetti from './components/confetti';
-import { randomValue, randomColor } from './utils';
+import {randomValue, randomColor} from './utils';
 
 type Props = {|
   count: number,
@@ -24,9 +24,7 @@ type Props = {|
   onAnimationResume?: () => void,
   onAnimationStop?: () => void,
   onAnimationEnd?: () => void,
-  testID?: string,
-  topDeltaAdjustment?: number,
-  dontAnimateOpacity?: boolean
+  testID?: string
 |};
 
 type Item = {|
@@ -42,11 +40,12 @@ type Item = {|
 |};
 
 type State = {|
-  items: Array<Item>
+  items: Array<Item>,
+  showItems: boolean
 |};
 
 export const TOP_MIN = 0.7;
-export const DEFAULT_COLORS: Array<string> =[
+export const DEFAULT_COLORS: Array<string> = [
   '#e67e22',
   '#2ecc71',
   '#3498db',
@@ -65,7 +64,8 @@ export const DEFAULT_FALL_SPEED = 3000;
 class Explosion extends React.PureComponent<Props, State> {
   props: Props;
   state: State = {
-    items: []
+    items: [],
+    showItems: false
   };
   start: () => void;
   resume: () => void;
@@ -77,7 +77,7 @@ class Explosion extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    const { colors = DEFAULT_COLORS } = props;
+    const {colors = DEFAULT_COLORS} = props;
 
     this.start = this.start.bind(this);
     this.resume = this.resume.bind(this);
@@ -87,15 +87,20 @@ class Explosion extends React.PureComponent<Props, State> {
   }
 
   componentDidMount = () => {
-    const { autoStart = true, autoStartDelay = 0 } = this.props;
+    const {autoStart = true, autoStartDelay = 0} = this.props;
 
     if (autoStart) {
-      setTimeout(this.start, autoStartDelay);
+      // Set Timeout with zero delay is not instantenous. Waits for a cycle
+      if (autoStartDelay) {
+        setTimeout(this.start, autoStartDelay);
+      } else {
+        this.start();
+      }
     }
   };
 
-  componentDidUpdate = ({ count: prevCount, colors: prevColors = DEFAULT_COLORS }: Props) => {
-    const { count, colors = DEFAULT_COLORS } = this.props;
+  componentDidUpdate = ({count: prevCount, colors: prevColors = DEFAULT_COLORS}: Props) => {
+    const {count, colors = DEFAULT_COLORS} = this.props;
 
     if (count !== prevCount || colors !== prevColors) {
       this.setState({
@@ -105,8 +110,8 @@ class Explosion extends React.PureComponent<Props, State> {
   };
 
   getItems = (prevColors: Array<string>): Array<Item> => {
-    const { count, colors = DEFAULT_COLORS } = this.props;
-    const { items } = this.state;
+    const {count, colors = DEFAULT_COLORS} = this.props;
+    const {items} = this.state;
 
     const difference = items.length < count ? count - items.length : 0;
 
@@ -131,59 +136,67 @@ class Explosion extends React.PureComponent<Props, State> {
       }));
   };
 
-  start = (resume?: boolean = false) => {
-    const {
-      explosionSpeed = DEFAULT_EXPLOSION_SPEED,
-      fallSpeed = DEFAULT_FALL_SPEED,
-      onAnimationStart,
-      onAnimationResume,
-      onAnimationEnd
-    } = this.props;
-
-    if (resume) {
-      onAnimationResume && onAnimationResume();
-    } else {
-      this.sequence = Animated.sequence([
-        Animated.timing(this.animation, {toValue: 0, duration: 0, useNativeDriver: true}),
-        Animated.timing(this.animation, {
-          toValue: 1,
-          duration: explosionSpeed,
-          easing: Easing.out(Easing.quad),
-          useNativeDriver: true
-        }),
-        Animated.timing(this.animation, {
-          toValue: 2,
-          duration: fallSpeed,
-          easing: Easing.quad,
-          useNativeDriver: true
-        }),
-      ]);
-
-      onAnimationStart && onAnimationStart();
-    }
-
-    this.sequence && this.sequence.start(({finished}: EndResult) => {
-      if (finished) {
-        onAnimationEnd && onAnimationEnd();
+  start = (resume: boolean = false) => {
+    this.setState({
+      showItems: true,
+    }, () => {
+      const {
+        explosionSpeed = DEFAULT_EXPLOSION_SPEED,
+        fallSpeed = DEFAULT_FALL_SPEED,
+        onAnimationStart,
+        onAnimationResume,
+        onAnimationEnd
+      } = this.props;
+
+      if (resume) {
+        onAnimationResume && onAnimationResume();
+      } else {
+        this.sequence = Animated.sequence([
+          Animated.timing(this.animation, {toValue: 0, duration: 0, useNativeDriver: true}),
+          Animated.timing(this.animation, {
+            toValue: 1,
+            duration: explosionSpeed,
+            easing: Easing.out(Easing.quad),
+            useNativeDriver: true
+          }),
+          Animated.timing(this.animation, {
+            toValue: 2,
+            duration: fallSpeed,
+            easing: Easing.quad,
+            useNativeDriver: true
+          }),
+        ]);
+        onAnimationStart && onAnimationStart();
       }
-    });
+
+      this.sequence && this.sequence.start(({finished}: EndResult) => {
+        if (finished) {
+          onAnimationEnd && onAnimationEnd();
+          this.setState({
+            showItems: false
+          })
+        }
+      });
+    })
   };
 
   resume = () => this.start(true);
 
   stop = () => {
-    const { onAnimationStop } = this.props;
+    const {onAnimationStop} = this.props;
 
     onAnimationStop && onAnimationStop();
 
     this.sequence && this.sequence.stop();
   };
 
   render() {
-    const { origin, fadeOut, topDeltaAdjustment, dontAnimateOpacity } = this.props;
-    const { items } = this.state;
-    const { height, width } = Dimensions.get('window');
-
+    const {origin, fadeOut} = this.props;
+    const {items} = this.state;
+    const {height, width} = Dimensions.get('window');
+    if (!this.state.showItems) {
+      return null;
+    }
     return (
       <React.Fragment>
         {items.map((item: Item, index: number) => {
@@ -193,7 +206,7 @@ class Explosion extends React.PureComponent<Props, State> {
           });
           const top = this.animation.interpolate({
             inputRange: [0, 1, 1 + item.topDelta, 2],
-            outputRange: [-origin.y, -item.topDelta * height, (-item.topDelta * height) + ((topDeltaAdjustment || 0) / 2), (-item.topDelta * height) + (topDeltaAdjustment || 0)]
+            outputRange: [-origin.y, -item.topDelta * height, 0, 0]
           });
           const rotateX = this.animation.interpolate({
             inputRange: [0, 2],
@@ -219,15 +232,15 @@ class Explosion extends React.PureComponent<Props, State> {
           const transform = [{rotateX}, {rotateY}, {rotate: rotateZ}, {translateX}];
 
           if (Platform.OS === 'android') {
-            transform.push({ perspective: 100 });
+            transform.push({perspective: 100});
           }
 
           return (
             <Confetti
               color={item.color}
               containerTransform={containerTransform}
               transform={transform}
-              opacity={dontAnimateOpacity ? undefined : opacity}
+              opacity={opacity}
               key={index}
               testID={`confetti-${index + 1}`}
             />