feat(core): maxLines support for all text components (#9884)

packages/core/application/index.android.ts

@@ -365,7 +365,6 @@ function initLifecycleCallbacks() {
 		rootView.getViewTreeObserver().addOnGlobalLayoutListener(global.onGlobalLayoutListener);
 	});
 
-
 	let activitiesStarted = 0;
 
 	const lifecycleCallbacks = new android.app.Application.ActivityLifecycleCallbacks(<any>{

packages/core/core-types/index.ts

@@ -86,6 +86,8 @@ export namespace CoreTypes {
 		export const nowrap = 'nowrap';
 	}
 
+	export type MaxLinesType = number;
+
 	export type OrientationType = 'horizontal' | 'vertical';
 	export module Orientation {
 		export const horizontal = 'horizontal';

packages/core/ui/button/index.ios.ts

@@ -224,7 +224,7 @@ export class Button extends ButtonBase {
 		switch (value) {
 			case 'normal':
 				nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
-				nativeView.numberOfLines = 0;
+				nativeView.numberOfLines = this.maxLines;
 				break;
 			case 'nowrap':
 			case 'initial':

packages/core/ui/label/index.ios.ts

@@ -117,7 +117,7 @@ export class Label extends TextBase implements LabelDefinition {
 		switch (value) {
 			case 'normal':
 				nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
-				nativeView.numberOfLines = 0;
+				nativeView.numberOfLines = this.maxLines;
 				break;
 			case 'nowrap':
 			case 'initial':

packages/core/ui/styling/style/index.ts

@@ -154,6 +154,8 @@ export class Style extends Observable implements StyleDefinition {
 	public fontWeight: FontWeight;
 	public font: string;
 
+	public maxLines: CoreTypes.MaxLinesType;
+
 	public androidElevation: number;
 	public androidDynamicElevationOffset: number;
 	public zIndex: number;

packages/core/ui/text-base/index.android.ts

@@ -1,5 +1,5 @@
 // Types
-import { getClosestPropertyValue } from './text-base-common';
+import { getClosestPropertyValue, maxLinesProperty } from './text-base-common';
 import { CSSShadow } from '../styling/css-shadow';
 
 // Requires
@@ -462,6 +462,15 @@ export class TextBase extends TextBaseCommon {
 		}
 	}
 
+	[maxLinesProperty.setNative](value: number) {
+		const nativeTextViewProtected = this.nativeTextViewProtected;
+		if (value <= 0) {
+			nativeTextViewProtected.setMaxLines(Number.MAX_SAFE_INTEGER);
+		} else {
+			nativeTextViewProtected.setMaxLines(typeof value === 'string' ? parseInt(value, 10) : value);
+		}
+	}
+
 	_setNativeText(reset = false): void {
 		if (reset) {
 			this.nativeTextViewProtected.setText(null);

packages/core/ui/text-base/index.d.ts

@@ -63,6 +63,11 @@ export class TextBase extends View implements AddChildFromBuilder {
 	 */
 	whiteSpace: CoreTypes.WhiteSpaceType;
 
+	/**
+	 * Gets or sets white space style property.
+	 */
+	maxLines: CoreTypes.MaxLinesType;
+
 	/**
 	 * Gets or sets padding style property.
 	 */

packages/core/ui/text-base/index.ios.ts

@@ -13,6 +13,7 @@ import { isString, isNullOrUndefined } from '../../utils/types';
 import { iOSNativeHelper } from '../../utils';
 import { Trace } from '../../trace';
 import { CoreTypes } from '../../core-types';
+import { maxLinesProperty } from './text-base-common';
 
 export * from './text-base-common';
 
@@ -197,6 +198,24 @@ export class TextBase extends TextBaseCommon {
 		this._setShadow(value);
 	}
 
+	[maxLinesProperty.setNative](value: CoreTypes.MaxLinesType) {
+		const nativeTextViewProtected = this.nativeTextViewProtected;
+		const numberOfLines = this.whiteSpace === 'normal' ? value : 1;
+		if (nativeTextViewProtected instanceof UITextView) {
+			nativeTextViewProtected.textContainer.maximumNumberOfLines = numberOfLines;
+
+			if (value !== 0) {
+				nativeTextViewProtected.textContainer.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
+			} else {
+				nativeTextViewProtected.textContainer.lineBreakMode = NSLineBreakMode.ByWordWrapping;
+			}
+		} else if (nativeTextViewProtected instanceof UILabel) {
+			nativeTextViewProtected.numberOfLines = numberOfLines;
+		} else if (nativeTextViewProtected instanceof UIButton) {
+			nativeTextViewProtected.titleLabel.numberOfLines = numberOfLines;
+		}
+	}
+
 	_setColor(color: UIColor): void {
 		if (this.nativeTextViewProtected instanceof UIButton) {
 			this.nativeTextViewProtected.setTitleColorForState(color, UIControlState.Normal);

packages/core/ui/text-base/text-base-common.ts

@@ -90,6 +90,13 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition
 		this.style.lineHeight = value;
 	}
 
+	get maxLines(): CoreTypes.MaxLinesType {
+		return this.style.maxLines;
+	}
+	set maxLines(value: CoreTypes.MaxLinesType) {
+		this.style.maxLines = value;
+	}
+
 	get textAlignment(): CoreTypes.TextAlignmentType {
 		return this.style.textAlignment;
 	}
@@ -310,4 +317,11 @@ export const lineHeightProperty = new InheritedCssProperty<Style, number>({
 });
 lineHeightProperty.register(Style);
 
+export const maxLinesProperty = new CssProperty<Style, CoreTypes.MaxLinesType>({
+	name: 'maxLines',
+	cssName: 'max-lines',
+	valueConverter: (v) => (v === 'none' ? 0 : parseInt(v, 10)),
+});
+maxLinesProperty.register(Style);
+
 export const resetSymbol = Symbol('textPropertyDefault');

packages/core/ui/text-view/index.android.ts

@@ -1,4 +1,4 @@
-import { TextViewBase as TextViewBaseCommon, maxLinesProperty } from './text-view-common';
+import { TextViewBase as TextViewBaseCommon } from './text-view-common';
 import { CSSType } from '../core/view';
 
 export * from '../text-base';
@@ -15,20 +15,6 @@ export class TextView extends TextViewBaseCommon {
 		this.nativeTextViewProtected.setGravity(android.view.Gravity.TOP | android.view.Gravity.START);
 	}
 
-	[maxLinesProperty.getDefault](): number {
-		return 0;
-	}
-
-	[maxLinesProperty.setNative](value: number) {
-		if (value <= 0) {
-			this.nativeTextViewProtected.setMaxLines(Number.MAX_VALUE);
-
-			return;
-		}
-
-		this.nativeTextViewProtected.setMaxLines(value);
-	}
-
 	public _onReturnPress() {
 		this.notify({ eventName: TextView.returnPressEvent, object: this });
 	}

packages/core/ui/text-view/index.ios.ts

@@ -1,6 +1,6 @@
 import { ScrollEventData } from '../scroll-view';
 import { textProperty } from '../text-base';
-import { TextViewBase as TextViewBaseCommon, maxLinesProperty } from './text-view-common';
+import { TextViewBase as TextViewBaseCommon } from './text-view-common';
 import { editableProperty, hintProperty, placeholderColorProperty, _updateCharactersInRangeReplacementString } from '../editable-text-base';
 import { CoreTypes } from '../../core-types';
 import { CSSType } from '../core/view';
@@ -408,18 +408,6 @@ export class TextView extends TextViewBaseCommon {
 			right: inset.right,
 		};
 	}
-	[maxLinesProperty.getDefault](): number {
-		return 0;
-	}
-	[maxLinesProperty.setNative](value: number) {
-		this.nativeTextViewProtected.textContainer.maximumNumberOfLines = value;
-
-		if (value !== 0) {
-			this.nativeTextViewProtected.textContainer.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
-		} else {
-			this.nativeTextViewProtected.textContainer.lineBreakMode = NSLineBreakMode.ByWordWrapping;
-		}
-	}
 }
 
 TextView.prototype.recycleNativeView = 'auto';

packages/core/ui/text-view/text-view-common.ts

@@ -1,14 +1,7 @@
 import { TextView as TextViewDefinition } from '.';
 import { EditableTextBase } from '../editable-text-base';
-import { Property } from '../core/properties';
 
 export class TextViewBase extends EditableTextBase implements TextViewDefinition {
 	public static returnPressEvent = 'returnPress';
 	public maxLines: number;
-}
+}
-
-export const maxLinesProperty = new Property<EditableTextBase, number>({
-	name: 'maxLines',
-	valueConverter: parseInt,
-});
-maxLinesProperty.register(EditableTextBase);