diff --git a/Examples/UIExplorer/TextExample.ios.js b/Examples/UIExplorer/TextExample.ios.js index 5abfae323..4aff00e73 100644 --- a/Examples/UIExplorer/TextExample.ios.js +++ b/Examples/UIExplorer/TextExample.ios.js @@ -185,6 +185,44 @@ exports.examples = [ ); }, +}, { + title: 'Text Decoration', + render: function() { + return ( + + + Solid underline + + + Double underline with custom color + + + Dashed underline with custom color + + + Dotted underline with custom color + + + None textDecoration + + + Solid line-through + + + Double line-through with custom color + + + Dashed line-through with custom color + + + Dotted line-through with custom color + + + Both underline and line-through + + + ); + }, }, { title: 'Nested', description: 'Nested text components will inherit the styles of their ' + 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 3ac73f3ad..5d5e3b968 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 4343110bf..fe87e99c1 100644 --- a/Libraries/Text/RCTShadowText.h +++ b/Libraries/Text/RCTShadowText.h @@ -8,6 +8,7 @@ */ #import "RCTShadowView.h" +#import "RCTTextDecorationLineType.h" extern NSString *const RCTIsHighlightedAttributeName; extern NSString *const RCTReactTagAttributeName; @@ -26,6 +27,9 @@ extern NSString *const RCTReactTagAttributeName; @property (nonatomic, assign) CGSize shadowOffset; @property (nonatomic, assign) NSTextAlignment textAlign; @property (nonatomic, assign) NSWritingDirection writingDirection; +@property (nonatomic, strong) UIColor *textDecorationColor; +@property (nonatomic, assign) NSUnderlineStyle textDecorationStyle; +@property (nonatomic, assign) RCTTextDecorationLineType textDecorationLine; - (void)recomputeText; diff --git a/Libraries/Text/RCTShadowText.m b/Libraries/Text/RCTShadowText.m index e97024928..621df1ed6 100644 --- a/Libraries/Text/RCTShadowText.m +++ b/Libraries/Text/RCTShadowText.m @@ -50,6 +50,7 @@ static css_dim_t RCTMeasure(void *context, float width) _fontSize = NAN; _letterSpacing = NAN; _isHighlighted = NO; + _textDecorationStyle = NSUnderlineStyleSingle; } return self; } @@ -252,6 +253,24 @@ static css_dim_t RCTMeasure(void *context, float width) value:paragraphStyle range:(NSRange){0, attributedString.length}]; } + + // Text decoration + if(_textDecorationLine == RCTTextDecorationLineTypeUnderline || + _textDecorationLine == RCTTextDecorationLineTypeUnderlineStrikethrough) { + [self _addAttribute:NSUnderlineStyleAttributeName withValue:@(_textDecorationStyle) + toAttributedString:attributedString]; + } + if(_textDecorationLine == RCTTextDecorationLineTypeStrikethrough || + _textDecorationLine == RCTTextDecorationLineTypeUnderlineStrikethrough){ + [self _addAttribute:NSStrikethroughStyleAttributeName withValue:@(_textDecorationStyle) + toAttributedString:attributedString]; + } + if(_textDecorationColor) { + [self _addAttribute:NSStrikethroughColorAttributeName withValue:_textDecorationColor + toAttributedString:attributedString]; + [self _addAttribute:NSUnderlineColorAttributeName withValue:_textDecorationColor + toAttributedString:attributedString]; + } } - (void)fillCSSNode:(css_node_t *)node @@ -297,6 +316,9 @@ 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(TextDecorationColor, _textDecorationColor, UIColor *); +RCT_TEXT_PROPERTY(TextDecorationLine, _textDecorationLine, RCTTextDecorationLineType); +RCT_TEXT_PROPERTY(TextDecorationStyle, _textDecorationStyle, NSUnderlineStyle); RCT_TEXT_PROPERTY(WritingDirection, _writingDirection, NSWritingDirection) @end diff --git a/Libraries/Text/RCTTextManager.m b/Libraries/Text/RCTTextManager.m index 3d2c73759..b5f959b73 100644 --- a/Libraries/Text/RCTTextManager.m +++ b/Libraries/Text/RCTTextManager.m @@ -34,7 +34,6 @@ RCT_EXPORT_MODULE() #pragma mark - Shadow properties -RCT_EXPORT_SHADOW_PROPERTY(writingDirection, NSWritingDirection) RCT_EXPORT_SHADOW_PROPERTY(color, UIColor) RCT_EXPORT_SHADOW_PROPERTY(fontFamily, NSString) RCT_EXPORT_SHADOW_PROPERTY(fontSize, CGFloat) @@ -43,9 +42,13 @@ RCT_EXPORT_SHADOW_PROPERTY(fontStyle, NSString) RCT_EXPORT_SHADOW_PROPERTY(isHighlighted, BOOL) RCT_EXPORT_SHADOW_PROPERTY(letterSpacing, CGFloat) RCT_EXPORT_SHADOW_PROPERTY(lineHeight, CGFloat) +RCT_EXPORT_SHADOW_PROPERTY(numberOfLines, NSUInteger) RCT_EXPORT_SHADOW_PROPERTY(shadowOffset, CGSize) RCT_EXPORT_SHADOW_PROPERTY(textAlign, NSTextAlignment) -RCT_EXPORT_SHADOW_PROPERTY(numberOfLines, NSUInteger) +RCT_EXPORT_SHADOW_PROPERTY(textDecorationStyle, NSUnderlineStyle) +RCT_EXPORT_SHADOW_PROPERTY(textDecorationColor, UIColor) +RCT_EXPORT_SHADOW_PROPERTY(textDecorationLine, RCTTextDecorationLineType) +RCT_EXPORT_SHADOW_PROPERTY(writingDirection, NSWritingDirection) - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(RCTSparseArray *)shadowViewRegistry { diff --git a/Libraries/Text/TextStylePropTypes.js b/Libraries/Text/TextStylePropTypes.js index b90367509..041a0d3e0 100644 --- a/Libraries/Text/TextStylePropTypes.js +++ b/Libraries/Text/TextStylePropTypes.js @@ -33,6 +33,13 @@ var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), { ['auto' /*default*/, 'ltr', 'rtl'] ), letterSpacing: ReactPropTypes.number, + textDecorationLine:ReactPropTypes.oneOf( + ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] + ), + textDecorationStyle:ReactPropTypes.oneOf( + ['solid' /*default*/, 'double', 'dotted','dashed'] + ), + textDecorationColor: ReactPropTypes.string, }); // Text doesn't support padding correctly (#4841912) diff --git a/React/Base/RCTConvert.h b/React/Base/RCTConvert.h index e96e4562d..1424d0d81 100644 --- a/React/Base/RCTConvert.h +++ b/React/Base/RCTConvert.h @@ -12,10 +12,12 @@ #import "Layout.h" #import "RCTAnimationType.h" +#import "RCTTextDecorationLineType.h" #import "RCTDefines.h" #import "RCTLog.h" #import "RCTPointerEvents.h" + /** * This class provides a collection of conversion functions for mapping * JSON objects to native types and classes. These are useful when writing @@ -54,6 +56,7 @@ typedef NSURL RCTFileURL; + (NSTimeInterval)NSTimeInterval:(id)json; + (NSTextAlignment)NSTextAlignment:(id)json; ++ (NSUnderlineStyle)NSUnderlineStyle:(id)json; + (NSWritingDirection)NSWritingDirection:(id)json; + (UITextAutocapitalizationType)UITextAutocapitalizationType:(id)json; + (UITextFieldViewMode)UITextFieldViewMode:(id)json; @@ -126,6 +129,7 @@ typedef BOOL css_clip_t; + (RCTPointerEvents)RCTPointerEvents:(id)json; + (RCTAnimationType)RCTAnimationType:(id)json; ++ (RCTTextDecorationLineType)RCTTextDecorationLineType:(id)json; @end diff --git a/React/Base/RCTConvert.m b/React/Base/RCTConvert.m index 6347bcc01..60316f740 100644 --- a/React/Base/RCTConvert.m +++ b/React/Base/RCTConvert.m @@ -216,6 +216,20 @@ RCT_ENUM_CONVERTER(NSTextAlignment, (@{ @"justify": @(NSTextAlignmentJustified), }), NSTextAlignmentNatural, integerValue) +RCT_ENUM_CONVERTER(NSUnderlineStyle, (@{ + @"solid": @(NSUnderlineStyleSingle), + @"double": @(NSUnderlineStyleDouble), + @"dotted": @(NSUnderlinePatternDot | NSUnderlineStyleSingle), + @"dashed": @(NSUnderlinePatternDash | NSUnderlineStyleSingle), +}), NSUnderlineStyleSingle, integerValue) + +RCT_ENUM_CONVERTER(RCTTextDecorationLineType, (@{ + @"none": @(RCTTextDecorationLineTypeNone), + @"underline": @(RCTTextDecorationLineTypeUnderline), + @"line-through": @(RCTTextDecorationLineTypeStrikethrough), + @"underline line-through": @(RCTTextDecorationLineTypeUnderlineStrikethrough), +}), RCTTextDecorationLineTypeNone, integerValue) + RCT_ENUM_CONVERTER(NSWritingDirection, (@{ @"auto": @(NSWritingDirectionNatural), @"ltr": @(NSWritingDirectionLeftToRight), diff --git a/React/React.xcodeproj/project.pbxproj b/React/React.xcodeproj/project.pbxproj index 4ca739182..c638d408c 100644 --- a/React/React.xcodeproj/project.pbxproj +++ b/React/React.xcodeproj/project.pbxproj @@ -241,6 +241,7 @@ 83CBBA971A6020BB00E9B192 /* RCTTouchHandler.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTouchHandler.m; sourceTree = ""; }; 83CBBACA1A6023D300E9B192 /* RCTConvert.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTConvert.h; sourceTree = ""; }; 83CBBACB1A6023D300E9B192 /* RCTConvert.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert.m; sourceTree = ""; }; + E3BBC8EB1ADE6F47001BBD81 /* RCTTextDecorationLineType.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTTextDecorationLineType.h; sourceTree = ""; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -378,6 +379,7 @@ 13B080241A694A8400A75B9A /* RCTWrapperViewController.m */, 13E067531A70F44B002CDEE1 /* UIView+React.h */, 13E067541A70F44B002CDEE1 /* UIView+React.m */, + E3BBC8EB1ADE6F47001BBD81 /* RCTTextDecorationLineType.h */, ); path = Views; sourceTree = ""; diff --git a/React/Views/RCTTextDecorationLineType.h b/React/Views/RCTTextDecorationLineType.h new file mode 100644 index 000000000..1167f5006 --- /dev/null +++ b/React/Views/RCTTextDecorationLineType.h @@ -0,0 +1,17 @@ +/** + * 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 + +typedef NS_ENUM(NSInteger, RCTTextDecorationLineType) { + RCTTextDecorationLineTypeNone = 0, + RCTTextDecorationLineTypeUnderline, + RCTTextDecorationLineTypeStrikethrough, + RCTTextDecorationLineTypeUnderlineStrikethrough, +};