diff --git a/Examples/UIExplorer/js/TextExample.android.js b/Examples/UIExplorer/js/TextExample.android.js index 53715fa84948f0..8360c937567e62 100644 --- a/Examples/UIExplorer/js/TextExample.android.js +++ b/Examples/UIExplorer/js/TextExample.android.js @@ -400,14 +400,14 @@ var TextExample = React.createClass({ Demo text shadow - + This very long text should be truncated with dots in the end. - + This very long text should be truncated with dots in the middle. - + This very long text should be truncated with dots in the beginning. diff --git a/Examples/UIExplorer/js/TextExample.ios.js b/Examples/UIExplorer/js/TextExample.ios.js index 3262aeed004a2a..3c5802157d9fa5 100644 --- a/Examples/UIExplorer/js/TextExample.ios.js +++ b/Examples/UIExplorer/js/TextExample.ios.js @@ -445,20 +445,20 @@ exports.examples = [ ); }, }, { - title: 'Line break mode', + title: 'Ellipsize mode', render: function() { return ( This very long text should be truncated with dots in the end. - + This very long text should be truncated with dots in the middle. - + This very long text should be truncated with dots in the beginning. - + This very looooooooooooooooooooooooooooong text should be clipped. diff --git a/Libraries/Text/RCTShadowText.h b/Libraries/Text/RCTShadowText.h index ed0cc5d6a1a5b5..851970aa94d667 100644 --- a/Libraries/Text/RCTShadowText.h +++ b/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; diff --git a/Libraries/Text/RCTShadowText.m b/Libraries/Text/RCTShadowText.m index 96b6ed20eefb77..bd51f851739e0b 100644 --- a/Libraries/Text/RCTShadowText.m +++ b/Libraries/Text/RCTShadowText.m @@ -190,7 +190,7 @@ - (NSTextStorage *)buildTextStorageForWidth:(CGFloat)width widthMode:(CSSMeasure textContainer.lineFragmentPadding = 0.0; if (_numberOfLines > 0) { - textContainer.lineBreakMode = _lineBreakMode; + textContainer.lineBreakMode = _ellipsizeMode; } else { textContainer.lineBreakMode = NSLineBreakByClipping; } @@ -470,7 +470,7 @@ - (void)set##setProp:(type)value; \ 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); diff --git a/Libraries/Text/RCTTextManager.m b/Libraries/Text/RCTTextManager.m index c8fe246ddbc69b..6fc8d0ae7962cf 100644 --- a/Libraries/Text/RCTTextManager.m +++ b/Libraries/Text/RCTTextManager.m @@ -64,7 +64,7 @@ - (RCTShadowView *)shadowView 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) diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index bf28e3bef875b5..76213298430a11 100644 --- a/Libraries/Text/Text.js +++ b/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 { diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java index 968527fc327353..6f1be09e8e1d47 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java +++ b/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"; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java index dc200c1fcb7a74..7d2ed43e7689b9 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java @@ -74,16 +74,16 @@ public void setTextAlign(ReactTextView view, @Nullable String textAlign) { } @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); } }