Support progress in ProgressBarAndroid

Differential Revision: D2626321

fb-gh-sync-id: a358a1db8c8f3b4a41dc9a600ee691e6e60310f3

Examples/UIExplorer/ProgressBarAndroidExample.android.js

@@ -20,6 +20,31 @@ var React = require('React');
 var UIExplorerBlock = require('UIExplorerBlock');
 var UIExplorerPage = require('UIExplorerPage');
 
+var TimerMixin = require('react-timer-mixin');
+
+var MovingBar = React.createClass({
+  mixins: [TimerMixin],
+
+  getInitialState: function() {
+    return {
+      progress: 0
+    };
+  },
+
+  componentDidMount: function() {
+    this.setInterval(
+      () => {
+        var progress = (this.state.progress + 0.02) % 1;
+        this.setState({progress: progress});
+      }, 50
+    );
+  },
+
+  render: function() {
+    return <ProgressBar progress={this.state.progress} {...this.props} />;
+  },
+});
+
 var ProgressBarAndroidExample = React.createClass({
 
   statics: {
@@ -55,9 +80,25 @@ var ProgressBarAndroidExample = React.createClass({
           <ProgressBar styleAttr="LargeInverse" />
         </UIExplorerBlock>
 
+        <UIExplorerBlock title="Horizontal Indeterminate ProgressBar">
+          <ProgressBar styleAttr="Horizontal" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Horizontal ProgressBar">
+          <MovingBar styleAttr="Horizontal" indeterminate={false} />
+        </UIExplorerBlock>
+
         <UIExplorerBlock title="Large Red ProgressBar">
           <ProgressBar styleAttr="Large" color="red" />
         </UIExplorerBlock>
+
+        <UIExplorerBlock title="Horizontal Black Indeterminate ProgressBar">
+          <ProgressBar styleAttr="Horizontal" color="black" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Horizontal Blue ProgressBar">
+          <MovingBar styleAttr="Horizontal" indeterminate={false} color="blue" />
+        </UIExplorerBlock>
       </UIExplorerPage>
     );
   },

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -26,6 +26,18 @@ var STYLE_ATTRIBUTES = [
   'LargeInverse'
 ];
 
+var indeterminateType = function(props, propName, componentName) {
+  var checker = function() {
+    var indeterminate = props[propName];
+    var styleAttr = props.styleAttr;
+    if (!indeterminate && styleAttr !== 'Horizontal') {
+      return new Error('indeterminate=false is only valid for styleAttr=Horizontal');
+    }
+  };
+
+  return ReactPropTypes.bool(props, propName, componentName) || checker();
+};
+
 /**
  * React component that wraps the Android-only `ProgressBar`. This component is used to indicate
  * that the app is loading or there is some activity in the app.
@@ -62,6 +74,15 @@ var ProgressBarAndroid = React.createClass({
      * - LargeInverse
      */
     styleAttr: ReactPropTypes.oneOf(STYLE_ATTRIBUTES),
+    /**
+     * If the progress bar will show indeterminate progress. Note that this
+     * can only be false if styleAttr is Horizontal.
+     */
+    indeterminate: indeterminateType,
+    /**
+     * The progress value (between 0 and 1).
+     */
+    progress: ReactPropTypes.number,
     /**
      * Color of the progress bar.
      */
@@ -75,6 +96,7 @@ var ProgressBarAndroid = React.createClass({
   getDefaultProps: function() {
     return {
       styleAttr: 'Large',
+      indeterminate: true
     };
   },
 

ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ProgressBarContainerView.java

@@ -17,8 +17,12 @@ import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
  * Controls an enclosing ProgressBar. Exists so that the ProgressBar can be recreated if
  * the style would change.
  */
-class ProgressBarContainerView extends FrameLayout {
+/* package */ class ProgressBarContainerView extends FrameLayout {
+  private static final int MAX_PROGRESS = 1000;
+
   private @Nullable Integer mColor;
+  private boolean mIndeterminate = true;
+  private double mProgress;
   private @Nullable ProgressBar mProgressBar;
 
   public ProgressBarContainerView(Context context) {
@@ -28,23 +32,35 @@ class ProgressBarContainerView extends FrameLayout {
   public void setStyle(@Nullable String styleName) {
     int style = ReactProgressBarViewManager.getStyleFromString(styleName);
     mProgressBar = new ProgressBar(getContext(), null, style);
+    mProgressBar.setMax(MAX_PROGRESS);
     removeAllViews();
     addView(
         mProgressBar,
         new ViewGroup.LayoutParams(
-            ViewGroup.LayoutParams.WRAP_CONTENT,
+            ViewGroup.LayoutParams.MATCH_PARENT,
-            ViewGroup.LayoutParams.WRAP_CONTENT));
+            ViewGroup.LayoutParams.MATCH_PARENT));
   }
 
   public void setColor(@Nullable Integer color) {
     this.mColor = color;
   }
 
+  public void setIndeterminate(boolean indeterminate) {
+    mIndeterminate = indeterminate;
+  }
+
+  public void setProgress(double progress) {
+    mProgress = progress;
+  }
+
   public void apply() {
     if (mProgressBar == null) {
       throw new JSApplicationIllegalArgumentException("setStyle() not called");
     }
+
+    mProgressBar.setIndeterminate(mIndeterminate);
     setColor(mProgressBar);
+    mProgressBar.setProgress((int) (mProgress * MAX_PROGRESS));
   }
 
   private void setColor(ProgressBar progressBar) {

ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ReactProgressBarViewManager.java

@@ -27,6 +27,8 @@ public class ReactProgressBarViewManager extends
     BaseViewManager<ProgressBarContainerView, ProgressBarShadowNode> {
 
   /* package */ static final String PROP_STYLE = "styleAttr";
+  /* package */ static final String PROP_INDETERMINATE = "indeterminate";
+  /* package */ static final String PROP_PROGRESS = "progress";
 
   /* package */ static final String REACT_CLASS = "AndroidProgressBar";
   /* package */ static final String DEFAULT_STYLE = "Large";
@@ -51,6 +53,16 @@ public class ReactProgressBarViewManager extends
     view.setColor(color);
   }
 
+  @ReactProp(name = PROP_INDETERMINATE)
+  public void setIndeterminate(ProgressBarContainerView view, boolean indeterminate) {
+    view.setIndeterminate(indeterminate);
+  }
+
+  @ReactProp(name = PROP_PROGRESS)
+  public void setProgress(ProgressBarContainerView view, double progress) {
+    view.setProgress(progress);
+  }
+
   @Override
   public ProgressBarShadowNode createShadowNodeInstance() {
     return new ProgressBarShadowNode();