[change] ProgressBar using CSS animations

Fix #299
necolas · Jan 2, 2017 · ea75cce · ea75cce
1 parent cfc56a1
commit ea75cce
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 86 deletions.
diff --git a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
@@ -1,11 +1,13 @@
 exports[`apis/AppRegistry/renderApplication getApplication 1`] = `
 "<style id=\"react-native-stylesheet\">
+/* React Native StyleSheet*/
 html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
 body{margin:0}
 button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
 input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}
-.rn_pointerEvents\\:auto, .rn_pointerEvents\\:box-only, .rn_pointerEvents\\:box-none * {pointer-events:auto}.rn_pointerEvents\\:none, .rn_pointerEvents\\:box-only *, .rn_pointerEvents\\:box-none {pointer-events:none}
-@keyframes rn-ActivityIndicator-animation {0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}100%{-webkit-transform: translateX(400%); transform: translateX(400%);}}
+.rn_pointerEvents\\:auto,.rn_pointerEvents\\:box-only,.rn_pointerEvents\\:box-none *{pointer-events:auto}.rn_pointerEvents\\:none,.rn_pointerEvents\\:box-only *,.rn_pointerEvents\\:box-none{pointer-events:none}
 .rn-bottom\\:0px{bottom:0px;}
 .rn-left\\:0px{left:0px;}
 .rn-position\\:absolute{position:absolute;}

diff --git a/src/apis/StyleSheet/initialize.js b/src/apis/StyleSheet/initialize.js
@@ -3,42 +3,33 @@ import StyleRegistry from './registry';
 
 const initialize = () => {
   injector.addRule(
-    'html-reset',
+    'reset',
+    '/* React Native StyleSheet*/\n' +
     'html{' +
       'font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;' +
       '-webkit-tap-highlight-color:rgba(0,0,0,0)' +
-    '}'
-  );
-
-  injector.addRule(
-    'body-reset',
-    'body{margin:0}'
-  );
-
-  injector.addRule(
-    'button-reset',
-    'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}'
-  );
-
-  injector.addRule(
-    'input-reset',
+    '}\n' +
+    'body{margin:0}\n' +
+    'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}\n' +
     'input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,' +
     'input::-webkit-search-cancel-button,input::-webkit-search-decoration,' +
     'input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}'
   );
-
   injector.addRule(
-    'pointer-events',
-    '.rn_pointerEvents\\:auto, .rn_pointerEvents\\:box-only, .rn_pointerEvents\\:box-none * {pointer-events:auto}' +
-    '.rn_pointerEvents\\:none, .rn_pointerEvents\\:box-only *, .rn_pointerEvents\\:box-none {pointer-events:none}'
+    'keyframes',
+    '@keyframes rn-ActivityIndicator-animation{' +
+      '0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}' +
+      '100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}' +
+    '}\n' +
+    '@keyframes rn-ProgressBar-animation{' +
+      '0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}' +
+      '100%{-webkit-transform: translateX(400%); transform: translateX(400%);}' +
+    '}'
   );
-
   injector.addRule(
-    'activity-indicator-animation',
-    '@keyframes rn-ActivityIndicator-animation {' +
-    '0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }' +
-    '100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }' +
-    '}'
+    'pointer-events',
+    '.rn_pointerEvents\\:auto,.rn_pointerEvents\\:box-only,.rn_pointerEvents\\:box-none *{pointer-events:auto}' +
+    '.rn_pointerEvents\\:none,.rn_pointerEvents\\:box-only *,.rn_pointerEvents\\:box-none{pointer-events:none}'
   );
 
   StyleRegistry.initialize();

diff --git a/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
@@ -38,7 +38,7 @@ rn-textDecoration:none"
   role="progressbar"
   style={Object {}}>
   <div
-    className="rn-ActivityIndicator-animation 
+    className="
   rn-alignItems:stretch
   rn-animationDuration:0.75s
   rn-animationIterationCount:infinite
@@ -151,7 +151,7 @@ rn-textDecoration:none"
   role="progressbar"
   style={Object {}}>
   <div
-    className="rn-ActivityIndicator-animation 
+    className="
   rn-alignItems:stretch
   rn-animationDuration:0.75s
   rn-animationIterationCount:infinite

diff --git a/src/components/ActivityIndicator/index.js b/src/components/ActivityIndicator/index.js
@@ -72,7 +72,6 @@ class ActivityIndicator extends Component {
       >
         <View
           children={svg}
-          className='rn-ActivityIndicator-animation'
           style={[
             indicatorSizes[size],
             styles.animation,

diff --git a/src/components/ProgressBar/index.js b/src/components/ProgressBar/index.js
@@ -1,13 +1,9 @@
-import Animated from '../../apis/Animated';
 import applyNativeMethods from '../../modules/applyNativeMethods';
 import ColorPropType from '../../propTypes/ColorPropType';
 import StyleSheet from '../../apis/StyleSheet';
 import View from '../View';
 import React, { Component, PropTypes } from 'react';
 
-const indeterminateWidth = '25%';
-const translateInterpolation = { inputRange: [ 0, 1 ], outputRange: [ '-100%', '400%' ] };
-
 class ProgressBar extends Component {
   static displayName = 'ProgressBar';
 
@@ -26,21 +22,6 @@ class ProgressBar extends Component {
     trackColor: 'transparent'
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      animationTranslate: new Animated.Value(0)
-    };
-  }
-
-  componentDidMount() {
-    this._manageAnimation();
-  }
-
-  componentDidUpdate() {
-    this._manageAnimation();
-  }
-
   render() {
     const {
       color,
@@ -51,8 +32,6 @@ class ProgressBar extends Component {
       ...other
     } = this.props;
 
-    const { animationTranslate } = this.state;
-
     const percentageProgress = indeterminate ? 50 : progress * 100;
 
     return (
@@ -67,43 +46,16 @@ class ProgressBar extends Component {
           { backgroundColor: trackColor }
         ]}
       >
-        <Animated.View style={[
-          styles.progress,
-          { backgroundColor: color },
-          indeterminate ? {
-            transform: [
-              { translateX: animationTranslate.interpolate(translateInterpolation) }
-            ],
-            width: indeterminateWidth
-          } : {
-            width: `${percentageProgress}%`
-          }
-        ]} />
+        <View
+          style={[
+            styles.progress,
+            indeterminate ? styles.indeterminate : { width: `${percentageProgress}%` },
+            { backgroundColor: color }
+          ]}
+        />
       </View>
     );
   }
-
-  _manageAnimation() {
-    const { animationTranslate } = this.state;
-
-    const cycleAnimation = (animation) => {
-      animation.setValue(0);
-      Animated.timing(animation, {
-        duration: 1000,
-        toValue: 1
-      }).start((event) => {
-        if (event.finished) {
-          cycleAnimation(animation);
-        }
-      });
-    };
-
-    if (this.props.indeterminate) {
-      cycleAnimation(animationTranslate);
-    } else {
-      animationTranslate.stopAnimation();
-    }
-  }
 }
 
 const styles = StyleSheet.create({
@@ -114,6 +66,13 @@ const styles = StyleSheet.create({
   },
   progress: {
     height: '100%'
+  },
+  indeterminate: {
+    animationDuration: '1s',
+    animationName: 'rn-ProgressBar-animation',
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+    width: '25%'
   }
 });