From 7ff7233737e2bc12849e922bc2335d3756ff353d Mon Sep 17 00:00:00 2001 From: farfromrefuge Date: Sat, 30 Apr 2022 19:50:05 +0200 Subject: [PATCH] feat(core): maxLines support for all text components (#9884) --- packages/core/application/index.android.ts | 1 - packages/core/core-types/index.ts | 2 ++ packages/core/ui/button/index.ios.ts | 2 +- packages/core/ui/label/index.ios.ts | 2 +- packages/core/ui/styling/style/index.ts | 2 ++ packages/core/ui/text-base/index.android.ts | 11 ++++++++++- packages/core/ui/text-base/index.d.ts | 5 +++++ packages/core/ui/text-base/index.ios.ts | 19 +++++++++++++++++++ .../core/ui/text-base/text-base-common.ts | 14 ++++++++++++++ packages/core/ui/text-view/index.android.ts | 16 +--------------- packages/core/ui/text-view/index.ios.ts | 14 +------------- .../core/ui/text-view/text-view-common.ts | 9 +-------- 12 files changed, 57 insertions(+), 40 deletions(-) diff --git a/packages/core/application/index.android.ts b/packages/core/application/index.android.ts index efcbac90d..514fe3713 100644 --- a/packages/core/application/index.android.ts +++ b/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({ diff --git a/packages/core/core-types/index.ts b/packages/core/core-types/index.ts index 250bcd4f6..8cc78a6b9 100644 --- a/packages/core/core-types/index.ts +++ b/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'; diff --git a/packages/core/ui/button/index.ios.ts b/packages/core/ui/button/index.ios.ts index 1e0cac65d..dab51de91 100644 --- a/packages/core/ui/button/index.ios.ts +++ b/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': diff --git a/packages/core/ui/label/index.ios.ts b/packages/core/ui/label/index.ios.ts index fb6426b3c..1c0c2cdd8 100644 --- a/packages/core/ui/label/index.ios.ts +++ b/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': diff --git a/packages/core/ui/styling/style/index.ts b/packages/core/ui/styling/style/index.ts index 41cf5dd7a..0bcfa54ef 100644 --- a/packages/core/ui/styling/style/index.ts +++ b/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; diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts index 32944e514..5f2fc853e 100644 --- a/packages/core/ui/text-base/index.android.ts +++ b/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); diff --git a/packages/core/ui/text-base/index.d.ts b/packages/core/ui/text-base/index.d.ts index 47e58d996..6af481704 100644 --- a/packages/core/ui/text-base/index.d.ts +++ b/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. */ diff --git a/packages/core/ui/text-base/index.ios.ts b/packages/core/ui/text-base/index.ios.ts index 4e8c302f2..44b14b480 100644 --- a/packages/core/ui/text-base/index.ios.ts +++ b/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); diff --git a/packages/core/ui/text-base/text-base-common.ts b/packages/core/ui/text-base/text-base-common.ts index d1a2057ef..e328f6cce 100644 --- a/packages/core/ui/text-base/text-base-common.ts +++ b/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({ }); lineHeightProperty.register(Style); +export const maxLinesProperty = new CssProperty({ + name: 'maxLines', + cssName: 'max-lines', + valueConverter: (v) => (v === 'none' ? 0 : parseInt(v, 10)), +}); +maxLinesProperty.register(Style); + export const resetSymbol = Symbol('textPropertyDefault'); diff --git a/packages/core/ui/text-view/index.android.ts b/packages/core/ui/text-view/index.android.ts index 77a5d9352..a3eead566 100644 --- a/packages/core/ui/text-view/index.android.ts +++ b/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 }); } diff --git a/packages/core/ui/text-view/index.ios.ts b/packages/core/ui/text-view/index.ios.ts index 8cbeeb1d4..8051f3d96 100644 --- a/packages/core/ui/text-view/index.ios.ts +++ b/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'; diff --git a/packages/core/ui/text-view/text-view-common.ts b/packages/core/ui/text-view/text-view-common.ts index 6966db466..8783aa7de 100644 --- a/packages/core/ui/text-view/text-view-common.ts +++ b/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({ - name: 'maxLines', - valueConverter: parseInt, -}); -maxLinesProperty.register(EditableTextBase); +} \ No newline at end of file