Files
NativeScript/tns-core-modules/ui/text-view/text-view.ios.ts
Panayot Cankov 1cbb1e8d0d feat(webpack): mark the CSS type for stylable views explicitly (#5257)
We want webpack's uglification to mangle function and class names
but that's what the current implementation of the CSS in {N} relys on
to get the CSS type for each view when targeted by CSS type selectors.

The implementation is changed a little so now the CSS type can be set
directly on the prototype of each View class or for TS, through decorator.

BREAKING CHANGES:


Extending classes requires marking the derived class with @CSSType
The root classes are not marked with CSSType and classes derived from ViewBase and View
will continue to work as expected. More concrete view classes (Button, Label, etc.) are
marked with @CSSType now and store their cssType on the prototype suppressing the previous
implementation that looked up the class function name. So clien classes that derive from one of
our @CSSType decorated classes will now have to be marked with @CSSType.
2018-03-12 16:34:25 +02:00

313 lines
11 KiB
TypeScript

import { ScrollEventData } from "../scroll-view";
import { TextView as TextViewDefinition } from ".";
import {
EditableTextBase, editableProperty, hintProperty, textProperty, colorProperty, placeholderColorProperty,
borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty,
Length, _updateCharactersInRangeReplacementString, Color, layout,
CSSType
} from "../editable-text-base";
import { ios } from "../../utils/utils";
import { profile } from "../../profiling";
export * from "../editable-text-base";
class UITextViewDelegateImpl extends NSObject implements UITextViewDelegate {
public static ObjCProtocols = [UITextViewDelegate];
private _owner: WeakRef<TextView>;
public static initWithOwner(owner: WeakRef<TextView>): UITextViewDelegateImpl {
const impl = <UITextViewDelegateImpl>UITextViewDelegateImpl.new();
impl._owner = owner;
return impl;
}
public textViewShouldBeginEditing(textView: UITextView): boolean {
const owner = this._owner.get();
if (owner) {
owner.showText();
}
return true;
}
public textViewDidBeginEditing(textView: UITextView): void {
const owner = this._owner.get();
if (owner) {
owner._isEditing = true;
owner.notify({ eventName: TextView.focusEvent, object: owner });
}
}
public textViewDidEndEditing(textView: UITextView) {
const owner = this._owner.get();
if (owner) {
if (owner.updateTextTrigger === "focusLost") {
textProperty.nativeValueChange(owner, textView.text);
}
owner._isEditing = false;
owner.dismissSoftInput();
owner._refreshHintState(owner.hint, textView.text);
}
}
public textViewDidChange(textView: UITextView) {
const owner = this._owner.get();
if (owner) {
if (owner.updateTextTrigger === "textChanged") {
textProperty.nativeValueChange(owner, textView.text);
}
owner.requestLayout();
}
}
public textViewShouldChangeTextInRangeReplacementText(textView: UITextView, range: NSRange, replacementString: string): boolean {
const owner = this._owner.get();
if (owner) {
const delta = replacementString.length - range.length;
if (delta > 0) {
if (textView.text.length + delta > owner.maxLength) {
return false;
}
}
if (owner.formattedText) {
_updateCharactersInRangeReplacementString(owner.formattedText, range.location, range.length, replacementString);
}
}
return true;
}
public scrollViewDidScroll(sv: UIScrollView): void {
const owner = this._owner.get();
if (owner) {
const contentOffset = owner.nativeViewProtected.contentOffset;
owner.notify(<ScrollEventData>{
object: owner,
eventName: "scroll",
scrollX: contentOffset.x,
scrollY: contentOffset.y
});
}
}
}
@CSSType("TextView")
export class TextView extends EditableTextBase implements TextViewDefinition {
private _ios: UITextView;
private _delegate: UITextViewDelegateImpl;
private _isShowingHint: boolean;
public _isEditing: boolean;
constructor() {
super();
const textView = this.nativeViewProtected = this._ios = UITextView.new();
if (!textView.font) {
textView.font = UIFont.systemFontOfSize(12);
}
this._delegate = UITextViewDelegateImpl.initWithOwner(new WeakRef(this));
}
@profile
public onLoaded() {
super.onLoaded();
this._ios.delegate = this._delegate;
}
public onUnloaded() {
this._ios.delegate = null;
super.onUnloaded();
}
get ios(): UITextView {
return this._ios;
}
public _refreshHintState(hint: string, text: string) {
if (this.formattedText) {
return;
}
if (text !== null && text !== undefined && text !== '') {
this.showText();
} else if (!this._isEditing && hint !== null && hint !== undefined && hint !== '') {
this.showHint(hint);
} else {
this._isShowingHint = false;
this.nativeViewProtected.text = '';
}
}
private _refreshColor() {
if (this._isShowingHint) {
const placeholderColor = this.style.placeholderColor;
const color = this.style.color;
if (placeholderColor) {
this.nativeViewProtected.textColor = placeholderColor.ios;
} else if (color) {
// Use semi-transparent version of color for back-compatibility
this.nativeViewProtected.textColor = color.ios.colorWithAlphaComponent(0.22);
} else {
this.nativeViewProtected.textColor = UIColor.blackColor.colorWithAlphaComponent(0.22);
}
} else {
const color = this.style.color;
if (color) {
this.nativeViewProtected.textColor = color.ios;
this.nativeViewProtected.tintColor = color.ios;
} else {
this.nativeViewProtected.textColor = null;
this.nativeViewProtected.tintColor = null;
}
}
}
public showHint(hint: string) {
const nativeView = this.nativeViewProtected;
this._isShowingHint = true;
this._refreshColor();
const hintAsString: string = (hint === null || hint === undefined) ? '' : hint.toString();
nativeView.text = hintAsString;
}
public showText() {
this._isShowingHint = false;
this._refreshColor();
this._setNativeText();
this.requestLayout();
}
[textProperty.getDefault](): string {
return "";
}
[textProperty.setNative](value: string) {
this._refreshHintState(this.hint, value);
}
[hintProperty.getDefault](): string {
return "";
}
[hintProperty.setNative](value: string) {
this._refreshHintState(value, this.text);
}
[editableProperty.getDefault](): boolean {
return this.nativeViewProtected.editable;
}
[editableProperty.setNative](value: boolean) {
this.nativeViewProtected.editable = value;
}
[colorProperty.setNative](color: Color) {
this._refreshColor();
}
[placeholderColorProperty.setNative](value: Color) {
this._refreshColor();
}
[borderTopWidthProperty.getDefault](): Length {
return {
value: this.nativeViewProtected.textContainerInset.top,
unit: "px"
};
}
[borderTopWidthProperty.setNative](value: Length) {
let inset = this.nativeViewProtected.textContainerInset;
let top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth);
this.nativeViewProtected.textContainerInset = { top: top, left: inset.left, bottom: inset.bottom, right: inset.right };
}
[borderRightWidthProperty.getDefault](): Length {
return {
value: this.nativeViewProtected.textContainerInset.right,
unit: "px"
};
}
[borderRightWidthProperty.setNative](value: Length) {
let inset = this.nativeViewProtected.textContainerInset;
let right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth);
this.nativeViewProtected.textContainerInset = { top: inset.top, left: inset.left, bottom: inset.bottom, right: right };
}
[borderBottomWidthProperty.getDefault](): Length {
return {
value: this.nativeViewProtected.textContainerInset.bottom,
unit: "px"
};
}
[borderBottomWidthProperty.setNative](value: Length) {
let inset = this.nativeViewProtected.textContainerInset;
let bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
this.nativeViewProtected.textContainerInset = { top: inset.top, left: inset.left, bottom: bottom, right: inset.right };
}
[borderLeftWidthProperty.getDefault](): Length {
return {
value: this.nativeViewProtected.textContainerInset.left,
unit: "px"
};
}
[borderLeftWidthProperty.setNative](value: Length) {
let inset = this.nativeViewProtected.textContainerInset;
let left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
this.nativeViewProtected.textContainerInset = { top: inset.top, left: left, bottom: inset.bottom, right: inset.right };
}
[paddingTopProperty.getDefault](): Length {
return {
value: this.nativeViewProtected.textContainerInset.top,
unit: "px"
};
}
[paddingTopProperty.setNative](value: Length) {
let inset = this.nativeViewProtected.textContainerInset;
let top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth);
this.nativeViewProtected.textContainerInset = { top: top, left: inset.left, bottom: inset.bottom, right: inset.right };
}
[paddingRightProperty.getDefault](): Length {
return {
value: this.nativeViewProtected.textContainerInset.right,
unit: "px"
};
}
[paddingRightProperty.setNative](value: Length) {
let inset = this.nativeViewProtected.textContainerInset;
let right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth);
this.nativeViewProtected.textContainerInset = { top: inset.top, left: inset.left, bottom: inset.bottom, right: right };
}
[paddingBottomProperty.getDefault](): Length {
return {
value: this.nativeViewProtected.textContainerInset.bottom,
unit: "px"
};
}
[paddingBottomProperty.setNative](value: Length) {
let inset = this.nativeViewProtected.textContainerInset;
let bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
this.nativeViewProtected.textContainerInset = { top: inset.top, left: inset.left, bottom: bottom, right: inset.right };
}
[paddingLeftProperty.getDefault](): Length {
return {
value: this.nativeViewProtected.textContainerInset.left,
unit: "px"
};
}
[paddingLeftProperty.setNative](value: Length) {
let inset = this.nativeViewProtected.textContainerInset;
let left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
this.nativeViewProtected.textContainerInset = { top: inset.top, left: left, bottom: inset.bottom, right: inset.right };
}
}
TextView.prototype.recycleNativeView = "auto";