Skip to content

Commit 7d630ce

Browse files
quincycsrozele
quincycs
authored and
rozele
committed
feat(ProgressBarWindows): Adds ProgressBarWindows to React Native
Includes options to set the color and switch between determinate and indeterminate progress. Fixes microsoft#185
1 parent e9a9650 commit 7d630ce

File tree

11 files changed

+238
-1
lines changed

11 files changed

+238
-1
lines changed

‎Examples/UIExplorer/ProgressBarWindowsExample.windows.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* The examples provided by Facebook are for non-commercial testing and
3+
* evaluation purposes only.
4+
*
5+
* Facebook reserves all rights not expressly granted.
6+
*
7+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8+
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9+
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13+
*
14+
* @flow
15+
*/
16+
'use strict';
17+
18+
var ProgressBar = require('ProgressBarWindows');
19+
var React = require('React');
20+
var UIExplorerBlock = require('UIExplorerBlock');
21+
var UIExplorerPage = require('UIExplorerPage');
22+
23+
var TimerMixin = require('react-timer-mixin');
24+
25+
var MovingBar = React.createClass({
26+
mixins: [TimerMixin],
27+
28+
getInitialState: function() {
29+
return {
30+
progress: 0
31+
};
32+
},
33+
34+
componentDidMount: function() {
35+
this.setInterval(
36+
() => {
37+
var progress = (this.state.progress + 0.1) % 100;
38+
this.setState({progress: progress});
39+
}, 10
40+
);
41+
},
42+
43+
render: function() {
44+
return <ProgressBar progress={this.state.progress} {...this.props} />;
45+
},
46+
});
47+
48+
var ProgressBarWindowsExample = React.createClass({
49+
50+
statics: {
51+
title: '<ProgressBarWindows>',
52+
description: 'Visual indicator of progress of some operation. ' +
53+
'Shows a horizontal bar with either percent indeterminate progress.',
54+
},
55+
56+
render: function() {
57+
return (
58+
<UIExplorerPage title="ProgressBar Examples">
59+
<UIExplorerBlock title="Indeterminate ProgressBar">
60+
<ProgressBar />
61+
</UIExplorerBlock>
62+
63+
<UIExplorerBlock title="Determinate ProgressBar">
64+
<MovingBar indeterminate={false} />
65+
</UIExplorerBlock>
66+
67+
<UIExplorerBlock title="Red Indeterminate ProgressBar">
68+
<ProgressBar color="red" />
69+
</UIExplorerBlock>
70+
71+
<UIExplorerBlock title="Blue Determinate ProgressBar">
72+
<MovingBar color="blue" indeterminate={false} />
73+
</UIExplorerBlock>
74+
</UIExplorerPage>
75+
);
76+
},
77+
});
78+
79+
module.exports = ProgressBarWindowsExample;

