diff --git a/Examples/UIExplorer/TextExample.ios.js b/Examples/UIExplorer/TextExample.ios.js index ebc67b672..5abfae323 100644 --- a/Examples/UIExplorer/TextExample.ios.js +++ b/Examples/UIExplorer/TextExample.ios.js @@ -25,7 +25,7 @@ var { var Entity = React.createClass({ render: function() { return ( - + {this.props.children} ); @@ -34,7 +34,12 @@ var Entity = React.createClass({ var AttributeToggler = React.createClass({ getInitialState: function() { - return {fontWeight: '500', fontSize: 15}; + return {fontWeight: 'bold', fontSize: 15}; + }, + toggleWeight: function() { + this.setState({ + fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold' + }); }, increaseSize: function() { this.setState({ @@ -42,22 +47,26 @@ var AttributeToggler = React.createClass({ }); }, render: function() { - var curStyle = {fontSize: this.state.fontSize}; + var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize}; return ( - + Tap the controls below to change attributes. - See how it will even work on{' '} - - this nested text - - - {'>> Increase Size <<'} - + See how it will even work on this nested text - + + Toggle Weight + + + Increase Size + + ); } }); @@ -206,6 +215,12 @@ exports.examples = [ render: function() { return ( + + auto (default) - english LTR + + + أحب اللغة العربية auto (default) - arabic RTL + left left left left left left left left left left left left left left left @@ -282,43 +297,21 @@ exports.examples = [ description: 'backgroundColor is inherited from all types of views.', render: function() { return ( - - - Yellow background inherited from View parent, - - {' '}red background, - - {' '}blue background, - - {' '}inherited blue background, - - {' '}nested green background. - + + Yellow container background, + + {' '}red background, + + {' '}blue background, + + {' '}inherited blue background, + + {' '}nested green background. - - ); - }, -}, { - title: 'containerBackgroundColor attribute', - render: function() { - return ( - - - - - - - Default containerBackgroundColor (inherited) + backgroundColor wash - - - {"containerBackgroundColor: 'transparent' + backgroundColor wash"} - - + ); }, }, { @@ -346,8 +339,4 @@ var styles = StyleSheet.create({ marginBottom: 0, backgroundColor: 'rgba(100, 100, 100, 0.3)' }, - entity: { - fontWeight: '500', - color: '#527fe4', - }, }); diff --git a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testTextExampleSnapshot_1@2x.png b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testTextExampleSnapshot_1@2x.png index f37869de3..1e764f3c8 100644 Binary files a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testTextExampleSnapshot_1@2x.png and b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testTextExampleSnapshot_1@2x.png differ diff --git a/Libraries/Text/RCTShadowText.h b/Libraries/Text/RCTShadowText.h index d156bb4d6..4343110bf 100644 --- a/Libraries/Text/RCTShadowText.h +++ b/Libraries/Text/RCTShadowText.h @@ -25,7 +25,6 @@ extern NSString *const RCTReactTagAttributeName; @property (nonatomic, assign) NSUInteger numberOfLines; @property (nonatomic, assign) CGSize shadowOffset; @property (nonatomic, assign) NSTextAlignment textAlign; -@property (nonatomic, strong) UIColor *textBackgroundColor; @property (nonatomic, assign) NSWritingDirection writingDirection; - (void)recomputeText; diff --git a/Libraries/Text/RCTShadowText.m b/Libraries/Text/RCTShadowText.m index 65bee774e..e97024928 100644 --- a/Libraries/Text/RCTShadowText.m +++ b/Libraries/Text/RCTShadowText.m @@ -131,7 +131,8 @@ static css_dim_t RCTMeasure(void *context, float width) fontSize:nil fontWeight:nil fontStyle:nil - letterSpacing:nil]; + letterSpacing:nil + useBackgroundColor:NO]; } - (NSAttributedString *)_attributedStringWithFontFamily:(NSString *)fontFamily @@ -139,6 +140,7 @@ static css_dim_t RCTMeasure(void *context, float width) fontWeight:(NSString *)fontWeight fontStyle:(NSString *)fontStyle letterSpacing:(NSNumber *)letterSpacing + useBackgroundColor:(BOOL)useBackgroundColor { if (![self isTextDirty] && _cachedAttributedString) { return _cachedAttributedString; @@ -166,7 +168,7 @@ static css_dim_t RCTMeasure(void *context, float width) for (RCTShadowView *child in [self reactSubviews]) { if ([child isKindOfClass:[RCTShadowText class]]) { RCTShadowText *shadowText = (RCTShadowText *)child; - [attributedString appendAttributedString:[shadowText _attributedStringWithFontFamily:fontFamily fontSize:fontSize fontWeight:fontWeight fontStyle:fontStyle letterSpacing:letterSpacing]]; + [attributedString appendAttributedString:[shadowText _attributedStringWithFontFamily:fontFamily fontSize:fontSize fontWeight:fontWeight fontStyle:fontStyle letterSpacing:letterSpacing useBackgroundColor:YES]]; } else if ([child isKindOfClass:[RCTShadowRawText class]]) { RCTShadowRawText *shadowRawText = (RCTShadowRawText *)child; [attributedString appendAttributedString:[[NSAttributedString alloc] initWithString:[shadowRawText text] ?: @""]]; @@ -183,8 +185,8 @@ static css_dim_t RCTMeasure(void *context, float width) if (_isHighlighted) { [self _addAttribute:RCTIsHighlightedAttributeName withValue:@YES toAttributedString:attributedString]; } - if (_textBackgroundColor) { - [self _addAttribute:NSBackgroundColorAttributeName withValue:_textBackgroundColor toAttributedString:attributedString]; + if (useBackgroundColor && self.backgroundColor) { + [self _addAttribute:NSBackgroundColorAttributeName withValue:self.backgroundColor toAttributedString:attributedString]; } UIFont *font = [RCTConvert UIFont:nil withFamily:fontFamily size:fontSize weight:fontWeight style:fontStyle]; @@ -271,6 +273,12 @@ static css_dim_t RCTMeasure(void *context, float width) [self cssNode]->children_count = 0; } +- (void)setBackgroundColor:(UIColor *)backgroundColor +{ + super.backgroundColor = backgroundColor; + [self dirtyText]; +} + #define RCT_TEXT_PROPERTY(setProp, ivar, type) \ - (void)set##setProp:(type)value; \ { \ @@ -289,7 +297,6 @@ RCT_TEXT_PROPERTY(LineHeight, _lineHeight, CGFloat) RCT_TEXT_PROPERTY(NumberOfLines, _numberOfLines, NSUInteger) RCT_TEXT_PROPERTY(ShadowOffset, _shadowOffset, CGSize) RCT_TEXT_PROPERTY(TextAlign, _textAlign, NSTextAlignment) -RCT_TEXT_PROPERTY(TextBackgroundColor, _textBackgroundColor, UIColor *) RCT_TEXT_PROPERTY(WritingDirection, _writingDirection, NSWritingDirection) @end diff --git a/Libraries/Text/RCTTextManager.m b/Libraries/Text/RCTTextManager.m index 26c6329e2..3d2c73759 100644 --- a/Libraries/Text/RCTTextManager.m +++ b/Libraries/Text/RCTTextManager.m @@ -32,11 +32,6 @@ RCT_EXPORT_MODULE() return [[RCTShadowText alloc] init]; } -#pragma mark - View properties - -RCT_IGNORE_VIEW_PROPERTY(backgroundColor); -RCT_REMAP_VIEW_PROPERTY(containerBackgroundColor, backgroundColor, UIColor) - #pragma mark - Shadow properties RCT_EXPORT_SHADOW_PROPERTY(writingDirection, NSWritingDirection) @@ -50,8 +45,6 @@ RCT_EXPORT_SHADOW_PROPERTY(letterSpacing, CGFloat) RCT_EXPORT_SHADOW_PROPERTY(lineHeight, CGFloat) RCT_EXPORT_SHADOW_PROPERTY(shadowOffset, CGSize) RCT_EXPORT_SHADOW_PROPERTY(textAlign, NSTextAlignment) -RCT_REMAP_SHADOW_PROPERTY(backgroundColor, textBackgroundColor, UIColor) -RCT_REMAP_SHADOW_PROPERTY(containerBackgroundColor, backgroundColor, UIColor) RCT_EXPORT_SHADOW_PROPERTY(numberOfLines, NSUInteger) - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(RCTSparseArray *)shadowViewRegistry diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 7ff16c5d9..d02733749 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -97,7 +97,7 @@ var Text = React.createClass({ /** * Invoked on mount and layout changes with * - * {nativeEvent: { layout: {x, y, width, height}}}. + * {nativeEvent: {layout: {x, y, width, height}}}. */ onLayout: React.PropTypes.func, }, diff --git a/Libraries/Text/TextStylePropTypes.js b/Libraries/Text/TextStylePropTypes.js index 450d26f33..b90367509 100644 --- a/Libraries/Text/TextStylePropTypes.js +++ b/Libraries/Text/TextStylePropTypes.js @@ -25,8 +25,7 @@ var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), { fontStyle: ReactPropTypes.oneOf(['normal', 'italic']), lineHeight: ReactPropTypes.number, color: ReactPropTypes.string, - containerBackgroundColor: ReactPropTypes.string, - // NOTE: "justify" is supported only on iOS + // NOTE: 'justify is supported only on iOS textAlign: ReactPropTypes.oneOf( ['auto' /*default*/, 'left', 'right', 'center', 'justify'] ),