Skip to content

Commit ee76186

Browse files
farfromrefugfarfromrefug
committed
fix: NS8 and use createFormattedTextNative
1 parent c4e7bb5 commit ee76186

File tree

6 files changed

+132
-139
lines changed

6 files changed

+132
-139
lines changed

‎package.json

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -47,36 +47,34 @@
4747
"homepage": "https://github.com/nativescript-community/ui-label",
4848
"readmeFilename": "README.md",
4949
"devDependencies": {
50-
"@angular/common": "^10.1.0",
51-
"@angular/compiler": "~10.1.0",
52-
"@angular/compiler-cli": "~10.1.0",
53-
"@angular/core": "~10.1.0",
54-
"@angular/forms": "~10.1.0",
55-
"@angular/platform-browser": "~10.1.0",
56-
"@angular/platform-browser-dynamic": "~10.1.0",
57-
"@angular/router": "~10.1.0",
58-
"@commitlint/cli": "^11.0.0",
59-
"@commitlint/config-conventional": "^11.0.0",
60-
"@nativescript-community/text": "^1.4.9",
61-
"@nativescript/angular": "10.1.0",
62-
"@nativescript/core": "7.2.1",
63-
"@nativescript/types-android": "7.2.0",
64-
"@nativescript/types-ios": "7.2.0",
65-
"@nativescript/webpack": "4.1.0",
66-
"@types/node": "^14.14.27",
67-
"@typescript-eslint/eslint-plugin": "4.15.0",
68-
"@typescript-eslint/parser": "4.15.0",
69-
"eslint": "7.19.0",
70-
"eslint-config-prettier": "^8.1.0",
50+
"@angular/common": "^11.2.9",
51+
"@angular/compiler": "~11.2.9",
52+
"@angular/compiler-cli": "~11.2.9",
53+
"@angular/core": "~11.2.9",
54+
"@angular/forms": "~11.2.9",
55+
"@angular/platform-browser": "~11.2.9",
56+
"@angular/platform-browser-dynamic": "~11.2.9",
57+
"@angular/router": "~11.2.9",
58+
"@commitlint/cli": "^12.1.1",
59+
"@commitlint/config-conventional": "^12.1.1",
60+
"@nativescript-community/text": "^1.4.11",
61+
"@nativescript/angular": "11.2.0",
62+
"@nativescript/core": "8.0.1",
63+
"@nativescript/types-android": "8.0.0",
64+
"@nativescript/types-ios": "8.0.0",
65+
"@nativescript/webpack": "5.0.0-beta.6",
66+
"@types/node": "^14.14.37",
67+
"@typescript-eslint/eslint-plugin": "4.22.0",
68+
"@typescript-eslint/parser": "4.22.0",
69+
"eslint": "7.24.0",
70+
"eslint-config-prettier": "^8.2.0",
7171
"eslint-plugin-prettier": "^3.3.1",
72-
"husky": "^4.3.8",
73-
"lerna": "^3.22.1",
74-
"npm-watch": "^0.7.0",
72+
"husky": "^6.0.0",
73+
"lerna": "^4.0.0",
7574
"prettier": "^2.2.1",
76-
"prompt": "^1.1.0",
7775
"rimraf": "^3.0.2",
7876
"ts-patch": "^1.3.2",
79-
"typescript": "~4.1.5"
77+
"typescript": "~4.2.4"
8078
},
8179
"dependencies": {
8280
"ts-node": "^9.1.1"

‎plugin/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,6 @@
3232
"license": "Apache-2.0",
3333
"readmeFilename": "README.md",
3434
"dependencies": {
35-
"@nativescript-community/text": "^1.4.9"
35+
"@nativescript-community/text": "^1.4.10"
3636
}
3737
}

