<Text> module add textDecoration style attributes

Summary: This is simply a rebased and squashed version of @KJlmfe's PR over at facebook#845 It was actually already squashed into one commit, but for some reason that was hard to see from the original PR. Closes facebook#1869 Github Author: KJlmfe <[email protected]>
sahrens · Jul 7, 2015 · b57a14d · b57a14d
1 parent 02db374
commit b57a14d
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 2 deletions.
diff --git a/Examples/UIExplorer/TextExample.ios.js b/Examples/UIExplorer/TextExample.ios.js
@@ -185,6 +185,44 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'Text Decoration',
+  render: function() {
+    return (
+      <View>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'solid'}}>
+          Solid underline
+        </Text>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
+          Double underline with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
+          Dashed underline with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
+          Dotted underline with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'none'}}>
+          None textDecoration
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
+          Solid line-through
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
+          Double line-through with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
+          Dashed line-through with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
+          Dotted line-through with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'underline line-through'}}>
+          Both underline and line-through
+        </Text>
+      </View>
+    );
+  },
 }, {
   title: 'Nested',
   description: 'Nested text components will inherit the styles of their ' +

diff --git a/...ceImages/Examples-UIExplorer-UIExplorerApp.ios/[email protected] b/...ceImages/Examples-UIExplorer-UIExplorerApp.ios/[email protected]
diff --git 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
@@ -50,6 +50,7 @@ - (instancetype)init
     _fontSize = NAN;
     _letterSpacing = NAN;
     _isHighlighted = NO;
+    _textDecorationStyle = NSUnderlineStyleSingle;
   }
   return self;
 }
@@ -252,6 +253,24 @@ - (void)_setParagraphStyleOnAttributedString:(NSMutableAttributedString *)attrib
                              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 @@ - (void)set##setProp:(type)value;              \
 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
@@ -34,7 +34,6 @@ - (RCTShadowView *)shadowView
 
 #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 @@ - (RCTShadowView *)shadowView
 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
@@ -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
@@ -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
@@ -216,6 +216,20 @@ + (NSDate *)NSDate:(id)json
   @"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
@@ -241,6 +241,7 @@
 		83CBBA971A6020BB00E9B192 /* RCTTouchHandler.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTouchHandler.m; sourceTree = "<group>"; };
 		83CBBACA1A6023D300E9B192 /* RCTConvert.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTConvert.h; sourceTree = "<group>"; };
 		83CBBACB1A6023D300E9B192 /* RCTConvert.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert.m; sourceTree = "<group>"; };
+		E3BBC8EB1ADE6F47001BBD81 /* RCTTextDecorationLineType.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTTextDecorationLineType.h; sourceTree = "<group>"; };
 /* 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 = "<group>";

diff --git a/React/Views/RCTTextDecorationLineType.h 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 <Foundation/Foundation.h>
+
+typedef NS_ENUM(NSInteger, RCTTextDecorationLineType) {
+  RCTTextDecorationLineTypeNone = 0,
+  RCTTextDecorationLineTypeUnderline,
+  RCTTextDecorationLineTypeStrikethrough,
+  RCTTextDecorationLineTypeUnderlineStrikethrough,
+};