Skip to content

Commit e959acd

Browse files
wagnermacielwagnermaciel
committed
2 parents 4ddb3d4 + 6401c59 commit e959acd

9 files changed

+491
-21
lines changed

‎android/.settings/org.eclipse.buildship.core.prefs

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎example/ProgressBarAndroidExample.android.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
* @flow
9+
*/
10+
11+
'use strict';
12+
13+
var ProgressBar = require('../../Libraries/Components/ProgressBarAndroid/ProgressBarAndroid');
14+
var React = require('react');
15+
var createReactClass = require('create-react-class');
16+
var RNTesterBlock = require('./RNTesterBlock');
17+
var RNTesterPage = require('./RNTesterPage');
18+
19+
var TimerMixin = require('react-timer-mixin');
20+
21+
var MovingBar = createReactClass({
22+
displayName: 'MovingBar',
23+
mixins: [TimerMixin],
24+
25+
getInitialState: function() {
26+
return {
27+
progress: 0,
28+
};
29+
},
30+
31+
componentDidMount: function() {
32+
this.setInterval(() => {
33+
var progress = (this.state.progress + 0.02) % 1;
34+
this.setState({progress: progress});
35+
}, 50);
36+
},
37+
38+
render: function() {
39+
return <ProgressBar progress={this.state.progress} {...this.props} />;
40+
},
41+
});
42+
43+
class ProgressBarAndroidExample extends React.Component<{}> {
44+
static title = '<ProgressBarAndroid>';
45+
static description = 'Horizontal bar to show the progress of some operation.';
46+
47+
render() {
48+
return (
49+
<RNTesterPage title="ProgressBar Examples">
50+
<RNTesterBlock title="Horizontal Indeterminate ProgressBar">
51+
{/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
52+
* found when making Flow check .android.js files. */}
53+
<ProgressBar styleAttr="Horizontal" />
54+
</RNTesterBlock>
55+
56+
<RNTesterBlock title="Horizontal ProgressBar">
57+
<MovingBar styleAttr="Horizontal" indeterminate={false} />
58+
</RNTesterBlock>
59+
60+
<RNTesterBlock title="Horizontal Black Indeterminate ProgressBar">
61+
{/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
62+
* found when making Flow check .android.js files. */}
63+
<ProgressBar styleAttr="Horizontal" color="black" />
64+
</RNTesterBlock>
65+
66+
<RNTesterBlock title="Horizontal Blue ProgressBar">
67+
<MovingBar
68+
styleAttr="Horizontal"
69+
indeterminate={false}
70+
color="blue"
71+
/>
72+
</RNTesterBlock>
73+
</RNTesterPage>
74+
);
75+
}
76+
}
77+
78+
module.exports = ProgressBarAndroidExample;

