Add new TextInput examples and fix bugs

The issue with null backgroundColor causes weird behavior

Currently disabled padding cell due to other bugs.

Author: ptmt

.travis.yml

@@ -1,6 +1,6 @@
 language: objective-c
 
-osx_image: xcode7.2
+osx_image: xcode7.3
 
 install:
   - brew reinstall nvm

Examples/UIExplorer/TextInputExample.osx.js

@@ -294,9 +294,8 @@ var styles = StyleSheet.create({
     height: 26,
     borderWidth: 0.5,
     borderColor: '#0f0f0f',
-    flex: 1,
-    fontSize: 13,
-    padding: 4,
+    //flex: 1,
+    fontSize: 13
   },
   multiline: {
     borderWidth: 0.5,
@@ -354,6 +353,22 @@ exports.displayName = (undefined: ?string);
 exports.title = '<TextInput>';
 exports.description = 'Single and multi-line text inputs.';
 exports.examples = [
+  {
+    title: 'Inverted background + placeholder + borderless',
+    render: function() {
+      return (
+        <View style={{backgroundColor: '#555', height: 50, flex: 1, paddingTop: 4, paddingLeft: 10, justifyContent: 'center'}}>
+          <TextInput
+            style={[styles.default, {height: 20, backgroundColor: 'transparent', color: '#ddd'}]}
+            bezeled={false}
+            placeholder={'placeholder'}
+            placeholderTextColor={'tomato'}
+            accessibilityLabel="I am the accessibility label for text input"
+          />
+        </View>
+      );
+    }
+  },
   {
     title: 'Auto-focus',
     render: function() {
@@ -366,6 +381,18 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Focus ring type = none',
+    render: function() {
+      return (
+        <TextInput
+          style={[styles.default]}
+          focusRingType={'none'}
+          accessibilityLabel="I am the accessibility label for text input"
+        />
+      );
+    }
+  },
   {
     title: "Live Re-Write (<sp>  ->  '_') + maxLength",
     render: function() {
@@ -426,98 +453,6 @@ exports.examples = [
       );
     }
   },
-  {
-    title: 'Keyboard types',
-    render: function() {
-      var keyboardTypes = [
-        'default',
-        'ascii-capable',
-        'numbers-and-punctuation',
-        'url',
-        'number-pad',
-        'phone-pad',
-        'name-phone-pad',
-        'email-address',
-        'decimal-pad',
-        'twitter',
-        'web-search',
-        'numeric',
-      ];
-      var examples = keyboardTypes.map((type) => {
-        return (
-          <WithLabel key={type} label={type}>
-            <TextInput
-              keyboardType={type}
-              style={styles.default}
-            />
-          </WithLabel>
-        );
-      });
-      return <View>{examples}</View>;
-    }
-  },
-  {
-    title: 'Keyboard appearance',
-    render: function() {
-      var keyboardAppearance = [
-        'default',
-        'light',
-        'dark',
-      ];
-      var examples = keyboardAppearance.map((type) => {
-        return (
-          <WithLabel key={type} label={type}>
-            <TextInput
-              keyboardAppearance={type}
-              style={styles.default}
-            />
-          </WithLabel>
-        );
-      });
-      return <View>{examples}</View>;
-    }
-  },
-  {
-    title: 'Return key types',
-    render: function() {
-      var returnKeyTypes = [
-        'default',
-        'go',
-        'google',
-        'join',
-        'next',
-        'route',
-        'search',
-        'send',
-        'yahoo',
-        'done',
-        'emergency-call',
-      ];
-      var examples = returnKeyTypes.map((type) => {
-        return (
-          <WithLabel key={type} label={type}>
-            <TextInput
-              returnKeyType={type}
-              style={styles.default}
-            />
-          </WithLabel>
-        );
-      });
-      return <View>{examples}</View>;
-    }
-  },
-  {
-    title: 'Enable return key automatically',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="true">
-            <TextInput enablesReturnKeyAutomatically={true} style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
   {
     title: 'Secure text entry',
     render: function() {

Libraries/Components/TextInput/TextInput.js

@@ -135,6 +135,15 @@ var TextInput = React.createClass({
       'done',
       'emergency-call',
     ]),
+    /**
+     * Determines the color of the keyboard.
+     * @platform osx
+     */
+    focusRingType: PropTypes.oneOf([
+      'default',
+      'none',
+      'exterior',
+    ]),
     /**
      * Limits the maximum number of characters that can be entered. Use this
      * instead of implementing the logic in JS to avoid flicker.
@@ -200,6 +209,10 @@ var TextInput = React.createClass({
      * The text color of the placeholder string
      */
     placeholderTextColor: PropTypes.string,
+    /**
+     * The color used by caret and selection
+     */
+    selectionColor: PropTypes.string,
     /**
      * If true, the text input obscures the text entered so that sensitive text
      * like passwords stay secure. The default value is false.
@@ -433,7 +446,7 @@ var TextInput = React.createClass({
           text={this._getText()}
         />;
     }
-
+    
     return (
       <TouchableWithoutFeedback
         onPress={this._onPress}

Libraries/Text/RCTText.h

@@ -9,6 +9,8 @@
 
 #import <AppKit/AppKit.h>
 
+CGRect UIEdgeInsetsInsetRect(CGRect rect, NSEdgeInsets insets);
+
 @interface RCTText : NSView
 
 @property (nonatomic, assign) NSEdgeInsets contentInset;

Libraries/Text/RCTText.m

@@ -14,6 +14,15 @@
 #import "NSView+React.h"
 #import <QuartzCore/CAShapeLayer.h>
 
+// https://github.com/BigZaphod/Chameleon/blob/84605ede274bd82b330d72dd6ac41e64eb925fd7/UIKit/Classes/UIGeometry.h
+CGRect UIEdgeInsetsInsetRect(CGRect rect, NSEdgeInsets insets) {
+  rect.origin.x    += insets.left;
+  rect.origin.y    += insets.top;
+  rect.size.width  -= (insets.left + insets.right);
+  rect.size.height -= (insets.top  + insets.bottom);
+  return rect;
+}
+
 @implementation NSBezierPath (BezierPathQuartzUtilities)
 // This method works only in OS X v10.2 and later.
 - (CGPathRef)quartzPath
@@ -134,15 +143,6 @@ - (void)setTextStorage:(NSTextStorage *)textStorage
   [self setNeedsDisplay:YES];
 }
 
-// https://github.com/BigZaphod/Chameleon/blob/84605ede274bd82b330d72dd6ac41e64eb925fd7/UIKit/Classes/UIGeometry.h
-static inline CGRect UIEdgeInsetsInsetRect(CGRect rect, NSEdgeInsets insets) {
-  rect.origin.x    += insets.left;
-  rect.origin.y    += insets.top;
-  rect.size.width  -= (insets.left + insets.right);
-  rect.size.height -= (insets.top  + insets.bottom);
-  return rect;
-}
-
 - (void)drawRect:(CGRect)dirtyRect
 {
   NSLayoutManager *layoutManager = _textStorage.layoutManagers.firstObject;

Libraries/Text/RCTTextField.h

@@ -13,6 +13,9 @@
 
 @class RCTEventDispatcher;
 
+@interface TextFieldCellWithPaddings : NSTextFieldCell
+@end
+
 @interface RCTTextField : NSTextField <NSTextFieldDelegate>
 
 @property (nonatomic, assign) BOOL caretHidden;

Libraries/Text/RCTTextField.m

@@ -13,6 +13,54 @@
 #import "RCTEventDispatcher.h"
 #import "RCTUtils.h"
 #import "NSView+React.h"
+#import "RCTText.h"
+
+
+//
+//@implementation TextFieldCellWithPaddings
+//
+//- (id)init
+//{
+//  self = [super init];
+//  if (self) {
+////    self.bordered = NO;
+////    self.drawsBackground = NO;
+//  }
+//  return self;
+//}
+//
+////- (NSRect)titleRectForBounds:(NSRect)theRect
+////{
+////  //NSRect titleFrame = [super titleRectForBounds:theRect];
+////
+////  //NSSize titleSize = [[self attributedStringValue] size];
+////  //titleFrame.origin.y = theRect.origin.y + (theRect.size.height - titleSize.height) / 2.0;
+////  return UIEdgeInsetsInsetRect(theRect, ((RCTTextField *)[self controlView]).contentInset);
+////}
+//
+//- (void)drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {
+//  NSRect titleRect = [self titleRectForBounds:cellFrame];
+//  [[self attributedStringValue] drawInRect:titleRect];
+//}
+//
+//
+////- (NSRect)drawingRectForBounds:(NSRect)rect
+////{
+////  NSRect rectInset = UIEdgeInsetsInsetRect(rect, _contentInset);
+////  return [super drawingRectForBounds:rectInset];
+////}
+//
+//// Required methods
+//- (id)initWithCoder:(NSCoder *)decoder {
+//  return [super initWithCoder:decoder];
+//}
+//- (id)initImageCell:(NSImage *)image {
+//  return [super initImageCell:image];
+//}
+//- (id)initTextCell:(NSString *)string {
+//  return [super initTextCell:string];
+//}
+//@end
 
 @implementation RCTTextField
 {
@@ -37,8 +85,9 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
 
     _eventDispatcher = eventDispatcher;
     _previousSelectionRange = self.currentEditor.selectedRange;
-    [self addObserver:self forKeyPath:@"selectedTextRange" options:0 context:nil];
     _reactSubviews = [NSMutableArray new];
+
+    [self addObserver:self forKeyPath:@"selectedTextRange" options:0 context:nil];
   }
   return self;
 }
@@ -60,8 +109,6 @@ - (void)sendKeyValueForString:(NSString *)string
                                eventCount:_nativeEventCount];
 }
 
-
-
 // This method is overridden for `onKeyPress`. The manager
 // will not send a keyPress for text that was pasted.
 - (void)paste:(id)sender
@@ -70,14 +117,6 @@ - (void)paste:(id)sender
   [[super currentEditor] paste:sender];
 }
 
-- (void)setInsertionPointColor:(NSColor *)color
-{
-  NSTextView* textField = (NSTextView*) [self currentEditor];
-  if( [textField respondsToSelector: @selector(setInsertionPointColor:)] ) {
-    [textField setInsertionPointColor: [NSColor blueColor]];
-  }
-}
-
 - (void)setText:(NSString *)text
 {
   NSInteger eventLag = _nativeEventCount - _mostRecentEventCount;
@@ -108,6 +147,7 @@ - (void)updatePlaceholder
     [self setPlaceholderAttributedString:attrString];
   }
 }
+
 - (void)setPlaceholder:(NSString *)placeholder
 {
   if (placeholder != nil && ![_placeholderString isEqual:placeholder]) {
@@ -116,6 +156,14 @@ - (void)setPlaceholder:(NSString *)placeholder
   }
 }
 
+- (void)setBackgroundColor:(NSString *)backgroundColor
+{
+  if (backgroundColor) {
+    [self setDrawsBackground:YES];
+    [self.cell setBackgroundColor:backgroundColor];
+  }
+}
+
 - (NSArray<NSView *> *)reactSubviews
 {
   // TODO: do we support subviews of textfield in React?

Libraries/Text/RCTTextFieldManager.m

@@ -102,7 +102,7 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowView:(RCTShadowView *)shadowVie
   NSNumber *reactTag = shadowView.reactTag;
   NSEdgeInsets padding = shadowView.paddingAsInsets;
   return ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTTextField *> *viewRegistry) {
-    viewRegistry[reactTag].contentInset = padding;
+    ((RCTTextField *)viewRegistry[reactTag]).contentInset = padding;
   };
 }
 
@@ -118,10 +118,8 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowView:(RCTShadowView *)shadowVie
 @end
 
 @interface RCTSecureTextFieldManager() <NSTextFieldDelegate>
-
 @end
 
-
 // TODO: extract common logic into one place
 @implementation RCTSecureTextFieldManager