mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-29 04:35:36 +08:00
<Text> module add textDecoration style attributes
Summary: This is simply a rebased and squashed version of @KJlmfe's PR over at https://github.com/facebook/react-native/pull/845 It was actually already squashed into one commit, but for some reason that was hard to see from the original PR. Closes https://github.com/facebook/react-native/pull/1869 Github Author: KJlmfe <kjlmfe@gmail.com>
This commit is contained in:
@@ -185,6 +185,44 @@ exports.examples = [
|
|||||||
</View>
|
</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',
|
title: 'Nested',
|
||||||
description: 'Nested text components will inherit the styles of their ' +
|
description: 'Nested text components will inherit the styles of their ' +
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 267 KiB After Width: | Height: | Size: 269 KiB |
@@ -8,6 +8,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
#import "RCTShadowView.h"
|
#import "RCTShadowView.h"
|
||||||
|
#import "RCTTextDecorationLineType.h"
|
||||||
|
|
||||||
extern NSString *const RCTIsHighlightedAttributeName;
|
extern NSString *const RCTIsHighlightedAttributeName;
|
||||||
extern NSString *const RCTReactTagAttributeName;
|
extern NSString *const RCTReactTagAttributeName;
|
||||||
@@ -26,6 +27,9 @@ extern NSString *const RCTReactTagAttributeName;
|
|||||||
@property (nonatomic, assign) CGSize shadowOffset;
|
@property (nonatomic, assign) CGSize shadowOffset;
|
||||||
@property (nonatomic, assign) NSTextAlignment textAlign;
|
@property (nonatomic, assign) NSTextAlignment textAlign;
|
||||||
@property (nonatomic, assign) NSWritingDirection writingDirection;
|
@property (nonatomic, assign) NSWritingDirection writingDirection;
|
||||||
|
@property (nonatomic, strong) UIColor *textDecorationColor;
|
||||||
|
@property (nonatomic, assign) NSUnderlineStyle textDecorationStyle;
|
||||||
|
@property (nonatomic, assign) RCTTextDecorationLineType textDecorationLine;
|
||||||
|
|
||||||
- (void)recomputeText;
|
- (void)recomputeText;
|
||||||
|
|
||||||
|
|||||||
@@ -50,6 +50,7 @@ static css_dim_t RCTMeasure(void *context, float width)
|
|||||||
_fontSize = NAN;
|
_fontSize = NAN;
|
||||||
_letterSpacing = NAN;
|
_letterSpacing = NAN;
|
||||||
_isHighlighted = NO;
|
_isHighlighted = NO;
|
||||||
|
_textDecorationStyle = NSUnderlineStyleSingle;
|
||||||
}
|
}
|
||||||
return self;
|
return self;
|
||||||
}
|
}
|
||||||
@@ -252,6 +253,24 @@ static css_dim_t RCTMeasure(void *context, float width)
|
|||||||
value:paragraphStyle
|
value:paragraphStyle
|
||||||
range:(NSRange){0, attributedString.length}];
|
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
|
- (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(NumberOfLines, _numberOfLines, NSUInteger)
|
||||||
RCT_TEXT_PROPERTY(ShadowOffset, _shadowOffset, CGSize)
|
RCT_TEXT_PROPERTY(ShadowOffset, _shadowOffset, CGSize)
|
||||||
RCT_TEXT_PROPERTY(TextAlign, _textAlign, NSTextAlignment)
|
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)
|
RCT_TEXT_PROPERTY(WritingDirection, _writingDirection, NSWritingDirection)
|
||||||
|
|
||||||
@end
|
@end
|
||||||
|
|||||||
@@ -34,7 +34,6 @@ RCT_EXPORT_MODULE()
|
|||||||
|
|
||||||
#pragma mark - Shadow properties
|
#pragma mark - Shadow properties
|
||||||
|
|
||||||
RCT_EXPORT_SHADOW_PROPERTY(writingDirection, NSWritingDirection)
|
|
||||||
RCT_EXPORT_SHADOW_PROPERTY(color, UIColor)
|
RCT_EXPORT_SHADOW_PROPERTY(color, UIColor)
|
||||||
RCT_EXPORT_SHADOW_PROPERTY(fontFamily, NSString)
|
RCT_EXPORT_SHADOW_PROPERTY(fontFamily, NSString)
|
||||||
RCT_EXPORT_SHADOW_PROPERTY(fontSize, CGFloat)
|
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(isHighlighted, BOOL)
|
||||||
RCT_EXPORT_SHADOW_PROPERTY(letterSpacing, CGFloat)
|
RCT_EXPORT_SHADOW_PROPERTY(letterSpacing, CGFloat)
|
||||||
RCT_EXPORT_SHADOW_PROPERTY(lineHeight, CGFloat)
|
RCT_EXPORT_SHADOW_PROPERTY(lineHeight, CGFloat)
|
||||||
|
RCT_EXPORT_SHADOW_PROPERTY(numberOfLines, NSUInteger)
|
||||||
RCT_EXPORT_SHADOW_PROPERTY(shadowOffset, CGSize)
|
RCT_EXPORT_SHADOW_PROPERTY(shadowOffset, CGSize)
|
||||||
RCT_EXPORT_SHADOW_PROPERTY(textAlign, NSTextAlignment)
|
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
|
- (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(RCTSparseArray *)shadowViewRegistry
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -33,6 +33,13 @@ var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), {
|
|||||||
['auto' /*default*/, 'ltr', 'rtl']
|
['auto' /*default*/, 'ltr', 'rtl']
|
||||||
),
|
),
|
||||||
letterSpacing: ReactPropTypes.number,
|
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)
|
// Text doesn't support padding correctly (#4841912)
|
||||||
|
|||||||
@@ -12,10 +12,12 @@
|
|||||||
|
|
||||||
#import "Layout.h"
|
#import "Layout.h"
|
||||||
#import "RCTAnimationType.h"
|
#import "RCTAnimationType.h"
|
||||||
|
#import "RCTTextDecorationLineType.h"
|
||||||
#import "RCTDefines.h"
|
#import "RCTDefines.h"
|
||||||
#import "RCTLog.h"
|
#import "RCTLog.h"
|
||||||
#import "RCTPointerEvents.h"
|
#import "RCTPointerEvents.h"
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This class provides a collection of conversion functions for mapping
|
* This class provides a collection of conversion functions for mapping
|
||||||
* JSON objects to native types and classes. These are useful when writing
|
* JSON objects to native types and classes. These are useful when writing
|
||||||
@@ -54,6 +56,7 @@ typedef NSURL RCTFileURL;
|
|||||||
+ (NSTimeInterval)NSTimeInterval:(id)json;
|
+ (NSTimeInterval)NSTimeInterval:(id)json;
|
||||||
|
|
||||||
+ (NSTextAlignment)NSTextAlignment:(id)json;
|
+ (NSTextAlignment)NSTextAlignment:(id)json;
|
||||||
|
+ (NSUnderlineStyle)NSUnderlineStyle:(id)json;
|
||||||
+ (NSWritingDirection)NSWritingDirection:(id)json;
|
+ (NSWritingDirection)NSWritingDirection:(id)json;
|
||||||
+ (UITextAutocapitalizationType)UITextAutocapitalizationType:(id)json;
|
+ (UITextAutocapitalizationType)UITextAutocapitalizationType:(id)json;
|
||||||
+ (UITextFieldViewMode)UITextFieldViewMode:(id)json;
|
+ (UITextFieldViewMode)UITextFieldViewMode:(id)json;
|
||||||
@@ -126,6 +129,7 @@ typedef BOOL css_clip_t;
|
|||||||
|
|
||||||
+ (RCTPointerEvents)RCTPointerEvents:(id)json;
|
+ (RCTPointerEvents)RCTPointerEvents:(id)json;
|
||||||
+ (RCTAnimationType)RCTAnimationType:(id)json;
|
+ (RCTAnimationType)RCTAnimationType:(id)json;
|
||||||
|
+ (RCTTextDecorationLineType)RCTTextDecorationLineType:(id)json;
|
||||||
|
|
||||||
@end
|
@end
|
||||||
|
|
||||||
|
|||||||
@@ -216,6 +216,20 @@ RCT_ENUM_CONVERTER(NSTextAlignment, (@{
|
|||||||
@"justify": @(NSTextAlignmentJustified),
|
@"justify": @(NSTextAlignmentJustified),
|
||||||
}), NSTextAlignmentNatural, integerValue)
|
}), 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, (@{
|
RCT_ENUM_CONVERTER(NSWritingDirection, (@{
|
||||||
@"auto": @(NSWritingDirectionNatural),
|
@"auto": @(NSWritingDirectionNatural),
|
||||||
@"ltr": @(NSWritingDirectionLeftToRight),
|
@"ltr": @(NSWritingDirectionLeftToRight),
|
||||||
|
|||||||
@@ -241,6 +241,7 @@
|
|||||||
83CBBA971A6020BB00E9B192 /* RCTTouchHandler.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTouchHandler.m; sourceTree = "<group>"; };
|
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>"; };
|
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>"; };
|
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 */
|
/* End PBXFileReference section */
|
||||||
|
|
||||||
/* Begin PBXFrameworksBuildPhase section */
|
/* Begin PBXFrameworksBuildPhase section */
|
||||||
@@ -378,6 +379,7 @@
|
|||||||
13B080241A694A8400A75B9A /* RCTWrapperViewController.m */,
|
13B080241A694A8400A75B9A /* RCTWrapperViewController.m */,
|
||||||
13E067531A70F44B002CDEE1 /* UIView+React.h */,
|
13E067531A70F44B002CDEE1 /* UIView+React.h */,
|
||||||
13E067541A70F44B002CDEE1 /* UIView+React.m */,
|
13E067541A70F44B002CDEE1 /* UIView+React.m */,
|
||||||
|
E3BBC8EB1ADE6F47001BBD81 /* RCTTextDecorationLineType.h */,
|
||||||
);
|
);
|
||||||
path = Views;
|
path = Views;
|
||||||
sourceTree = "<group>";
|
sourceTree = "<group>";
|
||||||
|
|||||||
17
React/Views/RCTTextDecorationLineType.h
Normal file
17
React/Views/RCTTextDecorationLineType.h
Normal file
@@ -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,
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user