Skip to content

Commit 49ddd7a

Browse files
clayallsoppclayallsopp
committed
Add SegmentedControlIOS
1 parent f3cd27c commit 49ddd7a

File tree

13 files changed

+514
-0
lines changed

13 files changed

+514
-0
lines changed

‎Examples/UIExplorer/SegmentedControlIOSExample.js‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
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 React = require('react-native');
19+
var {
20+
SegmentedControlIOS,
21+
Text,
22+
View,
23+
StyleSheet
24+
} = React;
25+
26+
var BasicSegmentedControlExample = React.createClass({
27+
render() {
28+
return (
29+
<View>
30+
<View style={{marginBottom: 10}}>
31+
<SegmentedControlIOS values={["One", "Two"]} />
32+
</View>
33+
<View>
34+
<SegmentedControlIOS values={["One", "Two", "Three", "Four", "Five"]} />
35+
</View>
36+
</View>
37+
);
38+
}
39+
});
40+
41+
var PreSelectedSegmentedControlExample = React.createClass({
42+
render() {
43+
return (
44+
<View>
45+
<View>
46+
<SegmentedControlIOS values={["One", "Two"]} selectedSegmentIndex={0} />
47+
</View>
48+
</View>
49+
);
50+
}
51+
});
52+
53+
var MomentarySegmentedControlExample = React.createClass({
54+
render() {
55+
return (
56+
<View>
57+
<View>
58+
<SegmentedControlIOS values={["One", "Two"]} momentary={true} />
59+
</View>
60+
</View>
61+
);
62+
}
63+
});
64+
65+
var DisabledSegmentedControlExample = React.createClass({
66+
render() {
67+
return (
68+
<View>
69+
<View>
70+
<SegmentedControlIOS disabled={true} values={["One", "Two"]} selectedSegmentIndex={1} />
71+
</View>
72+
</View>
73+
);
74+
},
75+
});
76+
77+
var ColorSegmentedControlExample = React.createClass({
78+
render() {
79+
return (
80+
<View>
81+
<View style={{marginBottom: 10}}>
82+
<SegmentedControlIOS tintColor="#ff0000" values={["One", "Two", "Three", "Four"]} selectedSegmentIndex={0} />
83+
</View>
84+
<View>
85+
<SegmentedControlIOS tintColor="#00ff00" values={["One", "Two", "Three"]} selectedSegmentIndex={1} />
86+
</View>
87+
</View>
88+
);
89+
},
90+
});
91+
92+
var EventSegmentedControlExample = React.createClass({
93+
getInitialState() {
94+
return {
95+
values: ["One", "Two", "Three"],
96+
value: 'Not selected',
97+
selectedSegmentIndex: undefined
98+
};
99+
},
100+
101+
render() {
102+
return (
103+
<View>
104+
<Text style={styles.text} >
105+
Value: {this.state.value}
106+
</Text>
107+
<Text style={styles.text} >
108+
Index: {this.state.selectedSegmentIndex}
109+
</Text>
110+
<SegmentedControlIOS
111+
values={this.state.values}
112+
selectedSegmentIndex={this.state.selectedSegmentIndex}
113+
onChange={this._onChange}
114+
onValueChange={this._onValueChange} />
115+
</View>
116+
);
117+
},
118+
119+
_onChange(event) {
120+
this.setState({
121+
selectedSegmentIndex: event.nativeEvent.selectedSegmentIndex,
122+
});
123+
},
124+
125+
_onValueChange(value) {
126+
this.setState({
127+
value: value,
128+
});
129+
}
130+
});
131+
132+
var styles = StyleSheet.create({
133+
text: {
134+
fontSize: 14,
135+
textAlign: 'center',
136+
fontWeight: '500',
137+
margin: 10,
138+
},
139+
});
140+
141+
exports.title = '<SegmentedControlIOS>';
142+
exports.displayName = 'SegmentedControlExample';
143+
exports.description = 'Native segmented control';
144+
exports.examples = [
145+
{
146+
title: 'Segmented controls can have values',
147+
render(): ReactElement { return <BasicSegmentedControlExample />; }
148+
},
149+
{
150+
title: 'Segmented controls can have a pre-selected value',
151+
render(): ReactElement { return <PreSelectedSegmentedControlExample />; }
152+
},
153+
{
154+
title: 'Segmented controls can be momentary',
155+
render(): ReactElement { return <MomentarySegmentedControlExample />; }
156+
},
157+
{
158+
title: 'Segmented controls can be disabled',
159+
render(): ReactElement { return <DisabledSegmentedControlExample />; }
160+
},
161+
{
162+
title: 'Custom colors can be provided',
163+
render(): ReactElement { return <ColorSegmentedControlExample />; }
164+
},
165+
{
166+
title: 'Change events can be detected',
167+
render(): ReactElement { return <EventSegmentedControlExample />; }
168+
}
169+
];

