Fixed <TextInput>'s padding and border size computation and layout

Summary: Previosly `borderWidth` did not affect actual content inset (which was a problem).

Reviewed By: mmmulani

Differential Revision: D5072483

fbshipit-source-id: d43cba7414a9335b9f9fd4d1565d7aee403cce0e

Libraries/Text/RCTTextField.h

@@ -18,10 +18,11 @@
 @property (nonatomic, assign) BOOL caretHidden;
 @property (nonatomic, assign) BOOL selectTextOnFocus;
 @property (nonatomic, assign) BOOL blurOnSubmit;
-@property (nonatomic, assign) UIEdgeInsets contentInset;
 @property (nonatomic, strong) UIColor *placeholderTextColor;
 @property (nonatomic, assign) NSInteger mostRecentEventCount;
 @property (nonatomic, strong) NSNumber *maxLength;
+@property (nonatomic, assign) UIEdgeInsets reactPaddingInsets;
+@property (nonatomic, assign) UIEdgeInsets reactBorderInsets;
 
 @property (nonatomic, copy) RCTDirectEventBlock onSelectionChange;
 

Libraries/Text/RCTTextField.m

@@ -185,10 +185,11 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
   return [super caretRectForPosition:position];
 }
 
+#pragma mark - Positioning Overrides
+
 - (CGRect)textRectForBounds:(CGRect)bounds
 {
-  CGRect rect = [super textRectForBounds:bounds];
-  return UIEdgeInsetsInsetRect(rect, _contentInset);
+  return UIEdgeInsetsInsetRect([super textRectForBounds:bounds], self.reactCompoundInsets);
 }
 
 - (CGRect)editingRectForBounds:(CGRect)bounds

Libraries/Text/RCTTextFieldManager.m

@@ -78,9 +78,12 @@ RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
 - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowView:(RCTShadowView *)shadowView
 {
   NSNumber *reactTag = shadowView.reactTag;
-  UIEdgeInsets padding = shadowView.paddingAsInsets;
+  UIEdgeInsets paddingAsInsets = shadowView.paddingAsInsets;
+  UIEdgeInsets borderAsInsets = shadowView.borderAsInsets;
   return ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTTextField *> *viewRegistry) {
-    viewRegistry[reactTag].contentInset = padding;
+    RCTTextField *textField = viewRegistry[reactTag];
+    textField.reactPaddingInsets = paddingAsInsets;
+    textField.reactBorderInsets = borderAsInsets;
   };
 }
 

RNTester/js/TextInputExample.ios.js

@@ -763,8 +763,18 @@ exports.examples = [
     title: 'TextInput Intrinsic Size',
     render: function() {
       return (
-        <View style={{height: 50}}>
-          <TextInput style={{position: 'absolute', fontSize: 16, backgroundColor: '#eeeeee'}} placeholder="Placeholder defines intrinsic size" />
+        <View style={{height: 80}}>
+          <TextInput
+            style={{
+              position: 'absolute',
+              fontSize: 16,
+              backgroundColor: '#eeeeee',
+              borderWidth: 5,
+              padding: 10,
+              paddingTop: 20,
+            }}
+            placeholder="Placeholder defines intrinsic size"
+          />
         </View>
       );
     }

React/Views/UIView+React.h

@@ -78,6 +78,14 @@
 - (void)reactFocusIfNeeded;
 - (void)reactBlur;
 
+/**
+ * Useful properties for computing layout.
+ */
+@property (nonatomic, readonly) UIEdgeInsets reactBorderInsets;
+@property (nonatomic, readonly) UIEdgeInsets reactPaddingInsets;
+@property (nonatomic, readonly) UIEdgeInsets reactCompoundInsets;
+@property (nonatomic, readonly) CGRect reactContentFrame;
+
 #if RCT_DEV
 
 /**

React/Views/UIView+React.m

@@ -231,4 +231,35 @@
   [self resignFirstResponder];
 }
 
+#pragma mark - Layout
+
+- (UIEdgeInsets)reactBorderInsets
+{
+  CGFloat borderWidth = self.layer.borderWidth;
+  return UIEdgeInsetsMake(borderWidth, borderWidth, borderWidth, borderWidth);
+}
+
+- (UIEdgeInsets)reactPaddingInsets
+{
+  return UIEdgeInsetsZero;
+}
+
+- (UIEdgeInsets)reactCompoundInsets
+{
+  UIEdgeInsets borderInsets = self.reactBorderInsets;
+  UIEdgeInsets paddingInsets = self.reactPaddingInsets;
+
+  return UIEdgeInsetsMake(
+    borderInsets.top + paddingInsets.top,
+    borderInsets.left + paddingInsets.left,
+    borderInsets.bottom + paddingInsets.bottom,
+    borderInsets.right + paddingInsets.right
+  );
+}
+
+- (CGRect)reactContentFrame
+{
+  return UIEdgeInsetsInsetRect(self.bounds, self.reactCompoundInsets);
+}
+
 @end