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

import { Label as LabelDefinition } from '.';
import { Background } from '../styling/background';
import { Length, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../styling/style-properties';
import { booleanConverter } from '../core/view-base';
import { View, CSSType } from '../core/view';
import { CoreTypes } from '../../core-types';
import { TextBase, whiteSpaceProperty, textOverflowProperty } from '../text-base';
import { layout } from '../../utils';

import { ios } from '../styling/background';

enum FixedSize {
	NONE = 0,
	WIDTH = 1,
	HEIGHT = 2,
	BOTH = 3,
}

@CSSType('Label')
export class Label extends TextBase implements LabelDefinition {
	nativeViewProtected: TNSLabel;
	nativeTextViewProtected: TNSLabel;

	private _fixedSize: FixedSize;

	public createNativeView() {
		const view = TNSLabel.new();
		view.userInteractionEnabled = true;

		return view;
	}

	public disposeNativeView(): void {
		super.disposeNativeView();
		this._fixedSize = null;
	}

	// @ts-ignore
	get ios(): TNSLabel {
		return this.nativeTextViewProtected;
	}

	get textWrap(): boolean {
		return this.style.whiteSpace === 'normal';
	}
	set textWrap(value: boolean) {
		if (typeof value === 'string') {
			value = booleanConverter(value);
		}

		this.style.whiteSpace = value ? 'normal' : 'nowrap';
	}

	_requestLayoutOnTextChanged(): void {
		if (this._fixedSize === FixedSize.BOTH) {
			return;
		}
		if (this._fixedSize === FixedSize.WIDTH && !this.textWrap && this.getMeasuredHeight() > 0) {
			// Single line label with fixed width will skip request layout on text change.
			return;
		}
		super._requestLayoutOnTextChanged();
	}

	public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
		const nativeView = this.nativeTextViewProtected;
		if (nativeView) {
			const width = layout.getMeasureSpecSize(widthMeasureSpec);
			const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);

			const height = layout.getMeasureSpecSize(heightMeasureSpec);
			const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);

			this._fixedSize = (widthMode === layout.EXACTLY ? FixedSize.WIDTH : FixedSize.NONE) | (heightMode === layout.EXACTLY ? FixedSize.HEIGHT : FixedSize.NONE);

			let nativeSize;
			if (this.textWrap) {
				// https://github.com/NativeScript/NativeScript/issues/4834
				// NOTE: utils.measureNativeView(...) relies on UIView.sizeThatFits(...) that
				// seems to have various issues when laying out UILabel instances.
				// We use custom measure logic here that relies on overriden
				// UILabel.textRectForBounds:limitedToNumberOfLines: in TNSLabel widget.
				nativeSize = this._measureNativeView(width, widthMode, height, heightMode);
			} else {
				// https://github.com/NativeScript/NativeScript/issues/6059
				// NOTE: _measureNativeView override breaks a scenario with StackLayout that arranges
				// labels horizontally (with textWrap=false) e.g. we are measuring label #2 within 356px,
				// label #2 needs more, and decides to show ellipsis(...) but because of this its native size
				// returned from UILabel.textRectForBounds:limitedToNumberOfLines: logic becomes 344px, so
				// StackLayout tries to measure label #3 within the remaining 12px which is wrong;
				// label #2 with ellipsis should take the whole 356px and label #3 should not be visible at all.
				nativeSize = layout.measureNativeView(nativeView, width, widthMode, height, heightMode);
			}

			let labelWidth = nativeSize.width;

			if (this.textWrap && widthMode === layout.AT_MOST) {
				labelWidth = Math.min(labelWidth, width);
			}

			const measureWidth = Math.max(labelWidth, this.effectiveMinWidth);
			const measureHeight = Math.max(nativeSize.height, this.effectiveMinHeight);

			const widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
			const heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);

			this.setMeasuredDimension(widthAndState, heightAndState);
		}
	}

	private _measureNativeView(width: number, widthMode: number, height: number, heightMode: number): { width: number; height: number } {
		const view = this.nativeTextViewProtected;

		const nativeSize = view.textRectForBoundsLimitedToNumberOfLines(CGRectMake(0, 0, widthMode === 0 /* layout.UNSPECIFIED */ ? Number.POSITIVE_INFINITY : layout.toDeviceIndependentPixels(width), heightMode === 0 /* layout.UNSPECIFIED */ ? Number.POSITIVE_INFINITY : layout.toDeviceIndependentPixels(height)), view.numberOfLines).size;

		nativeSize.width = layout.round(layout.toDevicePixels(nativeSize.width));
		nativeSize.height = layout.round(layout.toDevicePixels(nativeSize.height));

		return nativeSize;
	}

	[whiteSpaceProperty.setNative](value: CoreTypes.WhiteSpaceType) {
		this.adjustLineBreak();
	}

	[textOverflowProperty.setNative](value: CoreTypes.TextOverflowType) {
		this.adjustLineBreak();
	}

	private adjustLineBreak() {
		const whiteSpace = this.whiteSpace;
		const textOverflow = this.textOverflow;
		const nativeView = this.nativeTextViewProtected;

		switch (whiteSpace) {
			case 'normal':
				nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
				nativeView.numberOfLines = this.maxLines;
				break;
			case 'initial':
				nativeView.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
				nativeView.numberOfLines = 1;
				break;
			case 'nowrap':
				switch (textOverflow) {
					case 'clip':
						nativeView.lineBreakMode = NSLineBreakMode.ByClipping;
						nativeView.numberOfLines = this.maxLines;
						break;
					default:
						nativeView.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
						nativeView.numberOfLines = 1;
						break;
				}
				break;
		}
	}

	_redrawNativeBackground(value: UIColor | Background): void {
		if (value instanceof Background) {
			const nativeView = this.nativeTextViewProtected;
			if (nativeView) {
				ios.createBackgroundUIColor(
					this,
					(color: UIColor) => {
						const cgColor = color ? color.CGColor : null;
						nativeView.layer.backgroundColor = cgColor;
					},
					true,
				);
			}
		}

		this._setNativeClipToBounds();
	}

	[borderTopWidthProperty.setNative](value: CoreTypes.LengthType) {
		const nativeView = this.nativeTextViewProtected;
		const border = nativeView.borderThickness;
		nativeView.borderThickness = {
			top: layout.toDeviceIndependentPixels(this.effectiveBorderTopWidth),
			right: border.right,
			bottom: border.bottom,
			left: border.left,
		};
	}

	[borderRightWidthProperty.setNative](value: CoreTypes.LengthType) {
		const nativeView = this.nativeTextViewProtected;
		const border = nativeView.borderThickness;
		nativeView.borderThickness = {
			top: border.top,
			right: layout.toDeviceIndependentPixels(this.effectiveBorderRightWidth),
			bottom: border.bottom,
			left: border.left,
		};
	}

	[borderBottomWidthProperty.setNative](value: CoreTypes.LengthType) {
		const nativeView = this.nativeTextViewProtected;
		const border = nativeView.borderThickness;
		nativeView.borderThickness = {
			top: border.top,
			right: border.right,
			bottom: layout.toDeviceIndependentPixels(this.effectiveBorderBottomWidth),
			left: border.left,
		};
	}

	[borderLeftWidthProperty.setNative](value: CoreTypes.LengthType) {
		const nativeView = this.nativeTextViewProtected;
		const border = nativeView.borderThickness;
		nativeView.borderThickness = {
			top: border.top,
			right: border.right,
			bottom: border.bottom,
			left: layout.toDeviceIndependentPixels(this.effectiveBorderLeftWidth),
		};
	}

	[paddingTopProperty.setNative](value: CoreTypes.LengthType) {
		const nativeView = this.nativeTextViewProtected;
		const padding = nativeView.padding;
		nativeView.padding = {
			top: layout.toDeviceIndependentPixels(this.effectivePaddingTop),
			right: padding.right,
			bottom: padding.bottom,
			left: padding.left,
		};
	}

	[paddingRightProperty.setNative](value: CoreTypes.LengthType) {
		const nativeView = this.nativeTextViewProtected;
		const padding = nativeView.padding;
		nativeView.padding = {
			top: padding.top,
			right: layout.toDeviceIndependentPixels(this.effectivePaddingRight),
			bottom: padding.bottom,
			left: padding.left,
		};
	}

	[paddingBottomProperty.setNative](value: CoreTypes.LengthType) {
		const nativeView = this.nativeTextViewProtected;
		const padding = nativeView.padding;
		nativeView.padding = {
			top: padding.top,
			right: padding.right,
			bottom: layout.toDeviceIndependentPixels(this.effectivePaddingBottom),
			left: padding.left,
		};
	}

	[paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
		const nativeView = this.nativeTextViewProtected;
		const padding = nativeView.padding;
		nativeView.padding = {
			top: padding.top,
			right: padding.right,
			bottom: padding.bottom,
			left: layout.toDeviceIndependentPixels(this.effectivePaddingLeft),
		};
	}
}

Label.prototype.recycleNativeView = 'auto';