diff --git a/Examples/UIExplorer/ProgressBarAndroidExample.android.js b/Examples/UIExplorer/ProgressBarAndroidExample.android.js index 2c172198d..b58cd73ca 100644 --- a/Examples/UIExplorer/ProgressBarAndroidExample.android.js +++ b/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 ; + }, +}); + var ProgressBarAndroidExample = React.createClass({ statics: { @@ -55,9 +80,25 @@ var ProgressBarAndroidExample = React.createClass({ + + + + + + + + + + + + + + + + ); }, diff --git a/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js b/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js index 9a07db002..1588d21eb 100644 --- a/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js +++ b/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 }; }, diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ProgressBarContainerView.java b/ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ProgressBarContainerView.java index 08c11902f..233981506 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ProgressBarContainerView.java +++ b/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.WRAP_CONTENT)); + ViewGroup.LayoutParams.MATCH_PARENT, + 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) { diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ReactProgressBarViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ReactProgressBarViewManager.java index 0a26fa49c..01aa4a0b8 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ReactProgressBarViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ReactProgressBarViewManager.java @@ -27,6 +27,8 @@ public class ReactProgressBarViewManager extends BaseViewManager { /* 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();