mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-15 19:26:42 +08:00
200 lines
6.8 KiB
TypeScript
200 lines
6.8 KiB
TypeScript
import { Label as LabelDefinition } from ".";
|
|
import { Background } from "../styling/background";
|
|
import {
|
|
TextBase, View, layout, backgroundInternalProperty,
|
|
borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
|
|
paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, whiteSpaceProperty,
|
|
Length, WhiteSpace
|
|
} from "../text-base";
|
|
|
|
import { ios } from "../styling/background";
|
|
|
|
export * from "../text-base";
|
|
|
|
enum FixedSize {
|
|
NONE = 0,
|
|
WIDTH = 1,
|
|
HEIGHT = 2,
|
|
BOTH = 3
|
|
}
|
|
|
|
export class Label extends TextBase implements LabelDefinition {
|
|
nativeView: TNSLabel;
|
|
private _fixedSize: FixedSize;
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this.nativeView = TNSLabel.new();
|
|
this.nativeView.userInteractionEnabled = true;
|
|
}
|
|
|
|
get ios(): TNSLabel {
|
|
return this.nativeView;
|
|
}
|
|
|
|
get textWrap(): boolean {
|
|
return this.style.whiteSpace === "normal";
|
|
}
|
|
set textWrap(value: boolean) {
|
|
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 {
|
|
let nativeView = this.nativeView;
|
|
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);
|
|
|
|
const 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);
|
|
}
|
|
}
|
|
|
|
[whiteSpaceProperty.setNative](value: WhiteSpace) {
|
|
const nativeView = this.nativeView;
|
|
switch (value) {
|
|
case "normal":
|
|
nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
|
|
nativeView.numberOfLines = 0;
|
|
break;
|
|
case "nowrap":
|
|
case "initial":
|
|
nativeView.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
|
|
nativeView.numberOfLines = 1;
|
|
break;
|
|
}
|
|
}
|
|
|
|
[backgroundInternalProperty.getDefault](): any /* CGColor */ {
|
|
return this.nativeView.layer.backgroundColor;
|
|
}
|
|
[backgroundInternalProperty.setNative](value: Background) {
|
|
if (value instanceof Background) {
|
|
const uiColor = <UIColor>ios.createBackgroundUIColor(this, true);
|
|
value = uiColor ? uiColor.CGColor : null;
|
|
}
|
|
|
|
this._setNativeClipToBounds();
|
|
this.nativeView.layer.backgroundColor = value;
|
|
}
|
|
|
|
[borderTopWidthProperty.setNative](value: Length) {
|
|
const nativeView = this.nativeView;
|
|
const border = nativeView.borderThickness;
|
|
nativeView.borderThickness = {
|
|
top: layout.toDeviceIndependentPixels(this.effectiveBorderTopWidth),
|
|
right: border.right,
|
|
bottom: border.bottom,
|
|
left: border.left
|
|
};
|
|
}
|
|
|
|
[borderRightWidthProperty.setNative](value: Length) {
|
|
const nativeView = this.nativeView;
|
|
const border = nativeView.borderThickness;
|
|
nativeView.borderThickness = {
|
|
top: border.top,
|
|
right: layout.toDeviceIndependentPixels(this.effectiveBorderRightWidth),
|
|
bottom: border.bottom,
|
|
left: border.left
|
|
};
|
|
}
|
|
|
|
[borderBottomWidthProperty.setNative](value: Length) {
|
|
const nativeView = this.nativeView;
|
|
const border = nativeView.borderThickness;
|
|
nativeView.borderThickness = {
|
|
top: border.top,
|
|
right: border.right,
|
|
bottom: layout.toDeviceIndependentPixels(this.effectiveBorderBottomWidth),
|
|
left: border.left
|
|
};
|
|
}
|
|
|
|
[borderLeftWidthProperty.setNative](value: Length) {
|
|
const nativeView = this.nativeView;
|
|
const border = nativeView.borderThickness;
|
|
nativeView.borderThickness = {
|
|
top: border.top,
|
|
right: border.right,
|
|
bottom: border.bottom,
|
|
left: layout.toDeviceIndependentPixels(this.effectiveBorderLeftWidth)
|
|
};
|
|
}
|
|
|
|
[paddingTopProperty.setNative](value: Length) {
|
|
const nativeView = this.nativeView;
|
|
const padding = nativeView.padding;
|
|
nativeView.padding = {
|
|
top: layout.toDeviceIndependentPixels(this.effectivePaddingTop),
|
|
right: padding.right,
|
|
bottom: padding.bottom,
|
|
left: padding.left
|
|
};
|
|
}
|
|
|
|
[paddingRightProperty.setNative](value: Length) {
|
|
const nativeView = this.nativeView;
|
|
const padding = nativeView.padding;
|
|
nativeView.padding = {
|
|
top: padding.top,
|
|
right: layout.toDeviceIndependentPixels(this.effectivePaddingRight),
|
|
bottom: padding.bottom,
|
|
left: padding.left
|
|
};
|
|
}
|
|
|
|
[paddingBottomProperty.setNative](value: Length) {
|
|
const nativeView = this.nativeView;
|
|
const padding = nativeView.padding;
|
|
nativeView.padding = {
|
|
top: padding.top,
|
|
right: padding.right,
|
|
bottom: layout.toDeviceIndependentPixels(this.effectivePaddingBottom),
|
|
left: padding.left
|
|
};
|
|
}
|
|
|
|
[paddingLeftProperty.setNative](value: Length) {
|
|
const nativeView = this.nativeView;
|
|
const padding = nativeView.padding;
|
|
nativeView.padding = {
|
|
top: padding.top,
|
|
right: padding.right,
|
|
bottom: padding.bottom,
|
|
left: layout.toDeviceIndependentPixels(this.effectivePaddingLeft)
|
|
};
|
|
}
|
|
}
|
|
|
|
// Label.prototype.recycleNativeView = true;
|