change lineBreakMode to ellipsizeMode

Summary:
lineBreakMode only in rc so I think we can replace property without any deprecation warnings. satya164
Closes https://github.com/facebook/react-native/pull/9008

Differential Revision: D3614901

fbshipit-source-id: 724227c0a89192825a24850b930b80884571a51f

Examples/UIExplorer/js/TextExample.android.js

@@ -400,14 +400,14 @@ var TextExample = React.createClass({
             Demo text shadow
           </Text>
         </UIExplorerBlock>
-        <UIExplorerBlock title="Line break mode">
+        <UIExplorerBlock title="Ellipsize mode">
           <Text numberOfLines={1}>
             This very long text should be truncated with dots in the end.
           </Text>
-          <Text lineBreakMode="middle" numberOfLines={1}>
+          <Text ellipsizeMode="middle" numberOfLines={1}>
             This very long text should be truncated with dots in the middle.
           </Text>
-          <Text lineBreakMode="head" numberOfLines={1}>
+          <Text ellipsizeMode="head" numberOfLines={1}>
             This very long text should be truncated with dots in the beginning.
           </Text>
         </UIExplorerBlock>

Examples/UIExplorer/js/TextExample.ios.js

@@ -445,20 +445,20 @@ exports.examples = [
     );
   },
 }, {
-  title: 'Line break mode',
+  title: 'Ellipsize mode',
   render: function() {
     return (
       <View>
         <Text numberOfLines={1}>
           This very long text should be truncated with dots in the end.
         </Text>
-        <Text lineBreakMode="middle" numberOfLines={1}>
+        <Text ellipsizeMode="middle" numberOfLines={1}>
           This very long text should be truncated with dots in the middle.
         </Text>
-        <Text lineBreakMode="head" numberOfLines={1}>
+        <Text ellipsizeMode="head" numberOfLines={1}>
           This very long text should be truncated with dots in the beginning.
         </Text>
-        <Text lineBreakMode="clip" numberOfLines={1}>
+        <Text ellipsizeMode="clip" numberOfLines={1}>
           This very looooooooooooooooooooooooooooong text should be clipped.
         </Text>
       </View>

Libraries/Text/RCTShadowText.h

@@ -24,7 +24,7 @@ extern NSString *const RCTReactTagAttributeName;
 @property (nonatomic, assign) CGFloat letterSpacing;
 @property (nonatomic, assign) CGFloat lineHeight;
 @property (nonatomic, assign) NSUInteger numberOfLines;
-@property (nonatomic, assign) NSLineBreakMode lineBreakMode;
+@property (nonatomic, assign) NSLineBreakMode ellipsizeMode;
 @property (nonatomic, assign) CGSize shadowOffset;
 @property (nonatomic, assign) NSTextAlignment textAlign;
 @property (nonatomic, assign) NSWritingDirection writingDirection;

Libraries/Text/RCTShadowText.m

@@ -190,7 +190,7 @@ static CSSSize RCTMeasure(void *context, float width, CSSMeasureMode widthMode,
   textContainer.lineFragmentPadding = 0.0;
 
   if (_numberOfLines > 0) {
-    textContainer.lineBreakMode = _lineBreakMode;
+    textContainer.lineBreakMode = _ellipsizeMode;
   } else {
     textContainer.lineBreakMode = NSLineBreakByClipping;
   }
@@ -470,7 +470,7 @@ RCT_TEXT_PROPERTY(IsHighlighted, _isHighlighted, BOOL)
 RCT_TEXT_PROPERTY(LetterSpacing, _letterSpacing, CGFloat)
 RCT_TEXT_PROPERTY(LineHeight, _lineHeight, CGFloat)
 RCT_TEXT_PROPERTY(NumberOfLines, _numberOfLines, NSUInteger)
-RCT_TEXT_PROPERTY(LineBreakMode, _lineBreakMode, NSLineBreakMode)
+RCT_TEXT_PROPERTY(EllipsizeMode, _ellipsizeMode, NSLineBreakMode)
 RCT_TEXT_PROPERTY(TextAlign, _textAlign, NSTextAlignment)
 RCT_TEXT_PROPERTY(TextDecorationColor, _textDecorationColor, UIColor *);
 RCT_TEXT_PROPERTY(TextDecorationLine, _textDecorationLine, RCTTextDecorationLineType);

Libraries/Text/RCTTextManager.m

@@ -64,7 +64,7 @@ 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(lineBreakMode, NSLineBreakMode)
+RCT_EXPORT_SHADOW_PROPERTY(ellipsizeMode, NSLineBreakMode)
 RCT_EXPORT_SHADOW_PROPERTY(textAlign, NSTextAlignment)
 RCT_EXPORT_SHADOW_PROPERTY(textDecorationStyle, NSUnderlineStyle)
 RCT_EXPORT_SHADOW_PROPERTY(textDecorationColor, UIColor)

Libraries/Text/Text.js

@@ -29,7 +29,7 @@ const viewConfig = {
   validAttributes: merge(ReactNativeViewAttributes.UIView, {
     isHighlighted: true,
     numberOfLines: true,
-    lineBreakMode: true,
+    ellipsizeMode: true,
     allowFontScaling: true,
     selectable: true,
   }),
@@ -90,7 +90,7 @@ const viewConfig = {
 const Text = React.createClass({
   propTypes: {
     /**
-     * Line Break mode. This can be one of the following values:
+     * This can be one of the following values:
      *
      * - `head` - The line is displayed so that the end fits in the container and the missing text
      * at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
@@ -106,13 +106,13 @@ const Text = React.createClass({
      *
      * > `clip` is working only for iOS
      */
-    lineBreakMode: React.PropTypes.oneOf(['head', 'middle', 'tail', 'clip']),
+    ellipsizeMode: React.PropTypes.oneOf(['head', 'middle', 'tail', 'clip']),
     /**
      * Used to truncate the text with an ellipsis after computing the text
      * layout, including line wrapping, such that the total number of lines
      * does not exceed this number.
      *
-     * This prop is commonly used with `lineBreakMode`.
+     * This prop is commonly used with `ellipsizeMode`.
      */
     numberOfLines: React.PropTypes.number,
     /**
@@ -172,7 +172,7 @@ const Text = React.createClass({
     return {
       accessible: true,
       allowFontScaling: true,
-      lineBreakMode: 'tail',
+      ellipsizeMode: 'tail',
     };
   },
   getInitialState: function(): Object {

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -72,7 +72,7 @@ public class ViewProps {
   public static final String LINE_HEIGHT = "lineHeight";
   public static final String NEEDS_OFFSCREEN_ALPHA_COMPOSITING = "needsOffscreenAlphaCompositing";
   public static final String NUMBER_OF_LINES = "numberOfLines";
-  public static final String LINE_BREAK_MODE = "lineBreakMode";
+  public static final String LINE_BREAK_MODE = "ellipsizeMode";
   public static final String ON = "on";
   public static final String RESIZE_MODE = "resizeMode";
   public static final String TEXT_ALIGN = "textAlign";

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java

@@ -74,16 +74,16 @@ public class ReactTextViewManager extends BaseViewManager<ReactTextView, ReactTe
   }
 
   @ReactProp(name = ViewProps.LINE_BREAK_MODE)
-  public void setLineBreakMode(ReactTextView view, @Nullable String lineBreakMode) {
-    if(lineBreakMode == null) {
+  public void setLineBreakMode(ReactTextView view, @Nullable String ellipsizeMode) {
+    if(ellipsizeMode == null) {
       return;
     }
 
-    if (lineBreakMode.equals("head")) {
+    if (ellipsizeMode.equals("head")) {
       view.setEllipsize(TextUtils.TruncateAt.START);
-    } else if (lineBreakMode.equals("middle")) {
+    } else if (ellipsizeMode.equals("middle")) {
       view.setEllipsize(TextUtils.TruncateAt.MIDDLE);
-    } else if (lineBreakMode.equals("tail")) {
+    } else if (ellipsizeMode.equals("tail")) {
       view.setEllipsize(TextUtils.TruncateAt.END);
     }
   }