‎src/label-common.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { VerticalTextAlignment, cssProperty, init } from '@nativescript-communit
22
import {
33
CSSType,
44
Color,
5+
CoreTypes,
56
CssProperty,
67
FormattedString,
78
Property,
@@ -10,7 +11,6 @@ import {
1011
Label as TNLabel,
1112
booleanConverter
1213
} from '@nativescript/core';
13-
import { dip } from '@nativescript/core/ui/core/view';
1414
import { layout } from '@nativescript/core/utils/utils';
1515
import { Label as LabelViewDefinition, LineBreak, TextShadow } from './label';
1616

@@ -137,7 +137,7 @@ export const maxFontSizeProperty = new CssProperty<Style, number>({
137137
});
138138
maxFontSizeProperty.register(Style);
139139

140-
function parseDIPs(value: string): dip {
140+
function parseDIPs(value: string): CoreTypes.dip {
141141
if (value.indexOf('px') !== -1) {
142142
return layout.toDeviceIndependentPixels(parseFloat(value.replace('px', '').trim()));
143143
} else {

‎src/label.android.ts

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,18 @@
88
} from '@nativescript-community/text';
99
import {
1010
CSSType,
11+
CoreTypes,
1112
FormattedString,
1213
Observable,
1314
Property,
1415
PropertyChangeData,
1516
Span,
1617
View,
17-
ViewBase,
1818
booleanConverter,
1919
profile
2020
} from '@nativescript/core';
2121
import { Color } from '@nativescript/core/color';
22+
import { CSSShadow } from '@nativescript/core/ui/styling/css-shadow';
2223
import { Font, FontStyle, FontWeight } from '@nativescript/core/ui/styling/font';
2324
import {
2425
Length,
@@ -31,10 +32,6 @@ import {
3132
paddingTopProperty
3233
} from '@nativescript/core/ui/styling/style-properties';
3334
import {
34-
TextAlignment,
35-
TextDecoration,
36-
TextTransform,
37-
WhiteSpace,
3835
letterSpacingProperty,
3936
textAlignmentProperty,
4037
textDecorationProperty,
@@ -48,13 +45,11 @@ import {
4845
autoFontSizeProperty,
4946
lineBreakProperty,
5047
maxLinesProperty,
51-
needFormattedStringComputation,
5248
selectableProperty,
5349
textShadowProperty
5450
} from './label-common';
5551

56-
export { enableIOSDTCoreText, createNativeAttributedString } from '@nativescript-community/text';
57-
52+
export { createNativeAttributedString, enableIOSDTCoreText } from '@nativescript-community/text';
5853
export * from './label-common';
5954

6055
let TextView: typeof com.nativescript.label.EllipsizingTextView;
@@ -98,7 +93,7 @@ export const htmlProperty = new Property<Label, string>({ name: 'html', defaultV
9893

9994
type ClickableSpan = new (owner: Span) => android.text.style.ClickableSpan;
10095

101-
function getHorizontalGravity(textAlignment: TextAlignment) {
96+
function getHorizontalGravity(textAlignment: CoreTypes.TextAlignmentType) {
10297
switch (textAlignment) {
10398
case 'initial':
10499
case 'left':
@@ -207,6 +202,7 @@ abstract class LabelBase extends View implements LabelViewDefinition {
207202
@cssProperty maxFontSize: number;
208203
@cssProperty verticalTextAlignment: VerticalTextAlignment;
209204
@cssProperty linkColor: Color;
205+
@cssProperty textShadow: CSSShadow;
210206
@cssProperty linkUnderline: boolean;
211207
public html: string;
212208
@cssProperty selectable: boolean;
@@ -230,16 +226,16 @@ abstract class LabelBase extends View implements LabelViewDefinition {
230226
@cssProperty letterSpacing: number;
231227
@cssProperty lineHeight: number;
232228
@cssProperty lineBreak: LineBreak;
233-
@cssProperty textAlignment: TextAlignment;
234-
@cssProperty textDecoration: TextDecoration;
235-
@cssProperty textTransform: TextTransform;
236-
@cssProperty whiteSpace: WhiteSpace;
229+
@cssProperty textAlignment: CoreTypes.TextAlignmentType;
230+
@cssProperty textDecoration: CoreTypes.TextDecorationType;
231+
@cssProperty textTransform: CoreTypes.TextTransformType;
232+
@cssProperty whiteSpace: CoreTypes.WhiteSpaceType;
237233

238-
@cssProperty padding: string | Length;
239-
@cssProperty paddingTop: Length;
240-
@cssProperty paddingRight: Length;
241-
@cssProperty paddingBottom: Length;
242-
@cssProperty paddingLeft: Length;
234+
@cssProperty padding: string | CoreTypes.LengthType;
235+
@cssProperty paddingTop: CoreTypes.LengthType;
236+
@cssProperty paddingRight: CoreTypes.LengthType;
237+
@cssProperty paddingBottom: CoreTypes.LengthType;
238+
@cssProperty paddingLeft: CoreTypes.LengthType;
243239

244240
// for now code is duplicated as Android version is a full rewrite
245241
_canChangeText = true;
@@ -358,7 +354,7 @@ export class Label extends LabelBase {
358354
}
359355
}
360356

361-
[whiteSpaceProperty.setNative](value: WhiteSpace) {
357+
[whiteSpaceProperty.setNative](value: CoreTypes.WhiteSpaceType) {
362358
if (!this.lineBreak) {
363359
const nativeView = this.nativeTextViewProtected;
364360
switch (value) {
@@ -374,11 +370,21 @@ export class Label extends LabelBase {
374370
}
375371
}
376372
}
377-
[textShadowProperty.setNative](value: TextShadow) {
373+
[textShadowProperty.getDefault](value: number) {
374+
return {
375+
radius: this.nativeTextViewProtected.getShadowRadius(),
376+
offsetX: this.nativeTextViewProtected.getShadowDx(),
377+
offsetY: this.nativeTextViewProtected.getShadowDy(),
378+
color: this.nativeTextViewProtected.getShadowColor()
379+
};
380+
}
381+
382+
[textShadowProperty.setNative](value: CSSShadow) {
383+
// prettier-ignore
378384
this.nativeViewProtected.setShadowLayer(
379-
layout.toDevicePixels(value.blurRadius),
380-
layout.toDevicePixels(value.offsetX),
381-
layout.toDevicePixels(value.offsetY),
385+
Length.toDevicePixels(value.blurRadius, java.lang.Float.MIN_VALUE),
386+
Length.toDevicePixels(value.offsetX, 0),
387+
Length.toDevicePixels(value.offsetY, 0),
382388
value.color.android
383389
);
384390
}
@@ -404,11 +410,11 @@ export class Label extends LabelBase {
404410
this._setNativeText();
405411
}
406412

407-
[textTransformProperty.setNative](value: TextTransform) {
413+
[textTransformProperty.setNative](value: CoreTypes.TextTransformType) {
408414
this._setNativeText();
409415
}
410416

411-
[textAlignmentProperty.setNative](value: TextAlignment) {
417+
[textAlignmentProperty.setNative](value: CoreTypes.TextAlignmentType) {
412418
const view = this.nativeTextViewProtected;
413419
view.setGravity(getHorizontalGravity(value) | getVerticalGravity(this.verticalTextAlignment));
414420
}
@@ -436,7 +442,7 @@ export class Label extends LabelBase {
436442
this.nativeTextViewProtected.setTypeface(value instanceof Font ? value.getAndroidTypeface() : value);
437443
}
438444

439-
[textDecorationProperty.setNative](value: number | TextDecoration) {
445+
[textDecorationProperty.setNative](value: number | CoreTypes.TextDecorationType) {
440446
switch (value) {
441447
case 'none':
442448
this.nativeTextViewProtected.setPaintFlags(0);
@@ -462,40 +468,40 @@ export class Label extends LabelBase {
462468
org.nativescript.widgets.ViewHelper.setLetterspacing(this.nativeTextViewProtected, value);
463469
}
464470

465-
[paddingTopProperty.getDefault](): Length {
471+
[paddingTopProperty.getDefault](): CoreTypes.LengthType {
466472
return { value: this._defaultPaddingTop, unit: 'px' };
467473
}
468-
[paddingTopProperty.setNative](value: Length) {
474+
[paddingTopProperty.setNative](value: CoreTypes.LengthType) {
469475
org.nativescript.widgets.ViewHelper.setPaddingTop(
470476
this.nativeTextViewProtected,
471477
Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0)
472478
);
473479
}
474480

475-
[paddingRightProperty.getDefault](): Length {
481+
[paddingRightProperty.getDefault](): CoreTypes.LengthType {
476482
return { value: this._defaultPaddingRight, unit: 'px' };
477483
}
478-
[paddingRightProperty.setNative](value: Length) {
484+
[paddingRightProperty.setNative](value: CoreTypes.LengthType) {
479485
org.nativescript.widgets.ViewHelper.setPaddingRight(
480486
this.nativeTextViewProtected,
481487
Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0)
482488
);
483489
}
484490

485-
[paddingBottomProperty.getDefault](): Length {
491+
[paddingBottomProperty.getDefault](): CoreTypes.LengthType {
486492
return { value: this._defaultPaddingBottom, unit: 'px' };
487493
}
488-
[paddingBottomProperty.setNative](value: Length) {
494+
[paddingBottomProperty.setNative](value: CoreTypes.LengthType) {
489495
org.nativescript.widgets.ViewHelper.setPaddingBottom(
490496
this.nativeTextViewProtected,
491497
Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0)
492498
);
493499
}
494500

495-
[paddingLeftProperty.getDefault](): Length {
501+
[paddingLeftProperty.getDefault](): CoreTypes.LengthType {
496502
return { value: this._defaultPaddingLeft, unit: 'px' };
497503
}
498-
[paddingLeftProperty.setNative](value: Length) {
504+
[paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
499505
org.nativescript.widgets.ViewHelper.setPaddingLeft(
500506
this.nativeTextViewProtected,
501507
Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0)
@@ -522,35 +528,15 @@ export class Label extends LabelBase {
522528
[selectableProperty.setNative](value: boolean) {
523529
this.nativeTextViewProtected.setTextIsSelectable(value);
524530
}
531+
createFormattedTextNative(value: any) {
532+
const result = createNativeAttributedString(value, this);
525533

526-
@profile
527-
createHTMLString() {
528-
const result = createNativeAttributedString({ text: this.html }) as android.text.SpannableStringBuilder;
529-
const urlSpan = result.getSpans(0, result.length(), android.text.style.URLSpan.class);
530-
if (urlSpan.length > 0) {
531-
this._setTappableState(true);
532-
initializeURLClickableSpan();
533-
for (let index = 0; index < urlSpan.length; index++) {
534-
const span = urlSpan[index];
535-
const text = span.getURL();
536-
const start = result.getSpanStart(span);
537-
const end = result.getSpanEnd(span);
538-
result.removeSpan(span);
539-
result.setSpan(new URLClickableSpan(text, this), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
540-
}
541-
}
542-
return result;
543-
}
544-
@profile
545-
createSpannableStringBuilder() {
546-
const formattedText = this.formattedText;
547-
const result = createNativeAttributedString(formattedText as any);
548534
let indexSearch = 0;
549535
let str: string;
550-
formattedText.spans.forEach((s) => {
536+
value.spans.forEach((s) => {
551537
if (s.tappable) {
552538
if (!str) {
553-
str = formattedText.toString();
539+
str = value.toString();
554540
this._setTappableState(true);
555541
}
556542
initializeClickableSpan();
@@ -564,6 +550,24 @@ export class Label extends LabelBase {
564550
});
565551
return result;
566552
}
553+
@profile
554+
createHTMLString() {
555+
const result = createNativeAttributedString({ text: this.html }, this) as android.text.SpannableStringBuilder;
556+
const urlSpan = result.getSpans(0, result.length(), android.text.style.URLSpan.class);
557+
if (urlSpan.length > 0) {
558+
this._setTappableState(true);
559+
initializeURLClickableSpan();
560+
for (let index = 0; index < urlSpan.length; index++) {
561+
const span = urlSpan[index];
562+
const text = span.getURL();
563+
const start = result.getSpanStart(span);
564+
const end = result.getSpanEnd(span);
565+
result.removeSpan(span);
566+
result.setSpan(new URLClickableSpan(text, this), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
567+
}
568+
}
569+
return result;
570+
}
567571
_tappable = false;
568572
_setTappableState(tappable: boolean) {
569573
if (this._tappable !== tappable) {
@@ -596,7 +600,7 @@ export class Label extends LabelBase {
596600
transformedText = this.createHTMLString();
597601
textProperty.nativeValueChange(this, this.html === null || this.html === undefined ? '' : this.html);
598602
} else if (this.formattedText) {
599-
transformedText = this.createSpannableStringBuilder();
603+
transformedText = this.createFormattedTextNative(this.formattedText);
600604
textProperty.nativeValueChange(
601605
this,
602606
this.formattedText === null || this.formattedText === undefined ? '' : this.formattedText.toString()
@@ -659,7 +663,7 @@ function getCapitalizedString(str: string): string {
659663
return newWords.join(' ');
660664
}
661665

662-
export function getTransformedText(text: string, textTransform: TextTransform): string {
666+
export function getTransformedText(text: string, textTransform: CoreTypes.TextTransformType): string {
663667
switch (textTransform) {
664668
case 'uppercase':
665669
return text.toUpperCase();

‎src/label.d.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@
22
* Contains the Label class, which represents a custom label widget which correctly supports html.
33
*/ /** */
44

5-
import { Color, Label as TNLabel } from '@nativescript/core';
5+
import { Color, CoreTypes, Label as TNLabel } from '@nativescript/core';
66
import { Property } from '@nativescript/core/ui/core/properties';
7-
import { dip } from '@nativescript/core/ui/core/view';
8-
import { TextAlignment } from '@nativescript/core/ui/text-base';
97
/**
108
* Represents a label with html content. Use this component instead WebView when you want to show just static HTML content.
119
* [iOS support](https://developer.apple.com/library/ios/documentation/UIKit/Reference/NSAttributedString_UIKit_Additions/#//apple_ref/occ/instm/NSAttributedString/initWithData:options:documentAttributes:error:)
@@ -37,9 +35,9 @@ export declare const htmlProperty: Property<Label, string>;
3735
export declare const verticalTextAlignmentProperty: Property<Label, VerticalTextAlignment>;
3836

3937
export interface TextShadow {
40-
offsetX: dip;
41-
offsetY: dip;
42-
blurRadius: dip;
38+
offsetX: CoreTypes.dip;
39+
offsetY: CoreTypes.dip;
40+
blurRadius: CoreTypes.dip;
4341
color: Color;
4442
}
4543

0 commit comments

Comments
 (0)