‎Examples/UIExplorer/UIExplorerList.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ var COMPONENTS = [
4343
NavigatorExample,
4444
require('./PickerExample'),
4545
require('./ScrollViewExample'),
46+
require('./SegmentedControlIOSExample'),
4647
require('./SliderIOSExample'),
4748
require('./SwitchExample'),
4849
require('./TabBarExample'),

‎IntegrationTests/IntegrationTestsApp.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ var TESTS = [
2626
require('./TimersTest'),
2727
require('./AsyncStorageTest'),
2828
require('./SimpleSnapshotTest'),
29+
require('./SegmentedControlIOSSnapshotTest'),
2930
];
3031

3132
TESTS.forEach(

‎IntegrationTests/IntegrationTestsTests/IntegrationTestsTests.m‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,11 @@ - (void)testSimpleSnapshot
7272
[_runner runTest:_cmd module:@"SimpleSnapshotTest"];
7373
}
7474

75+
- (void)testSegmentedControlIOS
76+
{
77+
[_runner runTest:_cmd module:@"SegmentedControlIOSSnapshotTest"];
78+
}
79+
7580
- (void)testZZZ_NotInRecordMode
7681
{
7782
RCTAssert(_runner.recordMode == NO, @"Don't forget to turn record mode back to NO before commit.");

‎IntegrationTests/IntegrationTestsTests/ReferenceImages/IntegrationTests-IntegrationTestsApp/[email protected]‎

72.5 KB
Loading

‎IntegrationTests/SegmentedControlIOSSnapshotTest.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
'use strict';
10+
11+
var React = require('react-native');
12+
var {
13+
StyleSheet,
14+
View,
15+
SegmentedControlIOS,
16+
} = React;
17+
18+
var { TestModule } = React.addons;
19+
20+
var SegmentedControlIOSSnapshotTest = React.createClass({
21+
componentDidMount() {
22+
if (!TestModule.verifySnapshot) {
23+
throw new Error('TestModule.verifySnapshot not defined.');
24+
}
25+
requestAnimationFrame(() => TestModule.verifySnapshot(this.done));
26+
},
27+
28+
done() {
29+
TestModule.markTestCompleted();
30+
},
31+
32+
render() {
33+
return (
34+
<View>
35+
<View style={styles.testRow}>
36+
<SegmentedControlIOS values={["One", "Two"]} />
37+
</View>
38+
<View style={styles.testRow}>
39+
<SegmentedControlIOS values={["One", "Two"]} selectedSegmentIndex={0} />
40+
</View>
41+
<View style={styles.testRow}>
42+
<SegmentedControlIOS values={["One", "Two", "Three", "Four", "Five"]} />
43+
</View>
44+
<View style={styles.testRow}>
45+
<SegmentedControlIOS disabled={true} values={["One", "Two"]} selectedSegmentIndex={1} />
46+
</View>
47+
<View style={styles.testRow}>
48+
<SegmentedControlIOS tintColor="#ff0000" values={["One", "Two", "Three", "Four"]} selectedSegmentIndex={0} />
49+
</View>
50+
<View style={styles.testRow}>
51+
<SegmentedControlIOS tintColor="#00ff00" values={["One", "Two", "Three"]} selectedSegmentIndex={1} />
52+
</View>
53+
</View>
54+
);
55+
}
56+
});
57+
58+
var styles = StyleSheet.create({
59+
testRow: {
60+
marginBottom: 10,
61+
}
62+
});
63+
64+
module.exports = SegmentedControlIOSSnapshotTest;

0 commit comments

Comments
 (0)