Add SegmentedControlIOS

Summary: Fixes #534: ![screen shot 2015-03-31 at 7 52 10 pm](https://cloud.githubusercontent.com/assets/153704/6934038/742ddd34-d7e3-11e4-8f55-3eb7d9d3f1cd.png) ```jsx <SegmentedControlIOS tintColor="#ff0000" values={['One', 'Two', 'Three', 'Four']} selectedtIndex={0} momentary={false} enabled={true} onValueChange={ (value) => console.log(value) } /> ``` This only supports string-based segments, not images. Also doesn't support full customization (no separator images etc); I figure this is a good MVP to lock-down a basic API I also included a snapshot test case, but the images keep coming out funky. When I look at the sim, I see that the text labels show up for the selected segment, but the snapshot keeps coming out with no text on those segments. I tried forcing a delay, but same result. Is that explainable? Obviously happy to change anything about the API, code-style nitpicks, etc Closes https://github.com/facebook/react-native/pull/564 Github Author: Clay Allsopp <clay.allsopp@gmail.com> Test Plan: Imported from GitHub, without a `Test Plan:` line.
2026-04-26 13:25:51 +08:00 · 2015-04-29 08:15:28 -07:00
parent c82c6a07ae
commit 11f204748d
9 changed files with 433 additions and 0 deletions
--- a/React/React.xcodeproj/project.pbxproj
+++ b/React/React.xcodeproj/project.pbxproj
@@ -9,6 +9,8 @@
 /* Begin PBXBuildFile section */
 		000E6CEB1AB0E980000CDF4D /* RCTSourceCode.m in Sources */ = {isa = PBXBuildFile; fileRef = 000E6CEA1AB0E980000CDF4D /* RCTSourceCode.m */; };
 		00C1A2B31AC0B7E000E89A1C /* RCTDevMenu.m in Sources */ = {isa = PBXBuildFile; fileRef = 00C1A2B21AC0B7E000E89A1C /* RCTDevMenu.m */; };
+		131B6AF41AF1093D00FFC3E0 /* RCTSegmentedControl.m in Sources */ = {isa = PBXBuildFile; fileRef = 131B6AF11AF1093D00FFC3E0 /* RCTSegmentedControl.m */; };
+		131B6AF51AF1093D00FFC3E0 /* RCTSegmentedControlManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 131B6AF31AF1093D00FFC3E0 /* RCTSegmentedControlManager.m */; };
 		13456E931ADAD2DE009F94A7 /* RCTConvert+CoreLocation.m in Sources */ = {isa = PBXBuildFile; fileRef = 13456E921ADAD2DE009F94A7 /* RCTConvert+CoreLocation.m */; };
 		13456E961ADAD482009F94A7 /* RCTConvert+MapKit.m in Sources */ = {isa = PBXBuildFile; fileRef = 13456E951ADAD482009F94A7 /* RCTConvert+MapKit.m */; };
 		134FCB361A6D42D900051CC8 /* RCTSparseArray.m in Sources */ = {isa = PBXBuildFile; fileRef = 83BEE46D1A6D19BC00B5863B /* RCTSparseArray.m */; };
@@ -84,6 +86,10 @@
 		000E6CEA1AB0E980000CDF4D /* RCTSourceCode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSourceCode.m; sourceTree = "<group>"; };
 		00C1A2B11AC0B7E000E89A1C /* RCTDevMenu.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTDevMenu.h; sourceTree = "<group>"; };
 		00C1A2B21AC0B7E000E89A1C /* RCTDevMenu.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTDevMenu.m; sourceTree = "<group>"; };
+		131B6AF01AF1093D00FFC3E0 /* RCTSegmentedControl.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTSegmentedControl.h; sourceTree = "<group>"; };
+		131B6AF11AF1093D00FFC3E0 /* RCTSegmentedControl.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSegmentedControl.m; sourceTree = "<group>"; };
+		131B6AF21AF1093D00FFC3E0 /* RCTSegmentedControlManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTSegmentedControlManager.h; sourceTree = "<group>"; };
+		131B6AF31AF1093D00FFC3E0 /* RCTSegmentedControlManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSegmentedControlManager.m; sourceTree = "<group>"; };
 		13442BF21AA90E0B0037E5B0 /* RCTAnimationType.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTAnimationType.h; sourceTree = "<group>"; };
 		13442BF31AA90E0B0037E5B0 /* RCTPointerEvents.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTPointerEvents.h; sourceTree = "<group>"; };
 		13442BF41AA90E0B0037E5B0 /* RCTViewControllerProtocol.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTViewControllerProtocol.h; sourceTree = "<group>"; };
@@ -290,6 +296,10 @@
 				58114A141AAE854800E7D092 /* RCTPickerManager.h */,
 				58114A151AAE854800E7D092 /* RCTPickerManager.m */,
 				13442BF31AA90E0B0037E5B0 /* RCTPointerEvents.h */,
