@nativescript-community/ui-label 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.1](https://github.com/nativescript-community/ui-label/compare/v1.2.0...v1.2.1) (2022-01-02)
+
+**Note:** Version bump only for package @nativescript-community/ui-label
+
+
+
+
+
 # [1.2.0](https://github.com/nativescript-community/ui-label/compare/v1.1.25...v1.2.0) (2021-10-20)
 
 

package/label.android.js

@@ -1,5 +1,5 @@
 import { LightFormattedString, createNativeAttributedString, cssProperty, overrideSpanAndFormattedStringEnabled, verticalTextAlignmentProperty } from '@nativescript-community/text';
-import { CSSType, FormattedString, Observable, Property, Span, View, booleanConverter, profile } from '@nativescript/core';
+import { CSSType, Device, FormattedString, Observable, Property, Span, View, booleanConverter, profile } from '@nativescript/core';
 import { Color } from '@nativescript/core/color';
 import { Font } from '@nativescript/core/ui/styling/font';
 import { Length, colorProperty, fontInternalProperty, fontSizeProperty, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty } from '@nativescript/core/ui/styling/style-properties';
@@ -7,8 +7,10 @@ import { letterSpacingProperty, textAlignmentProperty, textDecorationProperty, t
 import { lineHeightProperty } from '@nativescript/core/ui/text-base/text-base-common';
 import { layout } from '@nativescript/core/utils/utils';
 import { autoFontSizeProperty, lineBreakProperty, maxLinesProperty, selectableProperty, textShadowProperty } from './label-common';
+import lazy from '@nativescript/core/utils/lazy';
 export { createNativeAttributedString, enableIOSDTCoreText } from '@nativescript-community/text';
 export * from './label-common';
+const sdkVersion = lazy(() => parseInt(Device.sdkVersion, 10));
 let TextView;
 const CHILD_SPAN = 'Span';
 const CHILD_FORMATTED_TEXT = 'formattedText';
@@ -388,10 +390,21 @@ export class Label extends LabelBase {
         }
     }
     [lineHeightProperty.setNative](value) {
-        this.nativeTextViewProtected.setLineSpacing(value * layout.getDisplayDensity(), 1);
+        if (sdkVersion() >= 28) {
+            this.nativeTextViewProtected.setLineHeight(value * layout.getDisplayDensity());
+        }
+        else {
+            const fontHeight = this.nativeTextViewProtected.getPaint().getFontMetricsInt(null);
+            this.nativeTextViewProtected.setLineSpacing(value * layout.getDisplayDensity() - fontHeight, 1);
+        }
     }
     [fontInternalProperty.setNative](value) {
-        this.nativeTextViewProtected.setTypeface(value instanceof Font ? value.getAndroidTypeface() : value);
+        const androidFont = value instanceof Font ? value.getAndroidTypeface() : value;
+        this.nativeTextViewProtected.setTypeface(androidFont);
+        if (this.lineHeight && sdkVersion() < 28) {
+            const fontHeight = this.nativeTextViewProtected.getPaint().getFontMetricsInt(null);
+            this.nativeTextViewProtected.setLineSpacing(this.lineHeight * layout.getDisplayDensity() - fontHeight, 1);
+        }
     }
     [textDecorationProperty.setNative](value) {
         switch (value) {

package/label.ios.d.ts

@@ -1,4 +1,4 @@
-import { CoreTypes, FormattedString, Span } from '@nativescript/core';
+import { CoreTypes, FormattedString } from '@nativescript/core';
 import { LabelBase } from './label-common';
 export { createNativeAttributedString, enableIOSDTCoreText } from '@nativescript-community/text';
 export * from './label-common';
@@ -6,8 +6,6 @@ declare module '@nativescript/core/ui/text-base' {
     interface TextBase {
         _requestLayoutOnTextChanged(): any;
         _setNativeText(): any;
-        createMutableStringForSpan?(span: any, text: any): NSMutableAttributedString;
-        createNSMutableAttributedString?(formattedString: FormattedString): NSMutableAttributedString;
     }
 }
 export declare function getTransformedText(text: string, textTransform: CoreTypes.TextTransformType): string;
@@ -18,7 +16,6 @@ export declare class Label extends LabelBase {
     attributedString: NSMutableAttributedString;
     private _delegate;
     static DTCORETEXT_INIT: boolean;
-    constructor();
     createNativeView(): UITextView;
     initNativeView(): void;
     disposeNativeView(): void;
@@ -38,9 +35,8 @@ export declare class Label extends LabelBase {
     _setSpannablesFontSizeWithRatio(ratio: any): void;
     _setNativeText(): void;
     setTextDecorationAndTransform(): void;
-    currentMaxFontSize: number;
-    createNSMutableAttributedString(formattedString: FormattedString): NSMutableAttributedString;
-    createMutableStringForSpan(span: Span, text: string): NSMutableAttributedString;
+    createFormattedTextNative(value: FormattedString): any;
+    setFormattedTextDecorationAndTransform(): void;
     fontSizeRatio: number;
     _lastAutoSizeKey: string;
     textViewDidChange(textView: UITextView, width?: any, height?: any, force?: boolean): void;

package/label.ios.js

@@ -1,9 +1,9 @@
 var _a, _b, _c, _d;
-import { computeBaseLineOffset, createNativeAttributedString, usingIOSDTCoreText, verticalTextAlignmentProperty } from '@nativescript-community/text';
+import { createNativeAttributedString, verticalTextAlignmentProperty } from '@nativescript-community/text';
 import { Color, Font, View } from '@nativescript/core';
 import { borderBottomWidthProperty, borderLeftWidthProperty, borderRightWidthProperty, borderTopWidthProperty, fontInternalProperty, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty } from '@nativescript/core/ui/styling/style-properties';
-import { formattedTextProperty, letterSpacingProperty, textDecorationProperty, whiteSpaceProperty } from '@nativescript/core/ui/text-base';
-import { getClosestPropertyValue, lineHeightProperty } from '@nativescript/core/ui/text-base/text-base-common';
+import { formattedTextProperty, letterSpacingProperty, whiteSpaceProperty } from '@nativescript/core/ui/text-base';
+import { lineHeightProperty } from '@nativescript/core/ui/text-base/text-base-common';
 import { isNullOrUndefined, isString } from '@nativescript/core/utils/types';
 import { iOSNativeHelper, layout } from '@nativescript/core/utils/utils';
 import { LabelBase, autoFontSizeProperty, htmlProperty, lineBreakProperty, linkColorProperty, linkUnderlineProperty, maxLinesProperty, needFormattedStringComputation, selectableProperty, textShadowProperty } from './label-common';
@@ -103,14 +103,16 @@ var ObserverClass = /** @class */ (function (_super) {
 }(NSObject));
 export class Label extends LabelBase {
     constructor() {
-        super();
-        this.currentMaxFontSize = 0;
+        super(...arguments);
         this.fontSizeRatio = 1;
-        // if (iOSUseDTCoreText && !Label.DTCORETEXT_INIT) {
-        //     Label.DTCORETEXT_INIT = true;
-        //     DTCoreTextFontDescriptor.asyncPreloadFontLookupTable();
-        // }
     }
+    // constructor() {
+    // super();
+    // if (iOSUseDTCoreText && !Label.DTCORETEXT_INIT) {
+    //     Label.DTCORETEXT_INIT = true;
+    //     DTCoreTextFontDescriptor.asyncPreloadFontLookupTable();
+    // }
+    // }
     createNativeView() {
         const view = UITextView.new();
         if (!view.font) {
@@ -123,13 +125,10 @@ export class Label extends LabelBase {
         view.backgroundColor = UIColor.clearColor;
         view.userInteractionEnabled = true;
         view.dataDetectorTypes = -1 /* All */;
-        view.textContainerInset = {
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0
-        };
-        view.textContainer.lineFragmentPadding = 0; // to remove left padding
+        view.textContainerInset = UIEdgeInsetsZero;
+        view.textContainer.lineFragmentPadding = 0;
+        // ignore font leading just like UILabel does
+        view.layoutManager.usesFontLeading = false;
         // view.textContainer.lineBreakMode = NSLineBreakMode.ByCharWrapping;
         return view;
     }
@@ -140,12 +139,6 @@ export class Label extends LabelBase {
         this._observer['_owner'] = new WeakRef(this);
         this.nativeViewProtected.addObserverForKeyPathOptionsContext(this._observer, 'contentSize', 1 /* New */, null);
         this.nativeViewProtected.attributedText = this.attributedString;
-        // this.htmlText = null;
-        // this.needsHTMLUpdate = false;
-        // this.updatingHTML = false;
-        // if (this.htmlText && this.needsHTMLUpdate) {
-        // this.updateHTMLString();
-        // }
     }
     disposeNativeView() {
         this._delegate = null;
@@ -169,20 +162,31 @@ export class Label extends LabelBase {
     }
     computeTextHeight(size) {
         const tv = this.nativeTextViewProtected;
+        const oldtextContainerInset = tv.textContainerInset;
+        tv.textContainerInset = UIEdgeInsetsZero;
+        // if (tv.attributedText) {
+        //     const result = tv.attributedText.boundingRectWithSizeOptionsContext(
+        //         size,
+        //         NSStringDrawingOptions.UsesLineFragmentOrigin | NSStringDrawingOptions.UsesFontLeading,
+        //         null
+        //     );
+        //     return Math.round(CGRectGetHeight(result));
+        // }
         const result = tv.sizeThatFits(size);
+        tv.textContainerInset = oldtextContainerInset;
         return result.height;
     }
     updateTextContainerInset(applyVerticalTextAlignment = true) {
-        // if (!this.text) {
-        //     return;
-        // }
+        var _e, _f;
         const tv = this.nativeTextViewProtected;
         const top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth);
         const right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth);
         const bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
         const left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
-        if (!applyVerticalTextAlignment || !this.verticalTextAlignment) {
-            this.nativeViewProtected.textContainerInset = {
+        if (!applyVerticalTextAlignment ||
+            !this.verticalTextAlignment ||
+            (((_e = tv.text) === null || _e === void 0 ? void 0 : _e.length) === 0 && ((_f = tv.attributedText) === null || _f === void 0 ? void 0 : _f.length) === 0)) {
+            tv.textContainerInset = {
                 top,
                 left,
                 bottom,
@@ -193,7 +197,7 @@ export class Label extends LabelBase {
         switch (this.verticalTextAlignment) {
             case 'initial': // not supported
             case 'top':
-                this.nativeViewProtected.textContainerInset = {
+                tv.textContainerInset = {
                     top,
                     left,
                     bottom,
@@ -205,7 +209,7 @@ export class Label extends LabelBase {
                 const height = this.computeTextHeight(CGSizeMake(tv.bounds.size.width, 10000));
                 let topCorrect = (tv.bounds.size.height - top - bottom - height * tv.zoomScale) / 2.0;
                 topCorrect = topCorrect < 0.0 ? 0.0 : topCorrect;
-                this.nativeViewProtected.textContainerInset = {
+                tv.textContainerInset = {
                     top: top + topCorrect,
                     left,
                     bottom,
@@ -215,9 +219,9 @@ export class Label extends LabelBase {
             }
             case 'bottom': {
                 const height = this.computeTextHeight(CGSizeMake(tv.bounds.size.width, 10000));
-                let bottomCorrect = tv.bounds.size.height - bottom - height * tv.zoomScale;
+                let bottomCorrect = tv.bounds.size.height - top - bottom - height * tv.zoomScale;
                 bottomCorrect = bottomCorrect < 0.0 ? 0.0 : bottomCorrect;
-                this.nativeViewProtected.textContainerInset = {
+                tv.textContainerInset = {
                     top: top + bottomCorrect,
                     left,
                     bottom,
@@ -231,78 +235,6 @@ export class Label extends LabelBase {
     get ios() {
         return this.nativeViewProtected;
     }
-    // setTextDecorationAndTransform() {
-    //     const style = this.style;
-    //     const dict = new Map<string, any>();
-    //     switch (style.textDecoration) {
-    //         case 'none':
-    //             break;
-    //         case 'underline':
-    //             // TODO: Replace deprecated `StyleSingle` with `Single` after the next typings update
-    //             dict.set(NSUnderlineStyleAttributeName, NSUnderlineStyle.Single);
-    //             break;
-    //         case 'line-through':
-    //             // TODO: Replace deprecated `StyleSingle` with `Single` after the next typings update
-    //             dict.set(NSStrikethroughStyleAttributeName, NSUnderlineStyle.Single);
-    //             break;
-    //         case 'underline line-through':
-    //             // TODO: Replace deprecated `StyleSingle` with `Single` after the next typings update
-    //             dict.set(NSUnderlineStyleAttributeName, NSUnderlineStyle.Single);
-    //             dict.set(NSStrikethroughStyleAttributeName, NSUnderlineStyle.Single);
-    //             break;
-    //         default:
-    //             throw new Error(`Invalid text decoration value: ${style.textDecoration}. Valid values are: 'none', 'underline', 'line-through', 'underline line-through'.`);
-    //     }
-    //     if (style.letterSpacing !== 0) {
-    //         dict.set(NSKernAttributeName, style.letterSpacing * this.nativeTextViewProtected.font.pointSize);
-    //     }
-    //     if (style.lineHeight || style.whiteSpace === 'nowrap' || (style['lineBreak'] && style['lineBreak'] !== 'none')) {
-    //         const paragraphStyle = NSMutableParagraphStyle.alloc().init();
-    //         paragraphStyle.minimumLineHeight = style.lineHeight;
-    //         // make sure a possible previously set text alignment setting is not lost when line height is specified
-    //         paragraphStyle.alignment = (this.nativeTextViewProtected as UITextField | UITextView | UILabel).textAlignment;
-    //         // make sure a possible previously set line break mode is not lost when line height is specified
-    //         if (style['lineBreak']) {
-    //             paragraphStyle.lineBreakMode = lineBreakToLineBreakMode(style['lineBreak']);
-    //         } else if (style.whiteSpace) {
-    //             paragraphStyle.lineBreakMode = whiteSpaceToLineBreakMode(style.whiteSpace);
-    //         }
-    //         dict.set(NSParagraphStyleAttributeName, paragraphStyle);
-    //     } else if (isTextView && this.style.textAlignment !== 'initial') {
-    //         const paragraphStyle = NSMutableParagraphStyle.alloc().init();
-    //         paragraphStyle.alignment = this.nativeTextViewProtected.textAlignment;
-    //         dict.set(NSParagraphStyleAttributeName, paragraphStyle);
-    //     }
-    //     if (style.color && dict.size > 0) {
-    //         // dict.set(NSForegroundColorAttributeName, style.color.ios);
-    //     }
-    //     const text = this.text;
-    //     const str = text === undefined || text === null ? '' : text.toString();
-    //     const source = getTransformedText(str, this.textTransform);
-    //     if (dict.size > 0) {
-    //         if (isTextView) {
-    //             // UITextView's font seems to change inside.
-    //             dict.set(NSFontAttributeName, this.nativeTextViewProtected.font);
-    //         }
-    //         const result = NSMutableAttributedString.alloc().initWithString(source);
-    //         result.setAttributesRange(dict as any, { location: 0, length: source.length });
-    //         if (this.nativeTextViewProtected instanceof UIButton) {
-    //             this.nativeTextViewProtected.setAttributedTitleForState(result, UIControlState.Normal);
-    //         } else {
-    //             this.nativeTextViewProtected.attributedText = result;
-    //         }
-    //     } else {
-    //         if (this.nativeTextViewProtected instanceof UIButton) {
-    //             // Clear attributedText or title won't be affected.
-    //             this.nativeTextViewProtected.setAttributedTitleForState(null, UIControlState.Normal);
-    //             this.nativeTextViewProtected.setTitleForState(source, UIControlState.Normal);
-    //         } else {
-    //             // Clear attributedText or text won't be affected.
-    //             this.nativeTextViewProtected.attributedText = undefined;
-    //             this.nativeTextViewProtected.text = source;
-    //         }
-    //     }
-    // }
     _requestLayoutOnTextChanged() {
         if (this._fixedSize === FixedSize.BOTH) {
             return;
@@ -390,14 +322,13 @@ export class Label extends LabelBase {
         // when in collectionView or pager
         // if this is done sync (without DTCoreText) while init the cell
         // it breaks the UICollectionView :s
-        if (usingIOSDTCoreText()) {
-            this._updateHTMLString();
-        }
-        else {
-            // setTimeout(() => {
-            this._updateHTMLString();
-            // }, 0);
-        }
+        // if (usingIOSDTCoreText()) {
+        //     this._updateHTMLString();
+        // } else {
+        // setTimeout(() => {
+        this._updateHTMLString();
+        // }, 0);
+        // }
     }
     _setColor(color) {
         if (this.nativeTextViewProtected instanceof UIButton) {
@@ -514,6 +445,7 @@ export class Label extends LabelBase {
         else {
             super._setNativeText();
         }
+        this.updateTextContainerInset();
         this._requestLayoutOnTextChanged();
     }
     setTextDecorationAndTransform() {
@@ -538,25 +470,18 @@ export class Label extends LabelBase {
         if (style.letterSpacing !== 0 && this.nativeTextViewProtected.font) {
             const kern = style.letterSpacing * this.nativeTextViewProtected.font.pointSize;
             dict.set(NSKernAttributeName, kern);
-            if (this.nativeTextViewProtected instanceof UITextField) {
-                this.nativeTextViewProtected.defaultTextAttributes.setValueForKey(kern, NSKernAttributeName);
-            }
         }
         const isTextView = false;
-        if (style.lineHeight) {
+        if (style.lineHeight !== undefined) {
+            let lineHeight = style.lineHeight;
+            if (lineHeight === 0) {
+                lineHeight = 0.00001;
+            }
             const paragraphStyle = NSMutableParagraphStyle.alloc().init();
-            paragraphStyle.lineSpacing = style.lineHeight;
+            paragraphStyle.minimumLineHeight = lineHeight;
+            paragraphStyle.maximumLineHeight = lineHeight;
             // make sure a possible previously set text alignment setting is not lost when line height is specified
-            if (this.nativeTextViewProtected instanceof UIButton) {
-                paragraphStyle.alignment = this.nativeTextViewProtected.titleLabel.textAlignment;
-            }
-            else {
-                paragraphStyle.alignment = this.nativeTextViewProtected.textAlignment;
-            }
-            if (this.nativeTextViewProtected instanceof UILabel) {
-                // make sure a possible previously set line break mode is not lost when line height is specified
-                paragraphStyle.lineBreakMode = this.nativeTextViewProtected.lineBreakMode;
-            }
+            paragraphStyle.alignment = this.nativeTextViewProtected.textAlignment;
             dict.set(NSParagraphStyleAttributeName, paragraphStyle);
         }
         else if (isTextView) {
@@ -580,81 +505,27 @@ export class Label extends LabelBase {
                 location: 0,
                 length: source.length
             });
-            if (this.nativeTextViewProtected instanceof UIButton) {
-                this.nativeTextViewProtected.setAttributedTitleForState(result, 0 /* Normal */);
-            }
-            else {
-                this.nativeTextViewProtected.attributedText = result;
-            }
+            this.nativeTextViewProtected.attributedText = result;
         }
         else {
-            if (this.nativeTextViewProtected instanceof UIButton) {
-                // Clear attributedText or title won't be affected.
-                this.nativeTextViewProtected.setAttributedTitleForState(null, 0 /* Normal */);
-                this.nativeTextViewProtected.setTitleForState(source, 0 /* Normal */);
-            }
-            else {
-                // Clear attributedText or text won't be affected.
-                this.nativeTextViewProtected.attributedText = undefined;
-                this.nativeTextViewProtected.text = source;
-            }
+            // Clear attributedText or text won't be affected.
+            this.nativeTextViewProtected.attributedText = undefined;
+            this.nativeTextViewProtected.text = source;
         }
         if (!style.color && majorVersion >= 13 && UIColor.labelColor) {
             this._setColor(UIColor.labelColor);
         }
     }
-    createNSMutableAttributedString(formattedString) {
-        var _e;
-        // we need to store the max Font size to pass it to createMutableStringForSpan
-        const length = formattedString.spans.length;
-        let maxFontSize = ((_e = formattedString.style) === null || _e === void 0 ? void 0 : _e.fontSize) || (this === null || this === void 0 ? void 0 : this.style.fontSize) || 0;
-        for (let i = 0; i < length; i++) {
-            const s = formattedString.spans.getItem(i);
-            if (s.style.fontSize) {
-                maxFontSize = Math.max(maxFontSize, s.style.fontSize);
-            }
-        }
-        this.currentMaxFontSize = maxFontSize;
-        return super.createNSMutableAttributedString(formattedString);
-    }
-    createMutableStringForSpan(span, text) {
-        const viewFont = this.nativeTextViewProtected.font;
-        const attrDict = {};
-        const style = span.style;
-        let align = style.verticalAlignment || span.parent.style.verticalAlignment;
-        if (!align || align === 'stretch') {
-            align = this.verticalTextAlignment;
-        }
-        const font = new Font(style.fontFamily, style.fontSize, style.fontStyle, style.fontWeight);
-        const iosFont = font.getUIFont(viewFont);
-        attrDict[NSFontAttributeName] = iosFont;
-        if (span.color) {
-            const color = span.color instanceof Color ? span.color : new Color(span.color);
-            attrDict[NSForegroundColorAttributeName] = color.ios;
-        }
-        // We don't use isSet function here because defaultValue for backgroundColor is null.
-        const backgroundColor = style.backgroundColor || span.parent.backgroundColor;
-        if (backgroundColor) {
-            const color = backgroundColor instanceof Color ? backgroundColor : new Color(backgroundColor);
-            attrDict[NSBackgroundColorAttributeName] = color.ios;
-        }
-        const textDecoration = getClosestPropertyValue(textDecorationProperty, span);
-        if (textDecoration) {
-            const underline = textDecoration.indexOf('underline') !== -1;
-            if (underline) {
-                attrDict[NSUnderlineStyleAttributeName] = underline;
-            }
-            const strikethrough = textDecoration.indexOf('line-through') !== -1;
-            if (strikethrough) {
-                attrDict[NSStrikethroughStyleAttributeName] = strikethrough;
-            }
-        }
-        if (align && align !== 'stretch') {
-            if (iosFont) {
-                attrDict[NSBaselineOffsetAttributeName] = -computeBaseLineOffset(align, -iosFont.ascender, -iosFont.descender, -iosFont.ascender, -iosFont.descender, iosFont.pointSize, this.currentMaxFontSize);
-            }
+    createFormattedTextNative(value) {
+        return createNativeAttributedString(value, this, this.autoFontSize, this.fontSizeRatio);
+    }
+    setFormattedTextDecorationAndTransform() {
+        const attrText = this.createFormattedTextNative(this.formattedText);
+        // we override parent class behavior because we apply letterSpacing and lineHeight on a per Span basis
+        if (majorVersion >= 13 && UIColor.labelColor) {
+            this.nativeTextViewProtected.textColor = UIColor.labelColor;
         }
-        return NSMutableAttributedString.alloc().initWithStringAttributes(text, attrDict);
+        this.nativeTextViewProtected.attributedText = attrText;
     }
     [paddingTopProperty.getDefault]() {
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-label",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "Alternative to the built-in NativeScript Label but with better performance and additional features such as HTML rendering and more.",
     "main": "./label",
     "sideEffects": false,
@@ -32,7 +32,7 @@
     "license": "Apache-2.0",
     "readmeFilename": "README.md",
     "dependencies": {
-        "@nativescript-community/text": "^1.4.21"
+        "@nativescript-community/text": "^1.4.29"
     },
-    "gitHead": "548a66a7342e4c8e1e33ce63a0b6dd9a6a57c5fb"
+    "gitHead": "9a124d1823a131d3a2cf1753a661b6984b562b7f"
 }