Adding custom colors, small perf refacto and fadeout (#2)

* adding custom colors, small perf refacto and fadeout * update doc * fixing review * fixing review * fixing review * fixing review * cleaning synthax * cleaning synthax
VincentCATILLON · Mar 28, 2019 · d4b0a38 · d4b0a38
1 parent 5b3de4f
commit d4b0a38
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -24,9 +24,11 @@ const MyComponent = () => (
 
 ## Props
 
-| Name           | Type                   | Description                                | Required | Default |
-|----------------|------------------------|--------------------------------------------|----------|---------|
-| count          | number                 | items count to display                     | required |         |
-| origin         | {x: number, y: number} | animation position origin                  | required |         |
-| explosionSpeed | number                 | explosion duration (ms) from origin to top |          | 350     |
-| fallSpeed      | number                 | fall duration (ms) from top to bottom      |          | 3000    |
+| Name           | Type                   | Description                                | Required | Default        |
+|----------------|------------------------|--------------------------------------------|----------|----------------|
+| count          | number                 | items count to display                     | required |                |
+| origin         | {x: number, y: number} | animation position origin                  | required |                |
+| explosionSpeed | number                 | explosion duration (ms) from origin to top |          | 350            |
+| fallSpeed      | number                 | fall duration (ms) from top to bottom      |          | 3000           |
+| fadeOut        | boolean                | make the confettis disappear at the end    |          | false          |
+| colors   | Array<string>          | give your own colors to the confettis      |          | default colors |
diff --git a/src/components/confetti.js b/src/components/confetti.js
@@ -8,34 +8,24 @@ import {randomValue} from '../utils';
 type Props = {|
   left: Animated.Interpolation,
   bottom: Animated.Interpolation,
-  transform: Array<{ [key: string]: Animated.Interpolation }>
+  transform: Array<{ [key: string]: Animated.Interpolation }>,
+  color: string,
+  opacity: Animated.Interpolation,
 |};
 
-const colors: Array<string> = [
-  '#e67e22',
-  '#2ecc71',
-  '#3498db',
-  '#84AAC2',
-  '#E6D68D',
-  '#F67933',
-  '#42A858',
-  '#4F50A2',
-  '#A86BB7',
-  '#e74c3c',
-  '#1abc9c'
-];
+
 
 class Confetti extends React.PureComponent<Props> {
   props: Props;
   width: number = randomValue(8, 16);
   height: number = randomValue(6, 12);
   isRounded: boolean = Math.round(randomValue(0, 1)) === 1;
-  backgroundColor: string = colors[Math.round(randomValue(0, colors.length - 1))];
+  backgroundColor: string = this.props.color;
 
   render() {
-    const { left, bottom, transform } = this.props;
+    const { left, bottom, transform, opacity } = this.props;
     const { width, height, isRounded, backgroundColor } = this;
-    const style = { left, bottom, width, height, backgroundColor, transform };
+    const style = { left, bottom, width, height, backgroundColor, transform, opacity};
 
     return (
       <Animated.View style={[styles.confetti, isRounded && styles.rounded, style]} />

diff --git a/src/index.js b/src/index.js
@@ -13,7 +13,9 @@ type Props = {|
     y: number
   },
   explosionSpeed?: number,
-  fallSpeed?: number
+  fallSpeed?: number,
+  colors?: Array<string>,
+  fadeOut?: boolean
 |};
 
 type Item = {|
@@ -32,6 +34,19 @@ type State = {|
 |};
 
 const TOP_MIN = 0.7;
+const DEFAULT_COLORS: Array<string> =[
+  '#e67e22',
+  '#2ecc71',
+  '#3498db',
+  '#84AAC2',
+  '#E6D68D',
+  '#F67933',
+  '#42A858',
+  '#4F50A2',
+  '#A86BB7',
+  '#e74c3c',
+  '#1abc9c'
+];
 
 class Explosion extends React.PureComponent<Props, State> {
   props: Props;
@@ -88,9 +103,9 @@ class Explosion extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { origin } = this.props;
+    const { origin, colors = DEFAULT_COLORS, fadeOut } = this.props;
     const { height, width } = Dimensions.get('window');
-
+    
     return (
       <React.Fragment>
         {this.state && this.state.items && this.state.items.map((item: Item, index: number) => {
@@ -118,10 +133,16 @@ class Explosion extends React.PureComponent<Props, State> {
             inputRange: [0, 0.4, 1.2, 2],
             outputRange: [0, -(item.swingDelta * 30), (item.swingDelta * 30), 0]
           })
+
+          const opacity = this.animation.interpolate({
+            inputRange: [0, 1, 1.8, 2],
+            outputRange: [1, 1, 1, fadeOut ? 0 : 1]
+          });
+
           const transform = [{rotateX}, {rotateY}, {rotateZ}, {translateX}];
 
           return (
-            <Confetti left={left} bottom={bottom} transform={transform} key={index} />
+            <Confetti color={colors[Math.round(randomValue(0, colors.length - 1))]} left={left} bottom={bottom} transform={transform} opacity={opacity} key={index} />
           );
         })}
       </React.Fragment>