‎Examples/UIExplorer/UIExplorerList.windows.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
3333
key: 'PickerWindowsExample',
3434
module: require('./PickerWindowsExample'),
3535
},
36+
{
37+
key: 'ProgressBarWindowsExample',
38+
module: require('./ProgressBarWindowsExample'),
39+
},
3640
{
3741
key: 'ScrollViewSimpleExample',
3842
module: require('./ScrollViewSimpleExample'),

‎Libraries/react-native/react-native.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ var ReactNative = {
4444
get PickerIOS() { return require('PickerIOS'); },
4545
get ProgressBarAndroid() { return require('ProgressBarAndroid'); },
4646
get ProgressViewIOS() { return require('ProgressViewIOS'); },
47+
get ProgressBarWindows() {return require('ProgressBarWindows');},
4748
get ScrollView() { return require('ScrollView'); },
4849
get SegmentedControlIOS() { return require('SegmentedControlIOS'); },
4950
get Slider() { return require('Slider'); },

‎Libraries/react-native/react-native.js.flow

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ var ReactNative = Object.assign(Object.create(require('ReactNative')), {
4242
PickerIOS: require('PickerIOS'),
4343
ProgressBarAndroid: require('ProgressBarAndroid'),
4444
ProgressViewIOS: require('ProgressViewIOS'),
45+
ProgressBarWindows: require('ProgressBarWindows'),
4546
ScrollView: require('ScrollView'),
4647
SegmentedControlIOS: require('SegmentedControlIOS'),
4748
SliderIOS: require('SliderIOS'),

‎ReactWindows/ReactNative/ReactNative.csproj

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,8 @@
295295
<Compile Include="UIManager\LayoutAnimation\LayoutAnimationController.cs" />
296296
<Compile Include="UIManager\LayoutAnimation\LayoutUpdateAnimation.cs" />
297297
<Compile Include="Views\Flip\ReactFlipViewManager.cs" />
298+
<Compile Include="Views\Progress\ReactProgressBarViewManager.cs" />
299+
<Compile Include="Views\Progress\ProgressBarShadowNode.cs" />
298300
<Compile Include="Views\Split\Events\SplitViewClosedEvent.cs" />
299301
<Compile Include="UIManager\LayoutAnimation\InterpolationType.cs" />
300302
<Compile Include="UIManager\UIImplementationProvider.cs" />

‎ReactWindows/ReactNative/Shell/MainReactPackage.cs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
using ReactNative.Views.Flip;
1616
using ReactNative.Views.Image;
1717
using ReactNative.Views.Picker;
18+
using ReactNative.Views.Progress;
1819
using ReactNative.Views.Scroll;
1920
using ReactNative.Views.Split;
2021
using ReactNative.Views.Switch;
@@ -81,7 +82,7 @@ public IReadOnlyList<IViewManager> CreateViewManagers(
8182
{
8283
new ReactFlipViewManager(),
8384
new ReactImageManager(),
84-
//new ReactProgressBarViewManager(),
85+
new ReactProgressBarViewManager(),
8586
new ReactPickerManager(),
8687
new ReactRawTextManager(),
8788
//new RecyclerViewBackedScrollViewManager(),

‎ReactWindows/ReactNative/Views/Progress/ProgressBarShadowNode.cs

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
using Facebook.CSSLayout;
2+
using ReactNative.UIManager;
3+
4+
namespace ReactNative.Views.Progress
5+
{
6+
class ProgressBarShadowNode : LayoutShadowNode
7+
{
8+
public ProgressBarShadowNode()
9+
{
10+
MeasureFunction = MeasureProgressBar;
11+
}
12+
13+
private static MeasureOutput MeasureProgressBar(CSSNode node, float width, float height)
14+
{
15+
var adjustedHeight = CSSConstants.IsUndefined(height) ? 4 : height;
16+
return new MeasureOutput(width, adjustedHeight);
17+
}
18+
}
19+
}

‎ReactWindows/ReactNative/Views/Progress/ReactProgressBarViewManager.cs

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
using ReactNative.UIManager;
2+
using ReactNative.UIManager.Annotations;
3+
using Windows.UI.Xaml.Controls;
4+
using Windows.UI.Xaml.Media;
5+
6+
namespace ReactNative.Views.Progress
7+
{
8+
class ReactProgressBarViewManager : BaseViewManager<ProgressBar, ProgressBarShadowNode>
9+
{
10+
public override string Name
11+
{
12+
get
13+
{
14+
return "WindowsProgressBar";
15+
}
16+
}
17+
18+
[ReactProp("indeterminate")]
19+
public void SetIndeterminate(ProgressBar view, bool value)
20+
{
21+
view.IsIndeterminate = value;
22+
}
23+
24+
[ReactProp("progress")]
25+
public void SetProgress(ProgressBar view, double value)
26+
{
27+
view.Value = value;
28+
}
29+
30+
[ReactProp(ViewProps.Color, CustomType = "Color")]
31+
public void SetColor(ProgressBar view, uint? color)
32+
{
33+
view.Foreground = color.HasValue
34+
? new SolidColorBrush(ColorHelpers.Parse(color.Value))
35+
: null;
36+
}
37+
38+
public override ProgressBarShadowNode CreateShadowNodeInstance()
39+
{
40+
return new ProgressBarShadowNode();
41+
}
42+
43+
public override void UpdateExtraData(ProgressBar root, object extraData)
44+
{
45+
}
46+
47+
protected override ProgressBar CreateViewInstance(ThemedReactContext reactContext)
48+
{
49+
return new ProgressBar();
50+
}
51+
}
52+
}

‎ReactWindows/js/Components/ProgressBarWindows/ProgressBarWindows.android.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*
9+
* @providesModule ProgressBarWindows
10+
*/
11+
'use strict';
12+
13+
module.exports = require('UnimplementedView');

‎ReactWindows/js/Components/ProgressBarWindows/ProgressBarWindows.ios.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*
9+
* @providesModule ProgressBarWindows
10+
*/
11+
'use strict';
12+
13+
module.exports = require('UnimplementedView');

‎ReactWindows/js/Components/ProgressBarWindows/ProgressBarWindows.windows.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Copyright 2004-present Facebook. All Rights Reserved.
3+
*
4+
* @providesModule ProgressBarWindows
5+
* @flow
6+
*/
7+
'use strict';
8+
9+
var React = require('React');
10+
var ReactPropTypes = require('ReactPropTypes');
11+
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
12+
var View = require('View');
13+
var ColorPropType = require('ColorPropType');
14+
15+
var requireNativeComponent = require('requireNativeComponent');
16+
17+
/**
18+
* React component that wraps the Windows-only `ProgressBar`. This component is used to indicate
19+
* that the app is loading or there is some activity in the app.
20+
*/
21+
var ProgressBarWindows = React.createClass({
22+
propTypes: {
23+
...View.propTypes,
24+
25+
/**
26+
* If the progress bar will show indeterminate progress.
27+
*/
28+
indeterminate: ReactPropTypes.bool,
29+
/**
30+
* The progress value (between 0 and 100).
31+
*/
32+
progress: ReactPropTypes.number,
33+
/**
34+
* Color of the progress bar.
35+
*/
36+
color: ColorPropType,
37+
},
38+
39+
getDefaultProps: function() {
40+
return {
41+
indeterminate: true
42+
};
43+
},
44+
45+
render: function() {
46+
return <WindowsProgressBar {...this.props}/> ;
47+
},
48+
});
49+
50+
var WindowsProgressBar = requireNativeComponent('WindowsProgressBar', ProgressBarWindows);
51+
52+
module.exports = ProgressBarWindows;

0 commit comments

Comments
 (0)