+				131B6AF01AF1093D00FFC3E0 /* RCTSegmentedControl.h */,
+				131B6AF11AF1093D00FFC3E0 /* RCTSegmentedControl.m */,
+				131B6AF21AF1093D00FFC3E0 /* RCTSegmentedControlManager.h */,
+				131B6AF31AF1093D00FFC3E0 /* RCTSegmentedControlManager.m */,
 				13B07FF61A6947C200A75B9A /* RCTScrollView.h */,
 				13B07FF71A6947C200A75B9A /* RCTScrollView.m */,
 				13B07FF81A6947C200A75B9A /* RCTScrollViewManager.h */,
@@ -489,6 +499,7 @@
 				13B0801E1A69489C00A75B9A /* RCTTextField.m in Sources */,
 				13B07FEF1A69327A00A75B9A /* RCTAlertManager.m in Sources */,
 				83CBBACC1A6023D300E9B192 /* RCTConvert.m in Sources */,
+				131B6AF41AF1093D00FFC3E0 /* RCTSegmentedControl.m in Sources */,
 				830A229E1A66C68A008503DA /* RCTRootView.m in Sources */,
 				13B07FF01A69327A00A75B9A /* RCTExceptionsManager.m in Sources */,
 				83CBBA5A1A601E9000E9B192 /* RCTRedBox.m in Sources */,
@@ -529,6 +540,7 @@
 				58114A161AAE854800E7D092 /* RCTPicker.m in Sources */,
 				137327E81AA5CF210034F82E /* RCTTabBarItem.m in Sources */,
 				13E067551A70F44B002CDEE1 /* RCTShadowView.m in Sources */,
+				131B6AF51AF1093D00FFC3E0 /* RCTSegmentedControlManager.m in Sources */,
 				58114A171AAE854800E7D092 /* RCTPickerManager.m in Sources */,
 				13B0801A1A69489C00A75B9A /* RCTNavigator.m in Sources */,
 				830BA4551A8E3BDA00D53203 /* RCTCache.m in Sources */,
--- a/React/Views/RCTSegmentedControl.h
+++ b/React/Views/RCTSegmentedControl.h
@@ -0,0 +1,20 @@
+//
+//  RCTSegmentedControl.h
+//  React
+//
+//  Created by Clay Allsopp on 3/31/15.
+//  Copyright (c) 2015 Facebook. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+
+@class RCTEventDispatcher;
+
+@interface RCTSegmentedControl : UISegmentedControl
+
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
+
+@property (nonatomic, copy) NSArray *values;
+@property (nonatomic, assign) NSInteger selectedIndex;
+
+@end
--- a/React/Views/RCTSegmentedControl.m
+++ b/React/Views/RCTSegmentedControl.m
@@ -0,0 +1,57 @@
+//
+//  RCTSegmentedControl.m
+//  React
+//
+//  Created by Clay Allsopp on 3/31/15.
+//  Copyright (c) 2015 Facebook. All rights reserved.
+//
+
+#import "RCTSegmentedControl.h"
+
+#import "RCTConvert.h"
+#import "RCTEventDispatcher.h"
+#import "UIView+React.h"
+
+@implementation RCTSegmentedControl
+{
+  RCTEventDispatcher *_eventDispatcher;
+}
+
+- (id)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
+{
+  if ((self = [super initWithFrame:CGRectZero])) {
+    _eventDispatcher = eventDispatcher;
+    _selectedIndex = self.selectedSegmentIndex;
+    [self addTarget:self action:@selector(onChange:)
+   forControlEvents:UIControlEventValueChanged];
+  }
+  return self;
+}
+
+- (void)setValues:(NSArray *)values
+{
+  _values = [values copy];
+  [self removeAllSegments];
+  for (NSString *value in values) {
+    [self insertSegmentWithTitle:value atIndex:self.numberOfSegments animated:NO];
+  }
+  super.selectedSegmentIndex = _selectedIndex;
+}
+
+- (void)setSelectedIndex:(NSInteger)selectedIndex
+{
+  _selectedIndex = selectedIndex;
+  super.selectedSegmentIndex = selectedIndex;
+}
+
+- (void)onChange:(UISegmentedControl *)sender
+{
+  NSDictionary *event = @{
+    @"target": self.reactTag,
+    @"value": [self titleForSegmentAtIndex:sender.selectedSegmentIndex],
+    @"selectedSegmentIndex": @(sender.selectedSegmentIndex)
+  };
+  [_eventDispatcher sendInputEventWithName:@"topChange" body:event];
+}
+
+@end
--- a/React/Views/RCTSegmentedControlManager.h
+++ b/React/Views/RCTSegmentedControlManager.h
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "RCTViewManager.h"
+
+@interface RCTSegmentedControlManager : RCTViewManager
+
+@end
--- a/React/Views/RCTSegmentedControlManager.m
+++ b/React/Views/RCTSegmentedControlManager.m
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "RCTSegmentedControlManager.h"
+
+#import "RCTBridge.h"
+#import "RCTConvert.h"
+#import "RCTSegmentedControl.h"
+
+@implementation RCTSegmentedControlManager
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+  return [[RCTSegmentedControl alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(values, NSStringArray)
+RCT_EXPORT_VIEW_PROPERTY(selectedIndex, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(momentary, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
+
+- (NSDictionary *)constantsToExport
+{
+  RCTSegmentedControl *view = [[RCTSegmentedControl alloc] init];
+  return @{
+    @"ComponentHeight": @(view.intrinsicContentSize.height),
+  };
+}
+
+@end