mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
chore: format
This commit is contained in:
Nathan Walker
@@ -7,19 +7,23 @@ import { HtmlView as HtmlViewDefinition } from ".";
|
||||
|
||||
@CSSType("HtmlView")
|
||||
export class HtmlViewBase extends View implements HtmlViewDefinition {
|
||||
public html: string;
|
||||
public html: string;
|
||||
}
|
||||
|
||||
HtmlViewBase.prototype.recycleNativeView = "auto";
|
||||
|
||||
// TODO: Can we use Label.ios optimization for affectsLayout???
|
||||
export const htmlProperty = new Property<HtmlViewBase, string>({ name: "html", defaultValue: "", affectsLayout: true });
|
||||
export const htmlProperty = new Property<HtmlViewBase, string>({
|
||||
name: "html",
|
||||
defaultValue: "",
|
||||
affectsLayout: true,
|
||||
});
|
||||
htmlProperty.register(HtmlViewBase);
|
||||
|
||||
export const linkColorProperty = new CssProperty<Style, Color>({
|
||||
name: "linkColor",
|
||||
cssName: "link-color",
|
||||
equalityComparer: Color.equals,
|
||||
valueConverter: (value) => new Color(value),
|
||||
name: "linkColor",
|
||||
cssName: "link-color",
|
||||
equalityComparer: Color.equals,
|
||||
valueConverter: (value) => new Color(value),
|
||||
});
|
||||
linkColorProperty.register(Style);
|
||||
|
||||
@@ -1,95 +1,107 @@
|
||||
import { Color } from "../../color";
|
||||
import { Font } from "../styling/font";
|
||||
import {
|
||||
colorProperty,
|
||||
fontSizeProperty,
|
||||
fontInternalProperty,
|
||||
colorProperty,
|
||||
fontSizeProperty,
|
||||
fontInternalProperty,
|
||||
} from "../styling/style-properties";
|
||||
import {
|
||||
HtmlViewBase, htmlProperty,
|
||||
linkColorProperty,
|
||||
HtmlViewBase,
|
||||
htmlProperty,
|
||||
linkColorProperty,
|
||||
} from "./html-view-common";
|
||||
|
||||
export * from "./html-view-common";
|
||||
|
||||
export class HtmlView extends HtmlViewBase {
|
||||
nativeViewProtected: android.widget.TextView;
|
||||
nativeViewProtected: android.widget.TextView;
|
||||
|
||||
public createNativeView() {
|
||||
return new android.widget.TextView(this._context);
|
||||
}
|
||||
public createNativeView() {
|
||||
return new android.widget.TextView(this._context);
|
||||
}
|
||||
|
||||
public initNativeView(): void {
|
||||
super.initNativeView();
|
||||
const nativeView = this.nativeViewProtected;
|
||||
public initNativeView(): void {
|
||||
super.initNativeView();
|
||||
const nativeView = this.nativeViewProtected;
|
||||
|
||||
// Allow text selection
|
||||
nativeView.setTextIsSelectable(true);
|
||||
// Allow text selection
|
||||
nativeView.setTextIsSelectable(true);
|
||||
|
||||
// This makes the html <a href...> work
|
||||
nativeView.setLinksClickable(true);
|
||||
nativeView.setMovementMethod(android.text.method.LinkMovementMethod.getInstance());
|
||||
}
|
||||
// This makes the html <a href...> work
|
||||
nativeView.setLinksClickable(true);
|
||||
nativeView.setMovementMethod(
|
||||
android.text.method.LinkMovementMethod.getInstance()
|
||||
);
|
||||
}
|
||||
|
||||
public resetNativeView(): void {
|
||||
super.resetNativeView();
|
||||
this.nativeViewProtected.setAutoLinkMask(0);
|
||||
}
|
||||
public resetNativeView(): void {
|
||||
super.resetNativeView();
|
||||
this.nativeViewProtected.setAutoLinkMask(0);
|
||||
}
|
||||
|
||||
[htmlProperty.getDefault](): string {
|
||||
return "";
|
||||
}
|
||||
[htmlProperty.setNative](value: string) {
|
||||
// If the data.newValue actually has a <a...> in it; we need to disable autolink mask
|
||||
// it internally disables the coloring, but then the <a> links won't work.. So to support both
|
||||
// styles of links (html and just text based) we have to manually enable/disable the autolink mask
|
||||
let mask = 15;
|
||||
if (value.search(/<a\s/i) >= 0) {
|
||||
mask = 0;
|
||||
}
|
||||
this.nativeViewProtected.setAutoLinkMask(mask);
|
||||
this.nativeViewProtected.setText(<any>android.text.Html.fromHtml(value));
|
||||
}
|
||||
[htmlProperty.getDefault](): string {
|
||||
return "";
|
||||
}
|
||||
[htmlProperty.setNative](value: string) {
|
||||
// If the data.newValue actually has a <a...> in it; we need to disable autolink mask
|
||||
// it internally disables the coloring, but then the <a> links won't work.. So to support both
|
||||
// styles of links (html and just text based) we have to manually enable/disable the autolink mask
|
||||
let mask = 15;
|
||||
if (value.search(/<a\s/i) >= 0) {
|
||||
mask = 0;
|
||||
}
|
||||
this.nativeViewProtected.setAutoLinkMask(mask);
|
||||
this.nativeViewProtected.setText(
|
||||
<any>android.text.Html.fromHtml(value)
|
||||
);
|
||||
}
|
||||
|
||||
[colorProperty.getDefault](): android.content.res.ColorStateList {
|
||||
return this.nativeViewProtected.getTextColors();
|
||||
}
|
||||
[colorProperty.setNative](value: Color | android.content.res.ColorStateList) {
|
||||
if (value instanceof Color) {
|
||||
this.nativeViewProtected.setTextColor(value.android);
|
||||
} else {
|
||||
this.nativeViewProtected.setTextColor(value);
|
||||
}
|
||||
}
|
||||
[colorProperty.getDefault](): android.content.res.ColorStateList {
|
||||
return this.nativeViewProtected.getTextColors();
|
||||
}
|
||||
[colorProperty.setNative](
|
||||
value: Color | android.content.res.ColorStateList
|
||||
) {
|
||||
if (value instanceof Color) {
|
||||
this.nativeViewProtected.setTextColor(value.android);
|
||||
} else {
|
||||
this.nativeViewProtected.setTextColor(value);
|
||||
}
|
||||
}
|
||||
|
||||
[linkColorProperty.getDefault](): android.content.res.ColorStateList {
|
||||
return this.nativeViewProtected.getLinkTextColors();
|
||||
}
|
||||
[linkColorProperty.setNative](value: Color | android.content.res.ColorStateList) {
|
||||
const color = value instanceof Color ? value.android : value;
|
||||
if (value instanceof Color) {
|
||||
this.nativeViewProtected.setLinkTextColor(value.android);
|
||||
} else {
|
||||
this.nativeViewProtected.setLinkTextColor(value);
|
||||
}
|
||||
}
|
||||
[linkColorProperty.getDefault](): android.content.res.ColorStateList {
|
||||
return this.nativeViewProtected.getLinkTextColors();
|
||||
}
|
||||
[linkColorProperty.setNative](
|
||||
value: Color | android.content.res.ColorStateList
|
||||
) {
|
||||
const color = value instanceof Color ? value.android : value;
|
||||
if (value instanceof Color) {
|
||||
this.nativeViewProtected.setLinkTextColor(value.android);
|
||||
} else {
|
||||
this.nativeViewProtected.setLinkTextColor(value);
|
||||
}
|
||||
}
|
||||
|
||||
[fontInternalProperty.getDefault](): android.graphics.Typeface {
|
||||
return this.nativeViewProtected.getTypeface();
|
||||
}
|
||||
[fontInternalProperty.setNative](value: Font | android.graphics.Typeface) {
|
||||
const font = value instanceof Font ? value.getAndroidTypeface() : value;
|
||||
this.nativeViewProtected.setTypeface(font);
|
||||
}
|
||||
[fontInternalProperty.getDefault](): android.graphics.Typeface {
|
||||
return this.nativeViewProtected.getTypeface();
|
||||
}
|
||||
[fontInternalProperty.setNative](value: Font | android.graphics.Typeface) {
|
||||
const font = value instanceof Font ? value.getAndroidTypeface() : value;
|
||||
this.nativeViewProtected.setTypeface(font);
|
||||
}
|
||||
|
||||
[fontSizeProperty.getDefault](): {nativeSize: number} {
|
||||
return {nativeSize: this.nativeViewProtected.getTextSize()};
|
||||
}
|
||||
[fontSizeProperty.setNative](value: number | {nativeSize: number}) {
|
||||
if (typeof value === "number") {
|
||||
this.nativeViewProtected.setTextSize(value);
|
||||
} else {
|
||||
this.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
|
||||
}
|
||||
}
|
||||
[fontSizeProperty.getDefault](): { nativeSize: number } {
|
||||
return { nativeSize: this.nativeViewProtected.getTextSize() };
|
||||
}
|
||||
[fontSizeProperty.setNative](value: number | { nativeSize: number }) {
|
||||
if (typeof value === "number") {
|
||||
this.nativeViewProtected.setTextSize(value);
|
||||
} else {
|
||||
this.nativeViewProtected.setTextSize(
|
||||
android.util.TypedValue.COMPLEX_UNIT_PX,
|
||||
value.nativeSize
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
24
nativescript-core/ui/html-view/index.d.ts
vendored
24
nativescript-core/ui/html-view/index.d.ts
vendored
@@ -7,20 +7,20 @@ import { Property } from "../core/properties";
|
||||
* [android support](http://developer.android.com/reference/android/text/Html.html)
|
||||
*/
|
||||
export class HtmlView extends View {
|
||||
/**
|
||||
* Gets the native [android widget](http://developer.android.com/reference/android/widget/TextView.html) that represents the user interface for this component. Valid only when running on Android OS.
|
||||
*/
|
||||
android: any /* android.widget.TextView */;
|
||||
/**
|
||||
* Gets the native [android widget](http://developer.android.com/reference/android/widget/TextView.html) that represents the user interface for this component. Valid only when running on Android OS.
|
||||
*/
|
||||
android: any /* android.widget.TextView */;
|
||||
|
||||
/**
|
||||
* Gets the native [UITextView](https://developer.apple.com/documentation/uikit/uitextview) that represents the user interface for this component. Valid only when running on iOS.
|
||||
*/
|
||||
ios: any /* UITextView */;
|
||||
/**
|
||||
* Gets the native [UITextView](https://developer.apple.com/documentation/uikit/uitextview) that represents the user interface for this component. Valid only when running on iOS.
|
||||
*/
|
||||
ios: any /* UITextView */;
|
||||
|
||||
/**
|
||||
* Gets or sets html string for the HtmlView.
|
||||
*/
|
||||
html: string;
|
||||
/**
|
||||
* Gets or sets html string for the HtmlView.
|
||||
*/
|
||||
html: string;
|
||||
}
|
||||
|
||||
export const htmlProperty: Property<HtmlView, string>;
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import { Color } from "../../color";
|
||||
import { Font } from "../styling/font";
|
||||
import {
|
||||
colorProperty,
|
||||
fontInternalProperty,
|
||||
colorProperty,
|
||||
fontInternalProperty,
|
||||
} from "../styling/style-properties";
|
||||
import {
|
||||
HtmlViewBase, htmlProperty,
|
||||
linkColorProperty,
|
||||
HtmlViewBase,
|
||||
htmlProperty,
|
||||
linkColorProperty,
|
||||
} from "./html-view-common";
|
||||
import { View } from '../core/view';
|
||||
import { View } from "../core/view";
|
||||
import { ios, layout } from "../../utils/utils";
|
||||
|
||||
export * from "./html-view-common";
|
||||
@@ -16,116 +17,152 @@ export * from "./html-view-common";
|
||||
const majorVersion = ios.MajorVersion;
|
||||
|
||||
export class HtmlView extends HtmlViewBase {
|
||||
nativeViewProtected: UITextView;
|
||||
private currentHtml: string;
|
||||
nativeViewProtected: UITextView;
|
||||
private currentHtml: string;
|
||||
|
||||
public createNativeView() {
|
||||
const view = UITextView.new();
|
||||
view.scrollEnabled = false;
|
||||
view.editable = false;
|
||||
view.selectable = true;
|
||||
view.userInteractionEnabled = true;
|
||||
view.dataDetectorTypes = UIDataDetectorTypes.All;
|
||||
public createNativeView() {
|
||||
const view = UITextView.new();
|
||||
view.scrollEnabled = false;
|
||||
view.editable = false;
|
||||
view.selectable = true;
|
||||
view.userInteractionEnabled = true;
|
||||
view.dataDetectorTypes = UIDataDetectorTypes.All;
|
||||
|
||||
return view;
|
||||
}
|
||||
return view;
|
||||
}
|
||||
|
||||
public initNativeView(): void {
|
||||
super.initNativeView();
|
||||
public initNativeView(): void {
|
||||
super.initNativeView();
|
||||
|
||||
// Remove extra padding
|
||||
this.nativeViewProtected.textContainer.lineFragmentPadding = 0;
|
||||
this.nativeViewProtected.textContainerInset = (UIEdgeInsets as any).zero;
|
||||
}
|
||||
// Remove extra padding
|
||||
this.nativeViewProtected.textContainer.lineFragmentPadding = 0;
|
||||
this.nativeViewProtected.textContainerInset = (UIEdgeInsets as any).zero;
|
||||
}
|
||||
|
||||
get ios(): UITextView {
|
||||
return this.nativeViewProtected;
|
||||
}
|
||||
get ios(): UITextView {
|
||||
return this.nativeViewProtected;
|
||||
}
|
||||
|
||||
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
|
||||
const nativeView = this.nativeViewProtected;
|
||||
if (nativeView) {
|
||||
const width = layout.getMeasureSpecSize(widthMeasureSpec);
|
||||
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
|
||||
public onMeasure(
|
||||
widthMeasureSpec: number,
|
||||
heightMeasureSpec: number
|
||||
): void {
|
||||
const nativeView = this.nativeViewProtected;
|
||||
if (nativeView) {
|
||||
const width = layout.getMeasureSpecSize(widthMeasureSpec);
|
||||
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
|
||||
|
||||
const height = layout.getMeasureSpecSize(heightMeasureSpec);
|
||||
const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
|
||||
const height = layout.getMeasureSpecSize(heightMeasureSpec);
|
||||
const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
|
||||
|
||||
const desiredSize = layout.measureNativeView(nativeView, width, widthMode, height, heightMode);
|
||||
const desiredSize = layout.measureNativeView(
|
||||
nativeView,
|
||||
width,
|
||||
widthMode,
|
||||
height,
|
||||
heightMode
|
||||
);
|
||||
|
||||
const labelWidth = widthMode === layout.AT_MOST ? Math.min(desiredSize.width, width) : desiredSize.width;
|
||||
const measureWidth = Math.max(labelWidth, this.effectiveMinWidth);
|
||||
const measureHeight = Math.max(desiredSize.height, this.effectiveMinHeight);
|
||||
const labelWidth =
|
||||
widthMode === layout.AT_MOST
|
||||
? Math.min(desiredSize.width, width)
|
||||
: desiredSize.width;
|
||||
const measureWidth = Math.max(labelWidth, this.effectiveMinWidth);
|
||||
const measureHeight = Math.max(
|
||||
desiredSize.height,
|
||||
this.effectiveMinHeight
|
||||
);
|
||||
|
||||
const widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
|
||||
const heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
|
||||
const widthAndState = View.resolveSizeAndState(
|
||||
measureWidth,
|
||||
width,
|
||||
widthMode,
|
||||
0
|
||||
);
|
||||
const heightAndState = View.resolveSizeAndState(
|
||||
measureHeight,
|
||||
height,
|
||||
heightMode,
|
||||
0
|
||||
);
|
||||
|
||||
this.setMeasuredDimension(widthAndState, heightAndState);
|
||||
}
|
||||
}
|
||||
this.setMeasuredDimension(widthAndState, heightAndState);
|
||||
}
|
||||
}
|
||||
|
||||
[htmlProperty.getDefault](): string {
|
||||
return "";
|
||||
}
|
||||
[htmlProperty.getDefault](): string {
|
||||
return "";
|
||||
}
|
||||
|
||||
private renderWithStyles() {
|
||||
let html = this.currentHtml;
|
||||
const styles = [];
|
||||
if (this.nativeViewProtected.font) {
|
||||
styles.push(`font-family: '${this.nativeViewProtected.font.fontName}';`);
|
||||
styles.push(`font-size: ${this.nativeViewProtected.font.pointSize}px;`);
|
||||
}
|
||||
if (this.nativeViewProtected.textColor) {
|
||||
const textColor = Color.fromIosColor(this.nativeViewProtected.textColor);
|
||||
styles.push(`color: ${textColor.hex};`);
|
||||
}
|
||||
if (styles.length > 0) {
|
||||
html += `<style>body {${styles.join("")}}</style>`;
|
||||
}
|
||||
const htmlString = NSString.stringWithString(html + "");
|
||||
const nsData = htmlString.dataUsingEncoding(NSUnicodeStringEncoding);
|
||||
this.nativeViewProtected.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(
|
||||
nsData,
|
||||
<any>{ [NSDocumentTypeDocumentAttribute]: NSHTMLTextDocumentType },
|
||||
null
|
||||
);
|
||||
private renderWithStyles() {
|
||||
let html = this.currentHtml;
|
||||
const styles = [];
|
||||
if (this.nativeViewProtected.font) {
|
||||
styles.push(
|
||||
`font-family: '${this.nativeViewProtected.font.fontName}';`
|
||||
);
|
||||
styles.push(
|
||||
`font-size: ${this.nativeViewProtected.font.pointSize}px;`
|
||||
);
|
||||
}
|
||||
if (this.nativeViewProtected.textColor) {
|
||||
const textColor = Color.fromIosColor(
|
||||
this.nativeViewProtected.textColor
|
||||
);
|
||||
styles.push(`color: ${textColor.hex};`);
|
||||
}
|
||||
if (styles.length > 0) {
|
||||
html += `<style>body {${styles.join("")}}</style>`;
|
||||
}
|
||||
const htmlString = NSString.stringWithString(html + "");
|
||||
const nsData = htmlString.dataUsingEncoding(NSUnicodeStringEncoding);
|
||||
this.nativeViewProtected.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(
|
||||
nsData,
|
||||
<any>{ [NSDocumentTypeDocumentAttribute]: NSHTMLTextDocumentType },
|
||||
null
|
||||
);
|
||||
|
||||
if (majorVersion >= 13 && UIColor.labelColor) {
|
||||
this.nativeViewProtected.textColor = UIColor.labelColor;
|
||||
}
|
||||
}
|
||||
if (majorVersion >= 13 && UIColor.labelColor) {
|
||||
this.nativeViewProtected.textColor = UIColor.labelColor;
|
||||
}
|
||||
}
|
||||
|
||||
[htmlProperty.setNative](value: string) {
|
||||
this.currentHtml = value;
|
||||
this.renderWithStyles();
|
||||
}
|
||||
[htmlProperty.setNative](value: string) {
|
||||
this.currentHtml = value;
|
||||
this.renderWithStyles();
|
||||
}
|
||||
|
||||
[colorProperty.getDefault](): UIColor {
|
||||
return this.nativeViewProtected.textColor;
|
||||
}
|
||||
[colorProperty.setNative](value: Color | UIColor) {
|
||||
const color = value instanceof Color ? value.ios : value;
|
||||
this.nativeViewProtected.textColor = color;
|
||||
this.renderWithStyles();
|
||||
}
|
||||
[colorProperty.getDefault](): UIColor {
|
||||
return this.nativeViewProtected.textColor;
|
||||
}
|
||||
[colorProperty.setNative](value: Color | UIColor) {
|
||||
const color = value instanceof Color ? value.ios : value;
|
||||
this.nativeViewProtected.textColor = color;
|
||||
this.renderWithStyles();
|
||||
}
|
||||
|
||||
[linkColorProperty.getDefault](): UIColor {
|
||||
return this.nativeViewProtected.linkTextAttributes[NSForegroundColorAttributeName];
|
||||
}
|
||||
[linkColorProperty.setNative](value: Color | UIColor) {
|
||||
const color = value instanceof Color ? value.ios : value;
|
||||
const linkTextAttributes = NSDictionary.dictionaryWithObjectForKey(
|
||||
color,
|
||||
NSForegroundColorAttributeName,
|
||||
);
|
||||
this.nativeViewProtected.linkTextAttributes = linkTextAttributes;
|
||||
}
|
||||
[fontInternalProperty.getDefault](): UIFont {
|
||||
return this.nativeViewProtected.font;
|
||||
}
|
||||
[fontInternalProperty.setNative](value: Font | UIFont) {
|
||||
const font = value instanceof Font ? value.getUIFont(this.nativeViewProtected.font) : value;
|
||||
this.nativeViewProtected.font = font;
|
||||
this.renderWithStyles();
|
||||
}
|
||||
[linkColorProperty.getDefault](): UIColor {
|
||||
return this.nativeViewProtected.linkTextAttributes[
|
||||
NSForegroundColorAttributeName
|
||||
];
|
||||
}
|
||||
[linkColorProperty.setNative](value: Color | UIColor) {
|
||||
const color = value instanceof Color ? value.ios : value;
|
||||
const linkTextAttributes = NSDictionary.dictionaryWithObjectForKey(
|
||||
color,
|
||||
NSForegroundColorAttributeName
|
||||
);
|
||||
this.nativeViewProtected.linkTextAttributes = linkTextAttributes;
|
||||
}
|
||||
[fontInternalProperty.getDefault](): UIFont {
|
||||
return this.nativeViewProtected.font;
|
||||
}
|
||||
[fontInternalProperty.setNative](value: Font | UIFont) {
|
||||
const font =
|
||||
value instanceof Font
|
||||
? value.getUIFont(this.nativeViewProtected.font)
|
||||
: value;
|
||||
this.nativeViewProtected.font = font;
|
||||
this.renderWithStyles();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user