‎example/ProgressBarTestCase.java

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
package com.facebook.react.tests;
9+
10+
import android.content.res.Resources;
11+
import android.util.DisplayMetrics;
12+
import android.util.TypedValue;
13+
import android.view.View;
14+
import android.view.ViewGroup;
15+
import android.widget.FrameLayout;
16+
import android.widget.ProgressBar;
17+
import com.facebook.react.ReactRootView;
18+
import com.facebook.react.bridge.CatalystInstance;
19+
import com.facebook.react.bridge.JavaScriptModule;
20+
import com.facebook.react.bridge.UiThreadUtil;
21+
import com.facebook.react.modules.appstate.AppStateModule;
22+
import com.facebook.react.modules.deviceinfo.DeviceInfoModule;
23+
import com.facebook.react.modules.systeminfo.AndroidInfoModule;
24+
import com.facebook.react.testing.FakeWebSocketModule;
25+
import com.facebook.react.testing.ReactIntegrationTestCase;
26+
import com.facebook.react.testing.ReactTestHelper;
27+
import com.facebook.react.uimanager.UIManagerModule;
28+
import com.facebook.react.uimanager.ViewManager;
29+
import com.facebook.react.views.progressbar.ReactProgressBarViewManager;
30+
import com.facebook.react.views.view.ReactViewManager;
31+
import java.util.Arrays;
32+
import java.util.HashMap;
33+
import java.util.List;
34+
35+
/**
36+
* Test to verify that Progress bar renders as a view of the right size
37+
*/
38+
public class ProgressBarTestCase extends ReactIntegrationTestCase {
39+
40+
// Has same order of progressBars in ProgressBarTestModule
41+
private static final String[] styleList =
42+
new String[] {"Horizontal", "Small", "Large", "Inverse", "SmallInverse", "LargeInverse"};
43+
private static final HashMap<String, Integer> styles = new HashMap<String, Integer>();
44+
45+
static {
46+
styles.put("Horizontal", android.R.attr.progressBarStyleHorizontal);
47+
styles.put("Small", android.R.attr.progressBarStyleSmall);
48+
styles.put("Large", android.R.attr.progressBarStyleLarge);
49+
styles.put("Inverse", android.R.attr.progressBarStyleInverse);
50+
styles.put("SmallInverse", android.R.attr.progressBarStyleSmallInverse);
51+
styles.put("LargeInverse", android.R.attr.progressBarStyleLargeInverse);
52+
}
53+
54+
private static interface ProgressBarTestModule extends JavaScriptModule {
55+
public void renderProgressBarApplication(int rootTag);
56+
}
57+
58+
private UIManagerModule mUIManager;
59+
private CatalystInstance mInstance;
60+
private ReactRootView mRootView;
61+
62+
@Override
63+
protected void setUp() throws Exception {
64+
super.setUp();
65+
66+
List<ViewManager> viewManagers = Arrays.<ViewManager>asList(
67+
new ReactViewManager(),
68+
new ReactProgressBarViewManager());
69+
mUIManager =
70+
new UIManagerModule(getContext(), viewManagers, 0);
71+
UiThreadUtil.runOnUiThread(
72+
new Runnable() {
73+
@Override
74+
public void run() {
75+
mUIManager.onHostResume();
76+
}
77+
});
78+
waitForIdleSync();
79+
80+
mInstance = ReactTestHelper.catalystInstanceBuilder(this)
81+
.addNativeModule(mUIManager)
82+
.addNativeModule(new AndroidInfoModule(getContext()))
83+
.addNativeModule(new DeviceInfoModule(getContext()))
84+
.addNativeModule(new AppStateModule(getContext()))
85+
.addNativeModule(new FakeWebSocketModule())
86+
.build();
87+
88+
mRootView = new ReactRootView(getContext());
89+
DisplayMetrics metrics = getContext().getResources().getDisplayMetrics();
90+
mRootView.setLayoutParams(
91+
new FrameLayout.LayoutParams(metrics.widthPixels, metrics.heightPixels));
92+
int rootTag = mUIManager.addRootView(mRootView);
93+
mInstance.getJSModule(ProgressBarTestModule.class).renderProgressBarApplication(rootTag);
94+
waitForBridgeAndUIIdle();
95+
}
96+
97+
/**
98+
* Test that the sizes of the progressBars are setup correctly
99+
*/
100+
public void testProgressBarSizes() {
101+
for (String style : styleList) {
102+
ProgressBar newProgressBar =
103+
new ProgressBar(getContext(), null, styles.get(style));
104+
final int spec = View.MeasureSpec.makeMeasureSpec(
105+
ViewGroup.LayoutParams.WRAP_CONTENT,
106+
View.MeasureSpec.UNSPECIFIED);
107+
newProgressBar.measure(spec, spec);
108+
final int expectedHeight = newProgressBar.getMeasuredHeight();
109+
110+
// verify correct size of view containing ProgressBar
111+
View viewContainingProgressBar = getViewByTestId(mRootView, style);
112+
assertEquals(expectedHeight, viewContainingProgressBar.getHeight());
113+
114+
assertTrue(((ViewGroup) viewContainingProgressBar).getChildAt(0) instanceof ProgressBar);
115+
}
116+
}
117+
118+
public void testProgressBarWidth() {
119+
View viewContainingProgressBar = getViewByTestId(mRootView, "Horizontal200");
120+
assertEquals(viewContainingProgressBar.getWidth(), dpToPixels(200));
121+
ProgressBar progressBar = (ProgressBar) ((ViewGroup) viewContainingProgressBar).getChildAt(0);
122+
assertEquals(progressBar.getWidth(), dpToPixels(200));
123+
}
124+
125+
private int dpToPixels(int dp) {
126+
Resources r = getContext().getResources();
127+
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics());
128+
}
129+
}

