feat(textview): added maxLines property (#7943)

* feat(textview): added maxLines property

* feat(text-view): moved implementation to TextView

* feat(text-view): changes based on CR

* feat(text-view): Normalize behavior in between android and iOS

* chore: updated NativeScript.api.md

* chore: add new line before return

Co-authored-by: Dimitar Topuzov <dtopuzov@gmail.com>
Co-authored-by: Vasil Trifonov <v.trifonov@gmail.com>

api-reports/NativeScript.api.md

@@ -2476,6 +2476,8 @@ export class TextView extends EditableTextBase {
     android: any /* android.widget.EditText */;
 
     ios: any /* UITextView */;
+
+    maxLines: number;
 }
 
 // @public

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

@@ -0,0 +1,10 @@
+import { TextView as TextViewDefinition } from ".";
+import { EditableTextBase } from "../editable-text-base";
+import { Property } from "../text-base";
+
+export class TextViewBase extends EditableTextBase implements TextViewDefinition {
+  public maxLines: number;
+}
+
+export const maxLinesProperty = new Property<EditableTextBase, number>({ name: "maxLines", valueConverter: parseInt });
+maxLinesProperty.register(EditableTextBase);

nativescript-core/ui/text-view/text-view.android.ts

@@ -1,11 +1,10 @@
-import { TextView as TextViewDefinition } from ".";
-import { EditableTextBase, CSSType } from "../editable-text-base";
+import { TextViewBase as TextViewBaseCommon, maxLinesProperty } from "./text-view-common";
+import { CSSType } from "../editable-text-base";
 
 export * from "../text-base";
 
 @CSSType("TextView")
-export class TextView extends EditableTextBase implements TextViewDefinition {
-
+export class TextView extends TextViewBaseCommon {
     public _configureEditText(editText: android.widget.EditText) {
         editText.setInputType(android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_NORMAL | android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES | android.text.InputType.TYPE_TEXT_FLAG_MULTI_LINE | android.text.InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);
         editText.setGravity(android.view.Gravity.TOP | android.view.Gravity.START);
@@ -15,6 +14,20 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
         super.resetNativeView();
         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);
+    }
 }
 
 TextView.prototype.recycleNativeView = "auto";

nativescript-core/ui/text-view/text-view.d.ts

@@ -4,6 +4,7 @@
  */ /** */
 
 import { EditableTextBase } from "../editable-text-base";
+import { Property } from "../text-base";
 
 /**
  * Represents an editable multiline text view.
@@ -18,4 +19,11 @@ export class TextView extends EditableTextBase {
      * Gets the native iOS [UITextView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextView_Class/) that represents the user interface for this component. Valid only when running on iOS.
      */
     ios: any /* UITextView */;
+
+    /**
+     * Limits input to a certain number of lines.
+     */
+    maxLines: number;
 }
+
+export const maxLinesProperty: Property<EditableTextBase, number>;

nativescript-core/ui/text-view/text-view.ios.ts

@@ -1,7 +1,7 @@
 import { ScrollEventData } from "../scroll-view";
-import { TextView as TextViewDefinition } from ".";
+import { TextViewBase as TextViewBaseCommon, maxLinesProperty } from "./text-view-common";
 import {
-    EditableTextBase, editableProperty, hintProperty, textProperty, colorProperty, placeholderColorProperty,
+    editableProperty, hintProperty, textProperty, colorProperty, placeholderColorProperty,
     borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
     paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty,
     Length, _updateCharactersInRangeReplacementString, Color, layout,
@@ -110,7 +110,7 @@ class NoScrollAnimationUITextView extends UITextView {
 }
 
 @CSSType("TextView")
-export class TextView extends EditableTextBase implements TextViewDefinition {
+export class TextView extends TextViewBaseCommon {
     nativeViewProtected: UITextView;
     private _delegate: UITextViewDelegateImpl;
     private _isShowingHint: boolean;
@@ -333,6 +333,20 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
         let left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
         this.nativeTextViewProtected.textContainerInset = { top: inset.top, left: left, bottom: inset.bottom, 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";

tests/app/ui/text-view/text-view-tests-native.android.ts

@@ -63,3 +63,7 @@ export function typeTextNatively(textView: textViewModule.TextView, text: string
     textView.android.setText(text);
     textView.android.clearFocus();
 }
+
+export function getNativeMaxLines(textView: textViewModule.TextView): number {
+    return textView.android.getMaxLines();
+}

tests/app/ui/text-view/text-view-tests-native.d.ts

@@ -10,3 +10,4 @@ export declare function getNativeColor(textView: textViewModule.TextView): color
 export declare function getNativeBackgroundColor(textView: textViewModule.TextView): colorModule.Color;
 export declare function getNativeTextAlignment(textView: textViewModule.TextView): string;
 export declare function typeTextNatively(textView: textViewModule.TextView, text: string): void;
+export declare function getNativeMaxLines(textView: textViewModule.TextView): number;

tests/app/ui/text-view/text-view-tests-native.ios.ts

@@ -51,3 +51,7 @@ export function typeTextNatively(textView: textViewModule.TextView, text: string
     // Setting the text will not trigger the delegate method, so we have to do it by hand.
     textView.ios.delegate.textViewDidEndEditing(textView.ios);
 }
+
+export function getNativeMaxLines(textView: textViewModule.TextView): number {
+    return textView.ios.textContainer.maximumNumberOfLines;
+}

tests/app/ui/text-view/text-view-tests.ts

@@ -346,6 +346,18 @@ export var testBindEditableToBindingConext = function () {
     });
 };
 
+export var testSetMaxLines = function () {
+    helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
+        var textView = <textViewModule.TextView>views[0];
+
+        textView.maxLines = 3;
+
+        var expectedValue = 3;
+        var actualValue = textViewTestsNative.getNativeMaxLines(textView);
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+};
+
 var expectedFontSize = 42;
 export var testLocalFontSizeFromCss = function () {
     helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {