mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
f4de45800f
Summary: This Pull Request implements the PlatformColor proposal discussed at https://github.com/react-native-community/discussions-and-proposals/issues/126. The changes include implementations for iOS and Android as well as a PlatformColorExample page in RNTester. Every native platform has the concept of system defined colors. Instead of specifying a concrete color value the app developer can choose a system color that varies in appearance depending on a system theme settings such Light or Dark mode, accessibility settings such as a High Contrast mode, and even its context within the app such as the traits of a containing view or window. The proposal is to add true platform color support to react-native by extending the Flow type `ColorValue` with platform specific color type information for each platform and to provide a convenience function, `PlatformColor()`, for instantiating platform specific ColorValue objects. `PlatformColor(name [, name ...])` where `name` is a system color name on a given platform. If `name` does not resolve to a color for any reason, the next `name` in the argument list will be resolved and so on. If none of the names resolve, a RedBox error occurs. This allows a latest platform color to be used, but if running on an older platform it will fallback to a previous version. The function returns a `ColorValue`. On iOS the values of `name` is one of the iOS [UI Element](https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors) or [Standard Color](https://developer.apple.com/documentation/uikit/uicolor/standard_colors) names such as `labelColor` or `systemFillColor`. On Android the `name` values are the same [app resource](https://developer.android.com/guide/topics/resources/providing-resources) path strings that can be expressed in XML: XML Resource: `@ [<package_name>:]<resource_type>/<resource_name>` Style reference from current theme: `?[<package_name>:][<resource_type>/]<resource_name>` For example: - `?android:colorError` - `?android:attr/colorError` - `?attr/colorPrimary` - `?colorPrimaryDark` - `android:color/holo_purple` - `color/catalyst_redbox_background` On iOS another type of system dynamic color can be created using the `IOSDynamicColor({dark: <color>, light:<color>})` method. The arguments are a tuple containing custom colors for light and dark themes. Such dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes. Example: `<View style={{ backgroundColor: IOSDynamicColor({light: 'black', dark: 'white'}) }}/>` Other platforms could create platform specific functions similar to `IOSDynamicColor` per the needs of those platforms. For example, macOS has a similar dynamic color type that could be implemented via a `MacDynamicColor`. On Windows custom brushes that tint or otherwise modify a system brush could be created using a platform specific method. ## Changelog [General] [Added] - Added PlatformColor implementations for iOS and Android Pull Request resolved: https://github.com/facebook/react-native/pull/27908 Test Plan: The changes have been tested using the RNTester test app for iOS and Android. On iOS a set of XCTestCase's were added to the Unit Tests. <img width="924" alt="PlatformColor-ios-android" src="https://user-images.githubusercontent.com/30053638/73472497-ff183a80-433f-11ea-90d8-2b04338bbe79.png"> In addition `PlatformColor` support has been added to other out-of-tree platforms such as macOS and Windows has been implemented using these changes: react-native for macOS branch: https://github.com/microsoft/react-native/compare/master...tom-un:tomun/platformcolors react-native for Windows branch: https://github.com/microsoft/react-native-windows/compare/master...tom-un:tomun/platformcolors iOS |Light|Dark| |{F229354502}|{F229354515}| Android |Light|Dark| |{F230114392}|{F230114490}| {F230122700} Reviewed By: hramos Differential Revision: D19837753 Pulled By: TheSavior fbshipit-source-id: 82ca70d40802f3b24591bfd4b94b61f3c38ba829
270 lines
7.4 KiB
Objective-C
270 lines
7.4 KiB
Objective-C
/*
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
#import <React/RCTTextView.h>
|
|
|
|
#import <MobileCoreServices/UTCoreTypes.h>
|
|
|
|
#import <React/RCTUtils.h>
|
|
#import <React/UIView+React.h>
|
|
|
|
#import <React/RCTTextShadowView.h>
|
|
|
|
@implementation RCTTextView
|
|
{
|
|
CAShapeLayer *_highlightLayer;
|
|
UILongPressGestureRecognizer *_longPressGestureRecognizer;
|
|
|
|
NSArray<UIView *> *_Nullable _descendantViews;
|
|
NSTextStorage *_Nullable _textStorage;
|
|
CGRect _contentFrame;
|
|
}
|
|
|
|
- (instancetype)initWithFrame:(CGRect)frame
|
|
{
|
|
if (self = [super initWithFrame:frame]) {
|
|
self.isAccessibilityElement = YES;
|
|
self.accessibilityTraits |= UIAccessibilityTraitStaticText;
|
|
self.opaque = NO;
|
|
self.contentMode = UIViewContentModeRedraw;
|
|
}
|
|
return self;
|
|
}
|
|
|
|
- (NSString *)description
|
|
{
|
|
NSString *superDescription = super.description;
|
|
NSRange semicolonRange = [superDescription rangeOfString:@";"];
|
|
NSString *replacement = [NSString stringWithFormat:@"; reactTag: %@; text: %@", self.reactTag, _textStorage.string];
|
|
return [superDescription stringByReplacingCharactersInRange:semicolonRange withString:replacement];
|
|
}
|
|
|
|
- (void)setSelectable:(BOOL)selectable
|
|
{
|
|
if (_selectable == selectable) {
|
|
return;
|
|
}
|
|
|
|
_selectable = selectable;
|
|
|
|
if (_selectable) {
|
|
[self enableContextMenu];
|
|
}
|
|
else {
|
|
[self disableContextMenu];
|
|
}
|
|
}
|
|
|
|
- (void)reactSetFrame:(CGRect)frame
|
|
{
|
|
// Text looks super weird if its frame is animated.
|
|
// This disables the frame animation, without affecting opacity, etc.
|
|
[UIView performWithoutAnimation:^{
|
|
[super reactSetFrame:frame];
|
|
}];
|
|
}
|
|
|
|
- (void)didUpdateReactSubviews
|
|
{
|
|
// Do nothing, as subviews are managed by `setTextStorage:` method
|
|
}
|
|
|
|
- (void)setTextStorage:(NSTextStorage *)textStorage
|
|
contentFrame:(CGRect)contentFrame
|
|
descendantViews:(NSArray<UIView *> *)descendantViews
|
|
{
|
|
_textStorage = textStorage;
|
|
_contentFrame = contentFrame;
|
|
|
|
// FIXME: Optimize this.
|
|
for (UIView *view in _descendantViews) {
|
|
[view removeFromSuperview];
|
|
}
|
|
|
|
_descendantViews = descendantViews;
|
|
|
|
for (UIView *view in descendantViews) {
|
|
[self addSubview:view];
|
|
}
|
|
|
|
[self setNeedsDisplay];
|
|
}
|
|
|
|
- (void)drawRect:(CGRect)rect
|
|
{
|
|
[super drawRect:rect];
|
|
if (!_textStorage) {
|
|
return;
|
|
}
|
|
|
|
|
|
NSLayoutManager *layoutManager = _textStorage.layoutManagers.firstObject;
|
|
NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
|
|
|
|
NSRange glyphRange = [layoutManager glyphRangeForTextContainer:textContainer];
|
|
[layoutManager drawBackgroundForGlyphRange:glyphRange atPoint:_contentFrame.origin];
|
|
[layoutManager drawGlyphsForGlyphRange:glyphRange atPoint:_contentFrame.origin];
|
|
|
|
__block UIBezierPath *highlightPath = nil;
|
|
NSRange characterRange = [layoutManager characterRangeForGlyphRange:glyphRange
|
|
actualGlyphRange:NULL];
|
|
[_textStorage enumerateAttribute:RCTTextAttributesIsHighlightedAttributeName
|
|
inRange:characterRange
|
|
options:0
|
|
usingBlock:
|
|
^(NSNumber *value, NSRange range, __unused BOOL *stop) {
|
|
if (!value.boolValue) {
|
|
return;
|
|
}
|
|
|
|
[layoutManager enumerateEnclosingRectsForGlyphRange:range
|
|
withinSelectedGlyphRange:range
|
|
inTextContainer:textContainer
|
|
usingBlock:
|
|
^(CGRect enclosingRect, __unused BOOL *anotherStop) {
|
|
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(enclosingRect, -2, -2) cornerRadius:2];
|
|
if (highlightPath) {
|
|
[highlightPath appendPath:path];
|
|
} else {
|
|
highlightPath = path;
|
|
}
|
|
}
|
|
];
|
|
}];
|
|
|
|
if (highlightPath) {
|
|
if (!_highlightLayer) {
|
|
_highlightLayer = [CAShapeLayer layer];
|
|
_highlightLayer.fillColor = [UIColor colorWithWhite:0 alpha:0.25].CGColor;
|
|
[self.layer addSublayer:_highlightLayer];
|
|
}
|
|
_highlightLayer.position = _contentFrame.origin;
|
|
_highlightLayer.path = highlightPath.CGPath;
|
|
} else {
|
|
[_highlightLayer removeFromSuperlayer];
|
|
_highlightLayer = nil;
|
|
}
|
|
}
|
|
|
|
|
|
- (NSNumber *)reactTagAtPoint:(CGPoint)point
|
|
{
|
|
NSNumber *reactTag = self.reactTag;
|
|
|
|
CGFloat fraction;
|
|
NSLayoutManager *layoutManager = _textStorage.layoutManagers.firstObject;
|
|
NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
|
|
NSUInteger characterIndex = [layoutManager characterIndexForPoint:point
|
|
inTextContainer:textContainer
|
|
fractionOfDistanceBetweenInsertionPoints:&fraction];
|
|
|
|
// If the point is not before (fraction == 0.0) the first character and not
|
|
// after (fraction == 1.0) the last character, then the attribute is valid.
|
|
if (_textStorage.length > 0 && (fraction > 0 || characterIndex > 0) && (fraction < 1 || characterIndex < _textStorage.length - 1)) {
|
|
reactTag = [_textStorage attribute:RCTTextAttributesTagAttributeName atIndex:characterIndex effectiveRange:NULL];
|
|
}
|
|
|
|
return reactTag;
|
|
}
|
|
|
|
- (void)didMoveToWindow
|
|
{
|
|
[super didMoveToWindow];
|
|
|
|
if (!self.window) {
|
|
self.layer.contents = nil;
|
|
if (_highlightLayer) {
|
|
[_highlightLayer removeFromSuperlayer];
|
|
_highlightLayer = nil;
|
|
}
|
|
} else if (_textStorage) {
|
|
[self setNeedsDisplay];
|
|
}
|
|
}
|
|
|
|
#pragma mark - Accessibility
|
|
|
|
- (NSString *)accessibilityLabel
|
|
{
|
|
NSString *superAccessibilityLabel = [super accessibilityLabel];
|
|
if (superAccessibilityLabel) {
|
|
return superAccessibilityLabel;
|
|
}
|
|
return _textStorage.string;
|
|
}
|
|
|
|
#pragma mark - Context Menu
|
|
|
|
- (void)enableContextMenu
|
|
{
|
|
_longPressGestureRecognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];
|
|
[self addGestureRecognizer:_longPressGestureRecognizer];
|
|
}
|
|
|
|
- (void)disableContextMenu
|
|
{
|
|
[self removeGestureRecognizer:_longPressGestureRecognizer];
|
|
_longPressGestureRecognizer = nil;
|
|
}
|
|
|
|
- (void)handleLongPress:(UILongPressGestureRecognizer *)gesture
|
|
{
|
|
// TODO: Adopt showMenuFromRect (necessary for UIKitForMac)
|
|
#if !TARGET_OS_TV && !TARGET_OS_UIKITFORMAC
|
|
UIMenuController *menuController = [UIMenuController sharedMenuController];
|
|
|
|
if (menuController.isMenuVisible) {
|
|
return;
|
|
}
|
|
|
|
if (!self.isFirstResponder) {
|
|
[self becomeFirstResponder];
|
|
}
|
|
|
|
[menuController setTargetRect:self.bounds inView:self];
|
|
[menuController setMenuVisible:YES animated:YES];
|
|
#endif
|
|
}
|
|
|
|
- (BOOL)canBecomeFirstResponder
|
|
{
|
|
return _selectable;
|
|
}
|
|
|
|
- (BOOL)canPerformAction:(SEL)action withSender:(id)sender
|
|
{
|
|
if (_selectable && action == @selector(copy:)) {
|
|
return YES;
|
|
}
|
|
|
|
return [self.nextResponder canPerformAction:action withSender:sender];
|
|
}
|
|
|
|
- (void)copy:(id)sender
|
|
{
|
|
#if !TARGET_OS_TV
|
|
NSAttributedString *attributedText = _textStorage;
|
|
|
|
NSMutableDictionary *item = [NSMutableDictionary new];
|
|
|
|
NSData *rtf = [attributedText dataFromRange:NSMakeRange(0, attributedText.length)
|
|
documentAttributes:@{NSDocumentTypeDocumentAttribute: NSRTFDTextDocumentType}
|
|
error:nil];
|
|
|
|
if (rtf) {
|
|
[item setObject:rtf forKey:(id)kUTTypeFlatRTFD];
|
|
}
|
|
|
|
[item setObject:attributedText.string forKey:(id)kUTTypeUTF8PlainText];
|
|
|
|
UIPasteboard *pasteboard = [UIPasteboard generalPasteboard];
|
|
pasteboard.items = @[item];
|
|
#endif
|
|
}
|
|
|
|
@end
|