From 81bdd36204f246938dbe2ee108d280525e5b8476 Mon Sep 17 00:00:00 2001 From: Valentin Shergin Date: Tue, 8 May 2018 18:50:10 -0700 Subject: [PATCH] Fabric/Text: RCTParagraphComponentView Summary: RCTParagraphComponentView is a UIView which can render text using TextLayoutManager. Reviewed By: mdvacca Differential Revision: D7751853 fbshipit-source-id: e6ee9a0f989cdf6e878390d37dbcf8a11ef90bf4 --- .../Mounting/RCTParagraphComponentView.h | 21 +++++ .../Mounting/RCTParagraphComponentView.mm | 80 +++++++++++++++++++ .../fabric/core/layout/LayoutMetrics.h | 7 ++ 3 files changed, 108 insertions(+) create mode 100644 React/Fabric/Mounting/RCTParagraphComponentView.h create mode 100644 React/Fabric/Mounting/RCTParagraphComponentView.mm diff --git a/React/Fabric/Mounting/RCTParagraphComponentView.h b/React/Fabric/Mounting/RCTParagraphComponentView.h new file mode 100644 index 000000000..92700da77 --- /dev/null +++ b/React/Fabric/Mounting/RCTParagraphComponentView.h @@ -0,0 +1,21 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import + +#import + +NS_ASSUME_NONNULL_BEGIN + +/** + * UIView class for component. + */ +@interface RCTParagraphComponentView : RCTViewComponentView + +@end + +NS_ASSUME_NONNULL_END diff --git a/React/Fabric/Mounting/RCTParagraphComponentView.mm b/React/Fabric/Mounting/RCTParagraphComponentView.mm new file mode 100644 index 000000000..6709bd2b2 --- /dev/null +++ b/React/Fabric/Mounting/RCTParagraphComponentView.mm @@ -0,0 +1,80 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import "RCTParagraphComponentView.h" + +#import +#import +#import +#import +#import +#import + +using namespace facebook::react; + +@implementation RCTParagraphComponentView { + SharedParagraphLocalData _paragraphLocalData; + ParagraphAttributes _paragraphAttributes; +} + +- (instancetype)initWithFrame:(CGRect)frame +{ + if (self = [super initWithFrame:frame]) { + self.isAccessibilityElement = YES; + self.accessibilityTraits |= UIAccessibilityTraitStaticText; + self.opaque = NO; + self.contentMode = UIViewContentModeRedraw; + } + + return self; +} + +- (void)updateProps:(SharedProps)props oldProps:(SharedProps)oldProps +{ + [super updateProps:props oldProps:oldProps]; + auto paragraphProps = std::static_pointer_cast(props); + assert(paragraphProps); + _paragraphAttributes = paragraphProps->getParagraphAttributes(); +} + +- (void)updateLocalData:(SharedLocalData)localData + oldLocalData:(SharedLocalData)oldLocalData +{ + _paragraphLocalData = std::static_pointer_cast(localData); + assert(_paragraphLocalData); + [self setNeedsDisplay]; +} + +- (void)drawRect:(CGRect)rect +{ + if (!_paragraphLocalData) { + return; + } + + SharedTextLayoutManager textLayoutManager = + _paragraphLocalData->getTextLayoutManager(); + RCTTextLayoutManager *nativeTextLayoutManager = + (__bridge RCTTextLayoutManager *)textLayoutManager->getNativeTextLayoutManager(); + + auto contentFrame = _layoutMetrics.getContentFrame(); + CGRect frame = { + .origin = { + .x = contentFrame.origin.x, + .y = contentFrame.origin.y + }, + .size = { + .width = contentFrame.size.width, + .height = contentFrame.size.height + } + }; + + [nativeTextLayoutManager drawAttributedString:_paragraphLocalData->getAttributedString() + paragraphAttributes:_paragraphAttributes + frame:frame]; +} + +@end diff --git a/ReactCommon/fabric/core/layout/LayoutMetrics.h b/ReactCommon/fabric/core/layout/LayoutMetrics.h index 22cff2d7c..e1c74359e 100644 --- a/ReactCommon/fabric/core/layout/LayoutMetrics.h +++ b/ReactCommon/fabric/core/layout/LayoutMetrics.h @@ -23,6 +23,13 @@ struct LayoutMetrics { DisplayType displayType {DisplayType::Flex}; LayoutDirection layoutDirection {LayoutDirection::Undefined}; + Rect getContentFrame() const { + return Rect { + Point {contentInsets.left, contentInsets.top}, + Size {frame.size.width - contentInsets.left - contentInsets.right, frame.size.height - contentInsets.top - contentInsets.bottom} + }; + } + bool operator ==(const LayoutMetrics& rhs) const { return std::tie(this->frame, this->contentInsets, this->borderWidth, this->displayType, this->layoutDirection) ==