update API for selectedSegmentIndex

facebook · Apr 1, 2015 · 06c2d95 · 06c2d95
1 parent 67a91e0
commit 06c2d95
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 37 deletions.
diff --git a/Examples/UIExplorer/SegmentedControlIOSExample.js b/Examples/UIExplorer/SegmentedControlIOSExample.js
@@ -43,7 +43,7 @@ var PreSelectedSegmentedControlExample = React.createClass({
     return (
       <View>
         <View>
-          <SegmentedControlIOS values={["One", "Two"]} selectedValue="One" />
+          <SegmentedControlIOS values={["One", "Two"]} selectedSegmentIndex={0} />
         </View>
       </View>
     );
@@ -67,7 +67,7 @@ var DisabledSegmentedControlExample = React.createClass({
     return (
       <View>
         <View>
-          <SegmentedControlIOS disabled={true} values={["One", "Two"]} selectedValue="Two" />
+          <SegmentedControlIOS disabled={true} values={["One", "Two"]} selectedSegmentIndex={1} />
         </View>
       </View>
     );
@@ -79,10 +79,10 @@ var ColorSegmentedControlExample = React.createClass({
     return (
       <View>
         <View style={{marginBottom: 10}}>
-          <SegmentedControlIOS tintColor="#ff0000" values={["One", "Two", "Three", "Four"]} selectedValue={"One"} />
+          <SegmentedControlIOS tintColor="#ff0000" values={["One", "Two", "Three", "Four"]} selectedSegmentIndex={0} />
         </View>
         <View>
-          <SegmentedControlIOS tintColor="#00ff00" values={["One", "Two", "Three"]} selectedValue={"Two"} />
+          <SegmentedControlIOS tintColor="#00ff00" values={["One", "Two", "Three"]} selectedSegmentIndex={1} />
         </View>
       </View>
     );
@@ -92,20 +92,40 @@ var ColorSegmentedControlExample = React.createClass({
 var EventSegmentedControlExample = React.createClass({
   getInitialState() {
     return {
-      value: 'Not selected'
+      values: ["One", "Two", "Three"],
+      value: 'Not selected',
+      selectedSegmentIndex: undefined
     };
   },
+
   render() {
     return (
       <View>
         <Text style={styles.text} >
-          {this.state.value}
+          Value: {this.state.value}
+        </Text>
+        <Text style={styles.text} >
+          Index: {this.state.selectedSegmentIndex}
         </Text>
         <SegmentedControlIOS
-          values={["One", "Two", "Three"]}
-          onValueChange={(value) => this.setState({value: value})} />
+          values={this.state.values}
+          selectedSegmentIndex={this.state.selectedSegmentIndex}
+          onChange={this._onChange}
+          onValueChange={this._onValueChange} />
       </View>
     );
+  },
+
+  _onChange(event) {
+    this.setState({
+      selectedSegmentIndex: event.nativeEvent.selectedSegmentIndex,
+    });
+  },
+
+  _onValueChange(value) {
+    this.setState({
+      value: value,
+    });
   }
 });
 

diff --git a/IntegrationTests/SegmentedControlIOSSnapshotTest.js b/IntegrationTests/SegmentedControlIOSSnapshotTest.js
@@ -36,19 +36,19 @@ var SegmentedControlIOSSnapshotTest = React.createClass({
           <SegmentedControlIOS values={["One", "Two"]} />
         </View>
         <View style={styles.testRow}>
-          <SegmentedControlIOS values={["One", "Two"]} selectedValue="One" />
+          <SegmentedControlIOS values={["One", "Two"]} selectedSegmentIndex={0} />
         </View>
         <View style={styles.testRow}>
           <SegmentedControlIOS values={["One", "Two", "Three", "Four", "Five"]} />
         </View>
         <View style={styles.testRow}>
-          <SegmentedControlIOS disabled={true} values={["One", "Two"]} selectedValue="Two" />
+          <SegmentedControlIOS disabled={true} values={["One", "Two"]} selectedSegmentIndex={1} />
         </View>
         <View style={styles.testRow}>
-          <SegmentedControlIOS tintColor="#ff0000" values={["One", "Two", "Three", "Four"]} selectedValue={"One"} />
+          <SegmentedControlIOS tintColor="#ff0000" values={["One", "Two", "Three", "Four"]} selectedSegmentIndex={0} />
         </View>
         <View style={styles.testRow}>
-          <SegmentedControlIOS tintColor="#00ff00" values={["One", "Two", "Three"]} selectedValue={"Two"} />
+          <SegmentedControlIOS tintColor="#00ff00" values={["One", "Two", "Three"]} selectedSegmentIndex={1} />
         </View>
       </View>
     );

diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.js
@@ -46,10 +46,9 @@ var SegmentedControlIOS = React.createClass({
     values: PropTypes.arrayOf(PropTypes.string),
 
     /**
-     * The segmented to be pre-selected; if not in `props.values`, then
-     * has no effect.
+     * The index in `props.values` of the segment to be pre-selected
      */
-    selectedValue: PropTypes.string,
+    selectedSegmentIndex: PropTypes.number,
 
     /**
      * Used to style and layout the `SegmentedControl`.  See `StyleSheet.js` and
@@ -100,16 +99,16 @@ var SegmentedControlIOS = React.createClass({
   },
 
   render: function() {
-    var valuesAndSelectedValue = {
-      selectedValue: this.props.selectedValue,
+    var valuesAndSelectedSegmentIndex = {
+      selectedSegmentIndex: this.props.selectedSegmentIndex,
       values: this.props.values
-    }
+    };
     return (
       <RCTSegmentedControl
         ref={SEGMENTED_CONTROL_REFERENCE}
         style={[styles.segmentedControl, this.props.style]}
         enabled={!this.props.disabled}
-        valuesAndSelectedValue={valuesAndSelectedValue}
+        valuesAndSelectedSegmentIndex={valuesAndSelectedSegmentIndex}
         tintColor={this.props.tintColor}
         onChange={this._onChange}
         momentary={this.props.momentary}
@@ -131,8 +130,8 @@ var rkSegmentedControlAttributes = merge(ReactIOSViewAttributes.UIView, {
   momentary: true,
   enabled: true,
   // Send both values simultaneously, to avoid race condition where
-  // `selectedValue` is set before `values`
-  valuesAndSelectedValue: true
+  // `selectedSegmentIndex` is set before `values`
+  valuesAndSelectedSegmentIndex: true
 });
 
 

diff --git a/React/Views/RCTSegmentedControl.h b/React/Views/RCTSegmentedControl.h
@@ -14,6 +14,6 @@
 
 - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
 
-- (void)setValuesAndSelectedValue:(NSDictionary *)valuesAndSelectedValue;
+- (void)setValuesAndSelectedSegmentIndex:(NSDictionary *)valuesAndSelectedValue;
 
 @end
diff --git a/React/Views/RCTSegmentedControl.m b/React/Views/RCTSegmentedControl.m
@@ -25,36 +25,30 @@ - (id)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
 }
 
 
-- (void)setValuesAndSelectedValue:(NSDictionary *)valuesAndSelectedValue
+- (void)setValuesAndSelectedSegmentIndex:(NSDictionary *)valuesAndSelectedSegmentIndex
 {
   [self removeAllSegments];
 
-  NSArray *values = valuesAndSelectedValue[@"values"];
+  NSArray *values = valuesAndSelectedSegmentIndex[@"values"];
+  NSNumber *selectedSegmentIndex = valuesAndSelectedSegmentIndex[@"selectedSegmentIndex"];
+
   NSUInteger insertAtIndex = 0;
   for (NSString *value in values) {
     [self insertSegmentWithTitle:value atIndex:insertAtIndex animated:NO];
     insertAtIndex += 1;
   }
 
-  NSString *selectedValue = valuesAndSelectedValue[@"selectedValue"];
-  NSUInteger selectedSegmentIndex = NSNotFound;
-  for (NSUInteger i = 0; i < self.numberOfSegments; i++) {
-    NSString *segmentValue = [self titleForSegmentAtIndex:i];
-    if ([segmentValue isEqualToString:selectedValue]) {
-      selectedSegmentIndex = i;
-      break;
-    }
-  }
-  if (selectedSegmentIndex != NSNotFound) {
-    [self setSelectedSegmentIndex:selectedSegmentIndex];
+  if (selectedSegmentIndex) {
+    [self setSelectedSegmentIndex:[selectedSegmentIndex integerValue]];
   }
 }
 
 - (void)onChange:(UISegmentedControl *)sender
 {
   NSDictionary *event = @{
     @"target": self.reactTag,
-    @"value": [self titleForSegmentAtIndex:sender.selectedSegmentIndex]
+    @"value": [self titleForSegmentAtIndex:sender.selectedSegmentIndex],
+    @"selectedSegmentIndex": @(sender.selectedSegmentIndex)
   };
   [_eventDispatcher sendInputEventWithName:@"topChange" body:event];
 }

diff --git a/React/Views/RCTSegmentedControlManager.m b/React/Views/RCTSegmentedControlManager.m
@@ -20,7 +20,7 @@ - (UIView *)view
   return [[RCTSegmentedControl alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
 }
 
-RCT_EXPORT_VIEW_PROPERTY(valuesAndSelectedValue, NSDictionary);
+RCT_EXPORT_VIEW_PROPERTY(valuesAndSelectedSegmentIndex, NSDictionary);
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(momentary, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL);