Permalink
Browse files

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
  • Loading branch information...
shergin authored and facebook-github-bot committed May 29, 2017
1 parent 1018cc8 commit 44af4d19d312757c285cc0c4dd38cddf9a8b43ee
@@ -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;
@@ -185,10 +185,11 @@ - (CGRect)caretRectForPosition:(UITextPosition *)position
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
@@ -78,9 +78,12 @@ - (UIView *)view
- (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;
};
}
@@ -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>
);
}
@@ -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
/**
View
@@ -231,4 +231,35 @@ - (void)reactBlur {
[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

0 comments on commit 44af4d1

Please sign in to comment.