Add 'props.lineBreakMode' to Text

Summary:I've tested this manually, but I'm not sure how to write a test for this. Hopefully someone can help out there. The least I could do is provide a starting point for a PR to be accepted.

Additionally, I've renamed the existing `NSLineBreakMode` enum converter (inside `RCTConvert`) to use dashes in the names instead of camelcase (eg: `word-wrapping` instead of `wordWrapping`).

Fixes #6338
Closes https://github.com/facebook/react-native/pull/6339

Differential Revision: D3052391

Pulled By: nicklockwood

fb-gh-sync-id: 1536dfc139d7995095e9ee9d5f13ca86f90783c5
shipit-source-id: 1536dfc139d7995095e9ee9d5f13ca86f90783c5

Libraries/Text/RCTShadowText.h

@@ -23,6 +23,7 @@ extern NSString *const RCTReactTagAttributeName;
 @property (nonatomic, assign) BOOL isHighlighted;
 @property (nonatomic, assign) CGFloat letterSpacing;
 @property (nonatomic, assign) CGFloat lineHeight;
+@property (nonatomic, assign) NSLineBreakMode lineBreakMode;
 @property (nonatomic, assign) NSUInteger numberOfLines;
 @property (nonatomic, assign) CGSize shadowOffset;
 @property (nonatomic, assign) NSTextAlignment textAlign;

Libraries/Text/RCTShadowText.m

@@ -119,7 +119,7 @@ static css_dim_t RCTMeasure(void *context, float width, float height)
 
   NSTextContainer *textContainer = [NSTextContainer new];
   textContainer.lineFragmentPadding = 0.0;
-  textContainer.lineBreakMode = _numberOfLines > 0 ? NSLineBreakByTruncatingTail : NSLineBreakByClipping;
+  textContainer.lineBreakMode = _lineBreakMode;
   textContainer.maximumNumberOfLines = _numberOfLines;
   textContainer.size = (CGSize){isnan(width) ? CGFLOAT_MAX : width, CGFLOAT_MAX};
 
@@ -370,6 +370,7 @@ RCT_TEXT_PROPERTY(FontStyle, _fontStyle, NSString *)
 RCT_TEXT_PROPERTY(IsHighlighted, _isHighlighted, BOOL)
 RCT_TEXT_PROPERTY(LetterSpacing, _letterSpacing, CGFloat)
 RCT_TEXT_PROPERTY(LineHeight, _lineHeight, CGFloat)
+RCT_TEXT_PROPERTY(LineBreakMode, _lineBreakMode, NSLineBreakMode)
 RCT_TEXT_PROPERTY(NumberOfLines, _numberOfLines, NSUInteger)
 RCT_TEXT_PROPERTY(TextAlign, _textAlign, NSTextAlignment)
 RCT_TEXT_PROPERTY(TextDecorationColor, _textDecorationColor, UIColor *);

Libraries/Text/RCTTextManager.m

@@ -50,6 +50,7 @@ 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(lineBreakMode, NSLineBreakMode)
 RCT_EXPORT_SHADOW_PROPERTY(numberOfLines, NSUInteger)
 RCT_EXPORT_SHADOW_PROPERTY(textAlign, NSTextAlignment)
 RCT_EXPORT_SHADOW_PROPERTY(textDecorationStyle, NSUnderlineStyle)

Libraries/Text/Text.js

@@ -219,6 +219,18 @@ const Text = React.createClass({
         isHighlighted: this.state.isHighlighted,
       };
     }
+    if (Platform.OS === 'ios' && newProps.lineBreakMode === undefined) {
+      // Prevent mutation of `this.props`!
+      if (newProps === this.props) {
+        newProps = { ...this.props };
+      }
+      // If `numberOfLines` is undefined, it defaults to 0 in native code.
+      if (newProps.numberOfLines !== undefined && newProps.numberOfLines > 0) {
+        newProps.lineBreakMode = 'truncating-tail';
+      } else {
+        newProps.lineBreakMode = 'clipping';
+      }
+    }
     if (this.context.isInAParentText) {
       return <RCTVirtualText {...newProps} />;
     } else {

Libraries/Text/TextStylePropTypes.js

@@ -40,6 +40,17 @@ var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), {
    */
   letterSpacing: ReactPropTypes.number,
   lineHeight: ReactPropTypes.number,
+  /**
+   * @platform ios
+   */
+  lineBreakMode: ReactPropTypes.oneOf([
+    'clipping',
+    'word-wrapping',
+    'char-wrapping',
+    'truncating-head',
+    'truncating-middle',
+    'truncating-tail',
+  ]),
   /**
    * Specifies text alignment. The value 'justify' is only supported on iOS.
    */

React/Base/RCTConvert.m

@@ -231,12 +231,12 @@ NSNumber *RCTConvertMultiEnumValue(const char *typeName, NSDictionary *mapping,
 }
 
 RCT_ENUM_CONVERTER(NSLineBreakMode, (@{
-  @"wordWrapping": @(NSLineBreakByWordWrapping),
-  @"charWrapping": @(NSLineBreakByCharWrapping),
   @"clipping": @(NSLineBreakByClipping),
-  @"truncatingHead": @(NSLineBreakByTruncatingHead),
-  @"truncatingTail": @(NSLineBreakByTruncatingTail),
-  @"truncatingMiddle": @(NSLineBreakByTruncatingMiddle),
+  @"word-wrapping": @(NSLineBreakByWordWrapping),
+  @"char-wrapping": @(NSLineBreakByCharWrapping),
+  @"truncating-head": @(NSLineBreakByTruncatingHead),
+  @"truncating-middle": @(NSLineBreakByTruncatingMiddle),
+  @"truncating-tail": @(NSLineBreakByTruncatingTail),
 }), NSLineBreakByWordWrapping, integerValue)
 
 RCT_ENUM_CONVERTER(NSTextAlignment, (@{