mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
chore: default tabs
This commit is contained in:
Nathan Walker
@@ -7,23 +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,
|
||||
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);
|
||||
|
||||
@@ -6,83 +6,83 @@ import { HtmlViewBase, htmlProperty, linkColorProperty } from './html-view-commo
|
||||
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>;
|
||||
|
||||
@@ -10,109 +10,109 @@ 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