Toolbar Icon badge now animates on value change. Set animate: false…

… to disable.
invertase · Jan 6, 2016 · c8f762e · c8f762e · Salakar · Jan 6, 2016
1 parent c848693
commit c8f762e
Showing 1 changed file with 62 additions and 14 deletions.
diff --git a/lib/IconToggle.js b/lib/IconToggle.js
@@ -19,6 +19,14 @@ export default class IconToggle extends Component {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        if (this.props && this.props.badge) {
+            if (this.props.badge.value !== prevProps.badge.value) {
+                this._animateBadgeCounter();
+            }
+        }
+    };
+
     static propTypes = {
         color: PropTypes.string.isRequired,
         opacity: PropTypes.number,
@@ -28,6 +36,7 @@ export default class IconToggle extends Component {
         children: PropTypes.element.isRequired,
         badge: PropTypes.shape({
             value: PropTypes.number,
+            animate: PropTypes.bool,
             backgroundColor: PropTypes.string,
             textColor: PropTypes.string
         })
@@ -36,7 +45,7 @@ export default class IconToggle extends Component {
     static defaultProps = {
         opacity: .1,
         disabled: false,
-        percent: 90,
+        percent: 90
     };
 
     setSize = (event) => {
@@ -65,18 +74,20 @@ export default class IconToggle extends Component {
 
         if (badge && typeof badge.value === 'number') {
             badge = Object.assign({},
-                { value: badge.value },
-                badge.backgroundColor ? { backgroundColor: badge.backgroundColor } : { backgroundColor: 'paperRed' },
-                badge.textColor ? { textColor: badge.textColor } : { textColor: '#ffffff' }
+                {value: badge.value},
+                badge.backgroundColor ? {backgroundColor: badge.backgroundColor} : {backgroundColor: 'paperRed'},
+                badge.textColor ? {textColor: badge.textColor} : {textColor: '#ffffff'}
             );
         }
 
+        this.badgeAnim = this.badgeAnim || new Animated.Value(0);
+
         return (
             <View {...this._responder}>
                 <View>
                     {size &&
-                        <Animated.View
-                            style={[{
+                    <Animated.View
+                        style={[{
                                 position: 'absolute',
                                 left: ((1 - percent) * size) / 2,
                                 top: ((1 - percent) * size) / 2,
@@ -87,23 +98,43 @@ export default class IconToggle extends Component {
                                 opacity: opacityValue,
                                 backgroundColor: getColor(color)
                             }]}
-                        />
+                    />
                     }
                     <View onLayout={(event) => { this.setSize(event) }}>
                         {children}
                     </View>
                     {size && badge && typeof badge.value === 'number' &&
-                        <View style={[
+                    <Animated.View style={[
                             styles.badgeContainer, {
                                 backgroundColor: getColor(badge.backgroundColor),
                                 top: size / 10,
-                                right: size / 10
+                                right: size / 10,
+                                transform: [   // Array order matters
+								{scale: this.badgeAnim.interpolate({
+								  inputRange: [0, 1],
+								  outputRange: [1, 1.7]
+								})},
+								{translateX: this.badgeAnim.interpolate({
+								  inputRange: [0, 1],
+								  outputRange: [0, -12]
+								})},
+								{translateY: this.badgeAnim.interpolate({
+								  inputRange: [0, 1],
+								  outputRange: [0, 10]
+								})},
+								{rotate: this.badgeAnim.interpolate({
+								  inputRange: [0, 1],
+								  outputRange: [
+									'0deg', '45deg' // 'deg' or 'rad'
+								  ]
+								})}
+							  ]
                             }]}
-                        >
-                            <Text style={[styles.badgeText, { color: getColor(badge.textColor) }]}>
-                                {badge.value}
-                            </Text>
-                        </View>
+                    >
+                        <Text style={[styles.badgeText, { color: getColor(badge.textColor) }]}>
+                            {badge.value}
+                        </Text>
+                    </Animated.View>
                     }
                 </View>
             </View>
@@ -127,6 +158,7 @@ export default class IconToggle extends Component {
         }
     };
 
+
     /**
      *
      * @private
@@ -143,6 +175,22 @@ export default class IconToggle extends Component {
         }
     };
 
+    /**
+     *
+     * @private
+     */
+    _animateBadgeCounter = () => {
+        if (this.badgeAnim && this.props.badge && this.props.badge.animate !== false) {
+            Animated.spring(this.badgeAnim, {
+                toValue: 0,   // Returns to the start
+                velocity: 8,  // Velocity makes it move
+                tension: -5, // Slow
+                friction: 1,  // Oscillate a lot
+                duration: 300
+            }).start();
+        }
+    };
+
     /**
      *
      * @private