‎example/ProgressBarTestModule.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
*/
9+
10+
'use strict';
11+
12+
const BatchedBridge = require('BatchedBridge');
13+
const React = require('React');
14+
const ReactNative = require('react-native');
15+
const {StyleSheet} = ReactNative;
16+
const ProgressBar = require('ProgressBarAndroid');
17+
const View = require('View');
18+
19+
const renderApplication = require('renderApplication');
20+
21+
class ProgressBarSampleApp extends React.Component {
22+
state = {};
23+
24+
render() {
25+
return (
26+
<View>
27+
<ProgressBar styleAttr="Horizontal" testID="Horizontal" />
28+
<ProgressBar styleAttr="Small" testID="Small" />
29+
<ProgressBar styleAttr="Large" testID="Large" />
30+
<ProgressBar styleAttr="Normal" testID="Normal" />
31+
<ProgressBar styleAttr="Inverse" testID="Inverse" />
32+
<ProgressBar styleAttr="SmallInverse" testID="SmallInverse" />
33+
<ProgressBar styleAttr="LargeInverse" testID="LargeInverse" />
34+
<View style={styles.wrapper}>
35+
<ProgressBar styleAttr="Horizontal" testID="Horizontal200" />
36+
</View>
37+
</View>
38+
);
39+
}
40+
}
41+
42+
const ProgressBarTestModule = {
43+
renderProgressBarApplication: function(rootTag) {
44+
renderApplication(ProgressBarSampleApp, {}, rootTag);
45+
},
46+
};
47+
48+
BatchedBridge.registerCallableModule(
49+
'ProgressBarTestModule',
50+
ProgressBarTestModule,
51+
);
52+
53+
const styles = StyleSheet.create({
54+
wrapper: {
55+
width: 200,
56+
},
57+
});
58+
59+
module.exports = ProgressBarTestModule;

‎example/RNTesterBlock.js

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
* @flow
9+
*/
10+
11+
'use strict';
12+
13+
var React = require('react');
14+
var PropTypes = require('prop-types');
15+
var ReactNative = require('react-native');
16+
var {StyleSheet, Text, View} = ReactNative;
17+
18+
class RNTesterBlock extends React.Component<
19+
{
20+
title?: string,
21+
description?: string,
22+
},
23+
$FlowFixMeState,
24+
> {
25+
static propTypes = {
26+
title: PropTypes.string,
27+
description: PropTypes.string,
28+
};
29+
30+
state = {description: (null: ?string)};
31+
32+
render() {
33+
var description;
34+
if (this.props.description) {
35+
description = (
36+
<Text style={styles.descriptionText}>{this.props.description}</Text>
37+
);
38+
}
39+
40+
return (
41+
<View style={styles.container}>
42+
<View style={styles.titleContainer}>
43+
<Text style={styles.titleText}>{this.props.title}</Text>
44+
{description}
45+
</View>
46+
<View style={styles.children}>
47+
{
48+
// $FlowFixMe found when converting React.createClass to ES6
49+
this.props.children
50+
}
51+
</View>
52+
</View>
53+
);
54+
}
55+
}
56+
57+
var styles = StyleSheet.create({
58+
container: {
59+
borderRadius: 3,
60+
borderWidth: 0.5,
61+
borderColor: '#d6d7da',
62+
backgroundColor: '#ffffff',
63+
margin: 10,
64+
marginVertical: 5,
65+
overflow: 'hidden',
66+
},
67+
titleContainer: {
68+
borderBottomWidth: 0.5,
69+
borderTopLeftRadius: 3,
70+
borderTopRightRadius: 2.5,
71+
borderBottomColor: '#d6d7da',
72+
backgroundColor: '#f6f7f8',
73+
paddingHorizontal: 10,
74+
paddingVertical: 5,
75+
},
76+
titleText: {
77+
fontSize: 14,
78+
fontWeight: '500',
79+
},
80+
descriptionText: {
81+
fontSize: 14,
82+
},
83+
disclosure: {
84+
position: 'absolute',
85+
top: 0,
86+
right: 0,
87+
padding: 10,
88+
},
89+
disclosureIcon: {
90+
width: 12,
91+
height: 8,
92+
},
93+
children: {
94+
margin: 10,
95+
},
96+
});
97+
98+
module.exports = RNTesterBlock;

0 commit comments

Comments
 (0)