From 06c2d959dace506806ec2ec9e297ab4fa2e23386 Mon Sep 17 00:00:00 2001
From: Clay Allsopp <clay.allsopp@gmail.com>
Date: Wed, 1 Apr 2015 12:34:28 -0700
Subject: [PATCH] update API for selectedSegmentIndex

---
 .../UIExplorer/SegmentedControlIOSExample.js  | 36 ++++++++++++++-----
 .../SegmentedControlIOSSnapshotTest.js        |  8 ++---
 .../SegmentedControlIOS.js                    | 17 +++++----
 React/Views/RCTSegmentedControl.h             |  2 +-
 React/Views/RCTSegmentedControl.m             | 22 +++++-------
 React/Views/RCTSegmentedControlManager.m      |  2 +-
 6 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/Examples/UIExplorer/SegmentedControlIOSExample.js b/Examples/UIExplorer/SegmentedControlIOSExample.js
index 1459c35a1a037a..e3dc291e55d422 100644
--- 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
index bb27e6e644407c..22164ad92ea4df 100644
--- 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
index fd5468bf1e6837..fc0c780d10e338 100644
--- 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
index a5bf61597f76a2..2812aba9c0821c 100644
--- 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
index 236676a25b4f44..b2a7a34b6eb44c 100644
--- a/React/Views/RCTSegmentedControl.m
+++ b/React/Views/RCTSegmentedControl.m
@@ -25,28 +25,21 @@ - (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]];
   }
 }
 
@@ -54,7 +47,8 @@ - (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
index fe77718f695e2b..e9108db86f69a5 100644
--- 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);