javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

textTransform, whiteSpace & textAlignment defaultValue is now “initia” (#3948)

Browse Source 
removed enum namespaces
add valueConverter to clipToBounds
This commit is contained in:
Hristo Hristov
2017-04-06 09:50:37 +03:00
committed by GitHub
parent 2c74f93a44
commit f350f7191d
31 changed files with 368 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/app/ui-tests-app/css/text-decoration.ts
View File

@@ -1,10 +1,10 @@
import { EventData, TextBase, TextDecoration } from "tns-core-modules/ui/text-base";
const possibleValues = [
TextDecoration.NONE,
TextDecoration.UNDERLINE,
TextDecoration.LINE_THROUGH,
TextDecoration.UNDERLINE_LINE_THROUGH
"none",
"underline",
"line-through",
"underline line-through"
];
export function butonTap(args: EventData) {
@@ -13,19 +13,19 @@ export function butonTap(args: EventData) {
let btn = <TextBase>page.getViewById("Button");
let textField = <TextBase>page.getViewById("TextField");
let textView = <TextBase>page.getViewById("TextView");
let currentIndex = possibleValues.indexOf(lbl.textDecoration);
let newIndex = (currentIndex + 1) % possibleValues.length;
let newValue = <TextDecoration>possibleValues[newIndex];
lbl.textDecoration = newValue;
btn.textDecoration = newValue;
textField.textDecoration = newValue;
textView.textDecoration = newValue;
if(lbl.text === "Change text") {
if (lbl.text === "Change text") {
lbl.text = btn.text = textField.text = textView.text = "Text changed";
} else {
lbl.text = btn.text = textField.text = textView.text = "Change text";
}
}
}

18
tests/app/ui/layouts/dock-layout-tests.ts
View File

@@ -36,7 +36,7 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
var testBtn = new button.Button();
TKUnit.assertThrows(() => {
dockModule.DockLayout.setDock(testBtn, "invalid");
dockModule.DockLayout.setDock(testBtn, <"left">"invalid");
});
}
@@ -54,7 +54,7 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
public test_dock_right() {
var testBtn = new helper.MyButton();
testBtn.width = { value: 20, unit: "px" };
dockModule.DockLayout.setDock(testBtn, enums.Dock.right);
dockModule.DockLayout.setDock(testBtn, "right");
this.testView.stretchLastChild = false;
this.testView.addChild(testBtn);
@@ -66,7 +66,7 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
public test_dock_top() {
var testBtn = new helper.MyButton();
testBtn.height = { value: 20, unit: "px" };
dockModule.DockLayout.setDock(testBtn, enums.Dock.top);
dockModule.DockLayout.setDock(testBtn, "top");
this.testView.stretchLastChild = false;
this.testView.addChild(testBtn);
@@ -78,7 +78,7 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
public test_dock_button() {
var testBtn = new helper.MyButton();
testBtn.height = { value: 20, unit: "px" };
dockModule.DockLayout.setDock(testBtn, enums.Dock.bottom);
dockModule.DockLayout.setDock(testBtn, "bottom");
this.testView.stretchLastChild = false;
this.testView.addChild(testBtn);
@@ -103,21 +103,21 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
var testBtnTop = new helper.MyButton();
testBtnTop.height = { value: 20, unit: "px" };
dockModule.DockLayout.setDock(testBtnTop, enums.Dock.top);
dockModule.DockLayout.setDock(testBtnTop, "top");
this.testView.addChild(testBtnTop);
var testBtnRight = new helper.MyButton();
testBtnRight.width = { value: 20, unit: "px" }
dockModule.DockLayout.setDock(testBtnRight, enums.Dock.right);
dockModule.DockLayout.setDock(testBtnRight, "right");
this.testView.addChild(testBtnRight);
var testBtnBottom = new helper.MyButton();
testBtnBottom.height = { value: 20, unit: "px" }
dockModule.DockLayout.setDock(testBtnBottom, enums.Dock.bottom);
dockModule.DockLayout.setDock(testBtnBottom, "bottom");
this.testView.addChild(testBtnBottom);
var testBtnFill = new helper.MyButton();
dockModule.DockLayout.setDock(testBtnFill, enums.Dock.bottom);
dockModule.DockLayout.setDock(testBtnFill, "bottom");
this.testView.addChild(testBtnFill);
this.waitUntilTestElementLayoutIsValid();
@@ -159,7 +159,7 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
// >> dock-layout-setdocl
var btnDockedToRight = new button.Button();
dockModule.DockLayout.setDock(btnDockedToRight, enums.Dock.right);
dockModule.DockLayout.setDock(btnDockedToRight, "right");
dockLayout.addChild(btnDockedToRight);
// << dock-layout-setdocl
}

57
tests/app/ui/layouts/flexbox-layout-tests.ts
View File

@@ -1,15 +1,54 @@
// >> flexbox-layout-require
import {
FlexboxLayout,
FlexDirection,
FlexWrap,
JustifyContent,
AlignItems,
AlignContent,
AlignSelf
} from "tns-core-modules/ui/layouts/flexbox-layout";
import { FlexboxLayout } from "tns-core-modules/ui/layouts/flexbox-layout";
// << flexbox-layout-require
export namespace FlexDirection {
export const ROW: "row" = "row";
export const ROW_REVERSE: "row-reverse" = "row-reverse";
export const COLUMN: "column" = "column";
export const COLUMN_REVERSE: "column-reverse" = "column-reverse";
}
export namespace FlexWrap {
export const NOWRAP: "nowrap" = "nowrap";
export const WRAP: "wrap" = "wrap";
export const WRAP_REVERSE: "wrap-reverse" = "wrap-reverse";
}
export namespace JustifyContent {
export const FLEX_START: "flex-start" = "flex-start";
export const FLEX_END: "flex-end" = "flex-end";
export const CENTER: "center" = "center";
export const SPACE_BETWEEN: "space-between" = "space-between";
export const SPACE_AROUND: "space-around" = "space-around";
}
export namespace AlignItems {
export const FLEX_START: "flex-start" = "flex-start";
export const FLEX_END: "flex-end" = "flex-end";
export const CENTER: "center" = "center";
export const BASELINE: "baseline" = "baseline";
export const STRETCH: "stretch" = "stretch";
}
export namespace AlignContent {
export const FLEX_START: "flex-start" = "flex-start";
export const FLEX_END: "flex-end" = "flex-end";
export const CENTER: "center" = "center";
export const SPACE_BETWEEN: "space-between" = "space-between";
export const SPACE_AROUND: "space-around" = "space-around";
export const STRETCH: "stretch" = "stretch";
}
export namespace AlignSelf {
export const AUTO: "auto" = "auto";
export const FLEX_START: "flex-start" = "flex-start";
export const FLEX_END: "flex-end" = "flex-end";
export const CENTER: "center" = "center";
export const BASELINE: "baseline" = "baseline";
export const STRETCH: "stretch" = "stretch";
}
import {View, unsetValue, Length, PercentLength} from "tns-core-modules/ui/core/view";
import {Label} from "tns-core-modules/ui/label";
import * as TKUnit from "../../TKUnit";

25
tests/app/ui/scroll-view/scroll-view-tests.ts
View File

@@ -1,10 +1,9 @@
import * as TKUnit from "../../TKUnit";
import * as app from "tns-core-modules/application";
import * as button from "tns-core-modules/ui/button";
import * as enums from "tns-core-modules/ui/enums";
import * as testModule from "../../ui-test";
import * as layoutHelper from "../layouts/layout-helper";
import {Page} from "tns-core-modules/ui/page";
import { Page } from "tns-core-modules/ui/page";
import * as frame from "tns-core-modules/ui/frame";
// >> article-require-scrollview-module
@@ -15,7 +14,7 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
public create(): scrollViewModule.ScrollView {
let scrollView = new scrollViewModule.ScrollView();
scrollView.orientation = enums.Orientation.vertical;
scrollView.orientation = "vertical";
scrollView.width = { value: 200, unit: "px" };
scrollView.height = { value: 300, unit: "px" };
@@ -38,13 +37,13 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
public test_default_TNS_values() {
let scroll = new scrollViewModule.ScrollView();
TKUnit.assertEqual(scroll.orientation, enums.Orientation.vertical, "Default this.testView.orientation");
TKUnit.assertEqual(scroll.orientation, "vertical", "Default this.testView.orientation");
TKUnit.assertEqual(scroll.verticalOffset, 0, "Default this.testView.verticalOffset");
TKUnit.assertEqual(scroll.horizontalOffset, 0, "Default this.testView.horizontalOffset");
}
public test_vertical_oriantation_creates_correct_native_view() {
this.testView.orientation = enums.Orientation.vertical;
this.testView.orientation = "vertical";
if (app.android) {
TKUnit.assert(this.testView.android instanceof org.nativescript.widgets.VerticalScrollView, "android property should be instanceof org.nativescript.widgets.VerticalScrollView");
@@ -55,7 +54,7 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
}
public test_horizontal_oriantation_creates_correct_native_view() {
this.testView.orientation = enums.Orientation.horizontal;
this.testView.orientation = "horizontal";
if (app.android) {
TKUnit.assert(this.testView.android instanceof org.nativescript.widgets.HorizontalScrollView, "android property should be instanceof org.nativescript.widgets.HorizontalScrollView");
@@ -83,7 +82,7 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
}
public test_scrollableWidth_horizontal_orientation_when_content_is_small() {
this.testView.orientation = enums.Orientation.horizontal;
this.testView.orientation = "horizontal";
this.testView.content.width = { value: 100, unit: "px" };
this.testView.content.height = { value: 100, unit: "px" };
this.waitUntilTestElementLayoutIsValid();
@@ -93,7 +92,7 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
}
public test_scrollableWidth_horizontal_orientation_when_content_is_big() {
this.testView.orientation = enums.Orientation.horizontal;
this.testView.orientation = "horizontal";
this.testView.content.height = { value: 100, unit: "px" };
this.waitUntilTestElementLayoutIsValid();
@@ -125,7 +124,7 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
}
public test_scrollToHorizontalOffset_no_animation() {
this.testView.orientation = enums.Orientation.horizontal;
this.testView.orientation = "horizontal";
this.waitUntilTestElementLayoutIsValid();
TKUnit.assertEqual(this.testView.horizontalOffset, 0, "this.testView.horizontalOffset");
@@ -134,7 +133,7 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
}
public test_scrollToHorizontalOffset_with_animation() {
this.testView.orientation = enums.Orientation.horizontal;
this.testView.orientation = "horizontal";
this.waitUntilTestElementLayoutIsValid();
TKUnit.assertEqual(this.testView.horizontalOffset, 0, "this.testView.horizontalOffset");
@@ -173,7 +172,7 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
}
public test_scrollView_persistsState_horizontal() {
this.testView.orientation = enums.Orientation.horizontal;
this.testView.orientation = "horizontal";
this.waitUntilTestElementLayoutIsValid();
this.testView.scrollToHorizontalOffset(layoutHelper.dp(100), false);
@@ -211,7 +210,7 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
}
public test_scrollView_horizontal_raised_scroll_event() {
this.testView.orientation = enums.Orientation.horizontal;
this.testView.orientation = "horizontal";
var scrollX: number;
this.testView.on(scrollViewModule.ScrollView.scrollEvent, (args: scrollViewModule.ScrollEventData) => {
@@ -240,7 +239,7 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
}
public test_scrollView_horizontal_raised_scroll_event_after_loaded() {
this.testView.orientation = enums.Orientation.horizontal;
this.testView.orientation = "horizontal";
this.waitUntilTestElementLayoutIsValid();
var scrollX: number;

60
tests/app/ui/styling/style-properties-tests.ts
View File

@@ -610,21 +610,7 @@ function test_native_font(style: "normal" | "italic", weight: "100" | "200" | "3
//TODO: If needed add tests for other platforms
}
export const test_setting_button_whiteSpace_normal_sets_native = function () {
const testView = new Button();
testView.style.whiteSpace = "nowrap";
helper.buildUIAndRunTest(testView, function (views: Array<View>) {
if (isAndroid) {
TKUnit.assertEqual((<android.widget.Button>testView.android).getEllipsize(), android.text.TextUtils.TruncateAt.END);
} else if (isIOS) {
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.ByTruncatingMiddle);
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.numberOfLines, 1);
}
});
};
export const test_setting_label_whiteSpace_normal_sets_native = function () {
export function test_setting_label_whiteSpace_nowrap_sets_native() {
const testView = new Label();
testView.style.whiteSpace = "nowrap";
@@ -638,21 +624,7 @@ export const test_setting_label_whiteSpace_normal_sets_native = function () {
});
};
export const test_setting_button_whiteSpace_nowrap_sets_native = function () {
const testView = new Button();
testView.style.whiteSpace = "normal";
helper.buildUIAndRunTest(testView, function (views: Array<View>) {
if (isAndroid) {
TKUnit.assertNull((<android.widget.Button>testView.android).getEllipsize(), null);
} else if (isIOS) {
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.ByWordWrapping);
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.numberOfLines, 0);
}
});
};
export const test_setting_label_whiteSpace_nowrap_sets_native = function () {
export function test_setting_label_whiteSpace_normal_sets_native() {
const testView = new Label();
testView.style.whiteSpace = "normal";
@@ -666,6 +638,34 @@ export const test_setting_label_whiteSpace_nowrap_sets_native = function () {
});
};
export function test_setting_button_whiteSpace_nowrap_sets_native() {
const testView = new Button();
testView.style.whiteSpace = "nowrap";
helper.buildUIAndRunTest(testView, function (views: Array<View>) {
if (isAndroid) {
TKUnit.assertEqual((<android.widget.Button>testView.android).getEllipsize(), android.text.TextUtils.TruncateAt.END);
} else if (isIOS) {
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.ByTruncatingMiddle);
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.numberOfLines, 1);
}
});
};
export function test_setting_button_whiteSpace_normal_sets_native() {
const testView = new Button();
testView.style.whiteSpace = "normal";
helper.buildUIAndRunTest(testView, function (views: Array<View>) {
if (isAndroid) {
TKUnit.assertNull((<android.widget.Button>testView.android).getEllipsize(), null);
} else if (isIOS) {
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.ByWordWrapping);
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.numberOfLines, 0);
}
});
};
const initial = "text Text";
const capitalized = "Text Text";
const upper = "TEXT TEXT";

13
tests/app/ui/text-field/text-field-tests.ts
View File

@@ -4,7 +4,6 @@ import * as viewModule from "tns-core-modules/ui/core/view";
import * as pagesModule from "tns-core-modules/ui/page";
import * as textFieldTestsNative from "./text-field-tests-native";
import * as colorModule from "tns-core-modules/color";
import * as enums from "tns-core-modules/ui/enums";
import * as platform from "tns-core-modules/platform";
import * as formattedStringModule from "tns-core-modules/text/formatted-string";
import * as spanModule from "tns-core-modules/text/span";
@@ -542,15 +541,15 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt
let view = new textFieldModule.TextField();
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
TKUnit.assertEqual(view.text, "", "Text");
TKUnit.assertNull(view.style.textTransform, "TextTransform default value");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.none, "TextDecoration default value");
TKUnit.assertEqual(view.style.textTransform, "initial", "TextTransform default value");
TKUnit.assertEqual(view.style.textDecoration, "none", "TextDecoration default value");
TKUnit.assertTrue(view.style.letterSpacing === 0, "LetterSpacing default value");
view.text = "NormalText";
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
TKUnit.assertEqual(view.style.textTransform, "uppercase", "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, "underline", "TextDecoration");
TKUnit.assertEqual(view.style.letterSpacing, 1, "LetterSpacing");
});
}
@@ -562,8 +561,8 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
view.formattedText = formattedString;
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
TKUnit.assertEqual(view.style.textTransform, "uppercase", "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, "underline", "TextDecoration");
TKUnit.assertEqual(view.style.letterSpacing, 1, "LetterSpacing");
});
}

6
tns-core-modules/ui/button/button-common.ts
View File

@@ -1,5 +1,5 @@
import { Button as ButtonDefinition } from ".";
import { TextBase, WhiteSpace } from "../text-base";
import { TextBase } from "../text-base";
export * from "../text-base";
@@ -7,10 +7,10 @@ export abstract class ButtonBase extends TextBase implements ButtonDefinition {
public static tapEvent = "tap";
get textWrap(): boolean {
return this.style.whiteSpace === WhiteSpace.NORMAL;
return this.style.whiteSpace === "normal";
}
set textWrap(value: boolean) {
this.style.whiteSpace = value ? WhiteSpace.NORMAL : WhiteSpace.NO_WRAP;
this.style.whiteSpace = value ? "normal" : "nowrap";
}
}

8
tns-core-modules/ui/button/button.android.ts
View File

@@ -1,7 +1,7 @@
import {
ButtonBase, PseudoClassHandler,
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty,
Length, zIndexProperty
Length, zIndexProperty, textAlignmentProperty, TextAlignment
} from "./button-common";
import { TouchGestureEventData, GestureTypes, TouchAction } from "../gestures";
@@ -117,4 +117,10 @@ export class Button extends ButtonBase {
(<any>this.nativeView).setStateListAnimator(null);
}
}
[textAlignmentProperty.setNative](value: TextAlignment) {
// Button initial value is center.
const newValue = value === "initial" ? "center" : value;
super[textAlignmentProperty.setNative](newValue);
}
}

67
tns-core-modules/ui/button/button.ios.ts
View File

@@ -1,8 +1,9 @@
import { ControlStateChangeListener } from "../core/control-state-change";
import {
ButtonBase, PseudoClassHandler, whiteSpaceProperty,
borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, textAlignmentProperty,
paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, Length, WhiteSpace, TextAlignment, layout
ButtonBase, PseudoClassHandler, Length, layout,
borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty,
whiteSpaceProperty, WhiteSpace, textAlignmentProperty, TextAlignment
} from "./button-common";
export * from "./button-common";
@@ -46,25 +47,6 @@ export class Button extends ButtonBase {
}
}
[whiteSpaceProperty.getDefault](): WhiteSpace {
return WhiteSpace.NO_WRAP;
}
[whiteSpaceProperty.setNative](value: WhiteSpace) {
const nativeView = this.nativeView.titleLabel;
switch (value) {
case WhiteSpace.NORMAL:
nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
nativeView.numberOfLines = 0;
break;
case WhiteSpace.NO_WRAP:
nativeView.lineBreakMode = NSLineBreakMode.ByTruncatingMiddle;
nativeView.numberOfLines = 1;
break;
default:
throw new Error(`Invalid whitespace value: ${value}. Valid values are: "${WhiteSpace.NORMAL}", "${WhiteSpace.NO_WRAP}".`);
}
}
[borderTopWidthProperty.getDefault](): Length {
return {
value: this.nativeView.contentEdgeInsets.top,
@@ -161,23 +143,34 @@ export class Button extends ButtonBase {
this.nativeView.contentEdgeInsets = { top: inset.top, left: left, bottom: inset.bottom, right: inset.right };
}
[textAlignmentProperty.getDefault](): TextAlignment {
return Button.nativeToJsTextAlignment[this.nativeView.contentHorizontalAlignment];
}
[textAlignmentProperty.setNative](value: TextAlignment) {
this.nativeView.contentHorizontalAlignment = Button.jsToNativeTextAlignment[value];
switch (value) {
case "left":
this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left;
break;
case "initial":
case "center":
this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Center;
break;
case "right":
this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Right;
break;
}
}
private static nativeToJsTextAlignment: { [key: number]: TextAlignment } = {
[UIControlContentHorizontalAlignment.Left]: "left",
[UIControlContentHorizontalAlignment.Center]: "center",
[UIControlContentHorizontalAlignment.Right]: "right",
[UIControlContentHorizontalAlignment.Fill]: "center"
}
private static jsToNativeTextAlignment: { [key in TextAlignment]: UIControlContentHorizontalAlignment } = {
"left": UIControlContentHorizontalAlignment.Left,
"center": UIControlContentHorizontalAlignment.Center,
"right": UIControlContentHorizontalAlignment.Right
[whiteSpaceProperty.setNative](value: WhiteSpace) {
const nativeView = this.nativeView.titleLabel;
switch (value) {
case "normal":
nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
nativeView.numberOfLines = 0;
break;
case "nowrap":
case "initial":
nativeView.lineBreakMode = NSLineBreakMode.ByTruncatingMiddle;
nativeView.numberOfLines = 1;
break;
}
}
}
@@ -200,4 +193,4 @@ class TapHandlerImpl extends NSObject {
public static ObjCExposedMethods = {
"tap": { returns: interop.types.void, params: [interop.types.id] }
};
}
}

1
tns-core-modules/ui/core/view/view.ios.ts
View File

@@ -22,6 +22,7 @@ const PFLAG_MEASURED_DIMENSION_SET = 1 << 1;
const PFLAG_LAYOUT_REQUIRED = 1 << 2;
export class View extends ViewCommon {
nativeView: UIView;
private _hasTransfrom = false;
private _privateFlags: number = PFLAG_LAYOUT_REQUIRED | PFLAG_FORCE_LAYOUT;
private _cachedFrame: CGRect;

28
tns-core-modules/ui/editable-text-base/editable-text-base-common.ts
View File

@@ -1,14 +1,14 @@
import { EditableTextBase as EditableTextBaseDefinition } from ".";
import { TextBase, Property, CssProperty, Style, Color, booleanConverter } from "../text-base";
import { EditableTextBase as EditableTextBaseDefinition, KeyboardType, ReturnKeyType, UpdateTextTrigger, AutocapitalizationType } from ".";
import { TextBase, Property, CssProperty, Style, Color, booleanConverter, makeValidator, makeParser } from "../text-base";
export * from "../text-base";
export abstract class EditableTextBase extends TextBase implements EditableTextBaseDefinition {
public keyboardType: "datetime" | "phone" | "number" | "url" | "email";
public returnKeyType: "done" | "next" | "go" | "search" | "send";
public updateTextTrigger: "focusLost" | "textChanged";
public autocapitalizationType: "none" | "words" | "sentences" | "allCharacters";
public keyboardType: KeyboardType;
public returnKeyType: ReturnKeyType;
public updateTextTrigger: UpdateTextTrigger;
public autocapitalizationType: AutocapitalizationType;
public editable: boolean;
public autocorrect: boolean;
public hint: string;
@@ -22,23 +22,29 @@ export abstract class EditableTextBase extends TextBase implements EditableTextB
export const placeholderColorProperty = new CssProperty<Style, Color>({ name: "placeholderColor", cssName: "placeholder-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
placeholderColorProperty.register(Style);
export const keyboardTypeProperty = new Property<EditableTextBase, "datetime" | "phone" | "number" | "url" | "email">({ name: "keyboardType" });
const keyboardTypeConverter = makeParser<KeyboardType>(makeValidator<KeyboardType>("datetime", "phone", "number", "url", "email"));
export const keyboardTypeProperty = new Property<EditableTextBase, KeyboardType>({ name: "keyboardType", valueConverter: keyboardTypeConverter });
keyboardTypeProperty.register(EditableTextBase);
export const returnKeyTypeProperty = new Property<EditableTextBase, "done" | "next" | "go" | "search" | "send">({ name: "returnKeyType" });
const returnKeyTypeConverter = makeParser<ReturnKeyType>(makeValidator<ReturnKeyType>("done", "next", "go", "search", "send"));
export const returnKeyTypeProperty = new Property<EditableTextBase, ReturnKeyType>({ name: "returnKeyType", valueConverter: returnKeyTypeConverter });
returnKeyTypeProperty.register(EditableTextBase);
export const editableProperty = new Property<EditableTextBase, boolean>({ name: "editable", defaultValue: true, valueConverter: booleanConverter });
editableProperty.register(EditableTextBase);
export const updateTextTriggerProperty = new Property<EditableTextBase, "focusLost" | "textChanged">({ name: "updateTextTrigger", defaultValue: "textChanged" });
export const updateTextTriggerProperty = new Property<EditableTextBase, UpdateTextTrigger>({ name: "updateTextTrigger", defaultValue: "textChanged" });
updateTextTriggerProperty.register(EditableTextBase);
export const autocapitalizationTypeProperty = new Property<EditableTextBase, "none" | "words" | "sentences" | "allCharacters">({ name: "autocapitalizationType", defaultValue: "sentences" });
const autocapitalizationTypeConverter = makeParser<AutocapitalizationType>(makeValidator<AutocapitalizationType>("none", "words", "sentences", "allCharacters"));
export const autocapitalizationTypeProperty = new Property<EditableTextBase, AutocapitalizationType>({ name: "autocapitalizationType", defaultValue: "sentences", valueConverter: autocapitalizationTypeConverter });
autocapitalizationTypeProperty.register(EditableTextBase);
export const autocorrectProperty = new Property<EditableTextBase, boolean>({ name: "autocorrect", valueConverter: booleanConverter });
autocorrectProperty.register(EditableTextBase);
export const hintProperty = new Property<EditableTextBase, string>({ name: "hint", defaultValue: "" });
hintProperty.register(EditableTextBase);
hintProperty.register(EditableTextBase);

40
tns-core-modules/ui/editable-text-base/editable-text-base.d.ts vendored
View File

@@ -1,38 +1,28 @@
import { TextBase, Property, CssProperty, Style, Color, FormattedString } from "../text-base";
export const keyboardTypeProperty: Property<EditableTextBase, string>;
export const returnKeyTypeProperty: Property<EditableTextBase, string>;
export const editableProperty: Property<EditableTextBase, boolean>;
export const updateTextTriggerProperty: Property<EditableTextBase, string>;
export const autocapitalizationTypeProperty: Property<EditableTextBase, string>;
export const autocorrectProperty: Property<EditableTextBase, boolean>;
export const hintProperty: Property<EditableTextBase, string>;
export const placeholderColorProperty: CssProperty<Style, Color>;
/**
* Represents the base class for all editable text views.
*/
export class EditableTextBase extends TextBase {
/**
* Gets or sets the soft keyboard type. Possible values are contained in the [KeyboardType enumeration](../enums/KeyboardType/README.md).
* Gets or sets the soft keyboard type.
*/
keyboardType: "datetime" | "phone" | "number" | "url" | "email";
keyboardType: KeyboardType;
/**
* Gets or sets the soft keyboard return key flavor. Possible values are contained in the [ReturnKeyType enumeration](../enums/ReturnKeyType/README.md).
* Gets or sets the soft keyboard return key flavor.
*/
returnKeyType: "done" | "next" | "go" | "search" | "send";
returnKeyType: ReturnKeyType;
/**
* Gets or sets a value indicating when the text property will be updated.
* Possible values are contained in the [UpdateTextTrigger enumeration](../enums/UpdateTextTrigger/README.md).
*/
updateTextTrigger: "focusLost" | "textChanged";
updateTextTrigger: UpdateTextTrigger;
/**
* Gets or sets the autocapitalization type. Possible values are contained in the [AutocapitalizationType enumeration](../enums/AutocapitalizationType/README.md).
* Gets or sets the autocapitalization type.
*/
autocapitalizationType: "none" | "words" | "sentences" | "allCharacters";
autocapitalizationType: AutocapitalizationType;
/**
* Gets or sets whether the instance is editable.
@@ -55,8 +45,22 @@ export class EditableTextBase extends TextBase {
dismissSoftInput(): void;
}
export type KeyboardType = "datetime" | "phone" | "number" | "url" | "email";
export type ReturnKeyType = "done" | "next" | "go" | "search" | "send";
export type UpdateTextTrigger = "focusLost" | "textChanged";
export type AutocapitalizationType = "none" | "words" | "sentences" | "allCharacters";
export const keyboardTypeProperty: Property<EditableTextBase, KeyboardType>;
export const returnKeyTypeProperty: Property<EditableTextBase, ReturnKeyType>;
export const editableProperty: Property<EditableTextBase, boolean>;
export const updateTextTriggerProperty: Property<EditableTextBase, UpdateTextTrigger>;
export const autocapitalizationTypeProperty: Property<EditableTextBase, AutocapitalizationType>;
export const autocorrectProperty: Property<EditableTextBase, boolean>;
export const hintProperty: Property<EditableTextBase, string>;
export const placeholderColorProperty: CssProperty<Style, Color>;
//@private
export function _updateCharactersInRangeReplacementString(formattedText: FormattedString, rangeLocation: number, rangeLength: number, replacementString: string): void;
//@endprivate
export * from "../text-base";
export * from "../text-base";

8
tns-core-modules/ui/image/image-common.ts
View File

@@ -1,4 +1,4 @@
import { Image as ImageDefinition } from ".";
import { Image as ImageDefinition, Stretch } from ".";
import { View, Property, InheritedCssProperty, Style, Color, isIOS, booleanConverter } from "../core/view";
import { ImageAsset } from "../../image-asset";
import { ImageSource, fromAsset, fromNativeSource, fromUrl } from "../../image-source";
@@ -11,7 +11,7 @@ export abstract class ImageBase extends View implements ImageDefinition {
public imageSource: ImageSource;
public src: string | ImageSource;
public isLoading: boolean;
public stretch: "none" | "aspectFill" | "aspectFit" | "fill";
public stretch: Stretch;
public loadMode: "sync" | "async";
get tintColor(): Color {
@@ -117,8 +117,8 @@ loadModeProperty.register(ImageBase);
export const isLoadingProperty = new Property<ImageBase, boolean>({ name: "isLoading", defaultValue: false, valueConverter: booleanConverter });
isLoadingProperty.register(ImageBase);
export const stretchProperty = new Property<ImageBase, "none" | "aspectFill" | "aspectFit" | "fill">({ name: "stretch", defaultValue: "aspectFit", affectsLayout: isIOS });
export const stretchProperty = new Property<ImageBase, Stretch>({ name: "stretch", defaultValue: "aspectFit", affectsLayout: isIOS });
stretchProperty.register(ImageBase);
export const tintColorProperty = new InheritedCssProperty<Style, Color>({ name: "tintColor", cssName: "tint-color", equalityComparer: Color.equals, valueConverter: (value) => new Color(value) });
tintColorProperty.register(Style);
tintColorProperty.register(Style);

8
tns-core-modules/ui/image/image.d.ts vendored
View File

@@ -36,7 +36,7 @@ export class Image extends View {
/**
* Gets or sets the image stretch mode.
*/
stretch: "none" | "aspectFill" | "aspectFit" | "fill";
stretch: Stretch;
/**
* Gets or sets the loading strategy for images on the local file system:
@@ -52,9 +52,11 @@ export class Image extends View {
tintColor: Color;
}
export type Stretch = "none" | "aspectFill" | "aspectFit" | "fill";
export const imageSourceProperty: Property<Image, ImageSource>;
export const srcProperty: Property<Image, any>;
export const isLoadingProperty: Property<Image, string>;
export const loadMode: Property<Image, "sync" | "async">;
export const stretchProperty: Property<Image, "none" | "aspectFill" | "aspectFit" | "fill">;
export const tintColorProperty: InheritedCssProperty<Style, Color>;
export const stretchProperty: Property<Image, Stretch>;
export const tintColorProperty: InheritedCssProperty<Style, Color>;

17
tns-core-modules/ui/label/label.android.ts
View File

@@ -1,5 +1,5 @@
import { Label as LabelDefinition } from ".";
import { TextBase, WhiteSpace } from "../text-base";
import { TextBase, WhiteSpace, whiteSpaceProperty } from "../text-base";
export * from "../text-base";
@@ -7,17 +7,14 @@ export class Label extends TextBase implements LabelDefinition {
nativeView: android.widget.TextView;
get textWrap(): boolean {
return this.style.whiteSpace === WhiteSpace.NORMAL;
return this.style.whiteSpace === "normal";
}
set textWrap(value: boolean) {
this.style.whiteSpace = value ? WhiteSpace.NORMAL : WhiteSpace.NO_WRAP;
this.style.whiteSpace = value ? "normal" : "nowrap";
}
public createNativeView() {
const textView = new android.widget.TextView(this._context);
textView.setSingleLine(true);
textView.setEllipsize(android.text.TextUtils.TruncateAt.END);
return textView;
return new android.widget.TextView(this._context);
}
public initNativeView(): void {
@@ -26,6 +23,12 @@ export class Label extends TextBase implements LabelDefinition {
textView.setSingleLine(true);
textView.setEllipsize(android.text.TextUtils.TruncateAt.END);
}
[whiteSpaceProperty.setNative](value: WhiteSpace) {
// Label initial value is no-wrap. set in initNativeView
const newValue = value === "initial" ? "nowrap" : value;
super[whiteSpaceProperty.setNative](newValue);
}
}
// Label.prototype.recycleNativeView = true;

81
tns-core-modules/ui/label/label.ios.ts
View File

@@ -18,13 +18,8 @@ enum FixedSize {
BOTH = 3
}
const zeroLength: Length = {
value: 0,
unit: "px"
};
export class Label extends TextBase implements LabelDefinition {
public nativeView: TNSLabel;
nativeView: TNSLabel;
private _fixedSize: FixedSize;
constructor() {
@@ -39,14 +34,10 @@ export class Label extends TextBase implements LabelDefinition {
}
get textWrap(): boolean {
return this.style.whiteSpace === WhiteSpace.NORMAL;
return this.style.whiteSpace === "normal";
}
set textWrap(value: boolean) {
this.style.whiteSpace = value ? WhiteSpace.NORMAL : WhiteSpace.NO_WRAP;
}
public onLoaded() {
super.onLoaded();
this.style.whiteSpace = value ? "normal" : "nowrap";
}
_requestLayoutOnTextChanged(): void {
@@ -89,22 +80,18 @@ export class Label extends TextBase implements LabelDefinition {
}
}
[whiteSpaceProperty.getDefault](): WhiteSpace {
return WhiteSpace.NO_WRAP;
}
[whiteSpaceProperty.setNative](value: WhiteSpace) {
const nativeView = this.nativeView;
switch (value) {
case WhiteSpace.NORMAL:
case "normal":
nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
nativeView.numberOfLines = 0;
break;
case WhiteSpace.NO_WRAP:
case "nowrap":
case "initial":
nativeView.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
nativeView.numberOfLines = 1;
break;
default:
throw new Error(`Invalid whitespace value: ${value}. Valid values are: "${WhiteSpace.NORMAL}", "${WhiteSpace.NO_WRAP}".`);
}
}
@@ -121,12 +108,9 @@ export class Label extends TextBase implements LabelDefinition {
this.nativeView.layer.backgroundColor = value;
}
[borderTopWidthProperty.getDefault](): Length {
return zeroLength;
}
[borderTopWidthProperty.setNative](value: Length) {
let nativeView = this.nativeView;
let border = nativeView.borderThickness;
const nativeView = this.nativeView;
const border = nativeView.borderThickness;
nativeView.borderThickness = {
top: layout.toDeviceIndependentPixels(this.effectiveBorderTopWidth),
right: border.right,
@@ -135,12 +119,9 @@ export class Label extends TextBase implements LabelDefinition {
};
}
[borderRightWidthProperty.getDefault](): Length {
return zeroLength;
}
[borderRightWidthProperty.setNative](value: Length) {
let nativeView = this.nativeView;
let border = nativeView.borderThickness;
const nativeView = this.nativeView;
const border = nativeView.borderThickness;
nativeView.borderThickness = {
top: border.top,
right: layout.toDeviceIndependentPixels(this.effectiveBorderRightWidth),
@@ -149,12 +130,9 @@ export class Label extends TextBase implements LabelDefinition {
};
}
[borderBottomWidthProperty.getDefault](): Length {
return zeroLength;
}
[borderBottomWidthProperty.setNative](value: Length) {
let nativeView = this.nativeView;
let border = nativeView.borderThickness;
const nativeView = this.nativeView;
const border = nativeView.borderThickness;
nativeView.borderThickness = {
top: border.top,
right: border.right,
@@ -163,12 +141,9 @@ export class Label extends TextBase implements LabelDefinition {
};
}
[borderLeftWidthProperty.getDefault](): Length {
return zeroLength;
}
[borderLeftWidthProperty.setNative](value: Length) {
let nativeView = this.nativeView;
let border = nativeView.borderThickness;
const nativeView = this.nativeView;
const border = nativeView.borderThickness;
nativeView.borderThickness = {
top: border.top,
right: border.right,
@@ -177,12 +152,9 @@ export class Label extends TextBase implements LabelDefinition {
};
}
[paddingTopProperty.getDefault](): Length {
return zeroLength;
}
[paddingTopProperty.setNative](value: Length) {
let nativeView = this.nativeView;
let padding = nativeView.padding;
const nativeView = this.nativeView;
const padding = nativeView.padding;
nativeView.padding = {
top: layout.toDeviceIndependentPixels(this.effectivePaddingTop),
right: padding.right,
@@ -191,12 +163,9 @@ export class Label extends TextBase implements LabelDefinition {
};
}
[paddingRightProperty.getDefault](): Length {
return zeroLength;
}
[paddingRightProperty.setNative](value: Length) {
let nativeView = this.nativeView;
let padding = nativeView.padding;
const nativeView = this.nativeView;
const padding = nativeView.padding;
nativeView.padding = {
top: padding.top,
right: layout.toDeviceIndependentPixels(this.effectivePaddingRight),
@@ -205,12 +174,9 @@ export class Label extends TextBase implements LabelDefinition {
};
}
[paddingBottomProperty.getDefault](): Length {
return zeroLength;
}
[paddingBottomProperty.setNative](value: Length) {
let nativeView = this.nativeView;
let padding = nativeView.padding;
const nativeView = this.nativeView;
const padding = nativeView.padding;
nativeView.padding = {
top: padding.top,
right: padding.right,
@@ -219,12 +185,9 @@ export class Label extends TextBase implements LabelDefinition {
};
}
[paddingLeftProperty.getDefault](): Length {
return zeroLength;
}
[paddingLeftProperty.setNative](value: Length) {
let nativeView = this.nativeView;
let padding = nativeView.padding;
const nativeView = this.nativeView;
const padding = nativeView.padding;
nativeView.padding = {
top: padding.top,
right: padding.right,

21
tns-core-modules/ui/layouts/dock-layout/dock-layout-common.ts
View File

@@ -1,5 +1,5 @@
import { DockLayout as DockLayoutDefinition } from ".";
import { LayoutBase, View, Property, isIOS, booleanConverter } from "../layout-base";
import { DockLayout as DockLayoutDefinition, Dock } from ".";
import { LayoutBase, View, Property, isIOS, booleanConverter, makeValidator, makeParser } from "../layout-base";
function validateArgs(element: View): View {
if (!element) {
@@ -12,24 +12,25 @@ export * from "../layout-base";
export class DockLayoutBase extends LayoutBase implements DockLayoutDefinition {
public static getDock(element: View): "left" | "top" | "right" | "bottom" {
public static getDock(element: View): Dock {
return validateArgs(element).dock;
}
public static setDock(element: View, value: "left" | "top" | "right" | "bottom"): void {
public static setDock(element: View, value: Dock): void {
validateArgs(element).dock = value;
}
public stretchLastChild: boolean;
public onDockChanged(view: View, oldValue: "left" | "top" | "right" | "bottom", newValue: "left" | "top" | "right" | "bottom") {
public onDockChanged(view: View, oldValue: Dock, newValue: Dock) {
//
}
}
// DockLayoutBase.prototype.recycleNativeView = true;
export const dockProperty = new Property<View, "left" | "top" | "right" | "bottom">({
const dockConverter = makeParser<Dock>(makeValidator<Dock>("left", "top", "right", "bottom"));
export const dockProperty = new Property<View, Dock>({
name: "dock", defaultValue: "left", valueChanged: (target, oldValue, newValue) => {
if (target instanceof View) {
const layout = target.parent;
@@ -37,13 +38,7 @@ export const dockProperty = new Property<View, "left" | "top" | "right" | "botto
layout.onDockChanged(target, oldValue, newValue);
}
}
}, valueConverter: (v) => {
if (v === "left" || v === "top" || v === "right" || v === "bottom") {
return <"left" | "top" | "right" | "bottom">v;
}
throw new Error(`Invalid value for dock property: ${v}`);
}
}, valueConverter: dockConverter
});
dockProperty.register(View);

9
tns-core-modules/ui/layouts/dock-layout/dock-layout.d.ts vendored
View File

@@ -7,12 +7,12 @@ export class DockLayout extends LayoutBase {
/**
* Gets the value of the Left property from a given View.
*/
static getDock(view: View): string;
static getDock(view: View): Dock;
/**
* Sets the value of the Left property from a given View.
*/
static setDock(view: View, value: string): void;
static setDock(view: View, value: Dock): void;
/**
* Gets or sets a value that indicates whether the last child element within a DockLayout stretches to fill the remaining available space.
@@ -21,12 +21,13 @@ export class DockLayout extends LayoutBase {
stretchLastChild: boolean;
}
export type Dock = "left" | "top" | "right" | "bottom";
/**
* Represents the observable property backing the dock property.
*/
export const dockProperty: Property<DockLayout, "left" | "top" | "right" | "bottom">;
export const dockProperty: Property<DockLayout, Dock>;
/**
* Represents the observable property backing the stretchLastChild property of each DockLayout instance.
*/
export const stretchLastChildProperty: Property<DockLayout, boolean>;
export const stretchLastChildProperty: Property<DockLayout, boolean>;

75
tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.d.ts vendored
View File

@@ -1,105 +1,32 @@
import { LayoutBase, View, Style, CssProperty } from "../layout-base";
export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
export namespace FlexDirection {
export const ROW: "row";
export const ROW_REVERSE: "row-reverse";
export const COLUMN: "column";
export const COLUMN_REVERSE: "column-reverse";
export function isValid(value: any): boolean;
export function parse(value: string): FlexDirection;
}
export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
export namespace FlexWrap {
export const NOWRAP: "nowrap";
export const WRAP: "wrap";
export const WRAP_REVERSE: "wrap-reverse";
export function isValid(value: any): boolean;
export function parse(value: string): FlexWrap;
}
export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
export namespace JustifyContent {
export const FLEX_START: "flex-start";
export const FLEX_END: "flex-end";
export const CENTER: "center";
export const SPACE_BETWEEN: "space-between";
export const SPACE_AROUND: "space-around";
export function isValid(value: any): boolean;
export function parse(value: string): JustifyContent;
}
export type AlignItems = "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
export namespace AlignItems {
export const FLEX_START: "flex-start";
export const FLEX_END: "flex-end";
export const CENTER: "center";
export const BASELINE: "baseline";
export const STRETCH: "stretch";
export function isValid(value: any): boolean;
export function parse(value: string): AlignItems;
}
export type AlignContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch";
export namespace AlignContent {
export const FLEX_START: "flex-start";
export const FLEX_END: "flex-end";
export const CENTER: "center";
export const SPACE_BETWEEN: "space-between";
export const SPACE_AROUND: "space-around";
export const STRETCH: "stretch";
export function isValid(value: any): boolean;
export function parse(value: string): AlignContent;
}
/**
* A flex order integer.
*/
export type Order = number;
export namespace Order {
export function isValid(value: any): boolean;
export function parse(value: string): Order;
}
/**
* A flex-grow number. Negative values are invalid.
*/
export type FlexGrow = number;
export namespace FlexGrow {
export function isValid(value: any): boolean;
export function parse(value: string): FlexGrow;
}
/**
* A flex-shrink number. Negative values are invalid.
*/
export type FlexShrink = number;
export namespace FlexShrink {
export function isValid(value: any): boolean;
export function parse(value: string): FlexShrink;
}
/**
* A flex-wrap-before value. True, false or their string presentations "true" or "false".
*/
export type FlexWrapBefore = boolean;
export namespace FlexWrapBefore {
export function isValid(value: any): boolean;
export function parse(value: string): FlexWrapBefore;
}
export type AlignSelf = "auto" | AlignItems;
export namespace AlignSelf {
export const AUTO: "auto";
export const FLEX_START: "flex-start";
export const FLEX_END: "flex-end";
export const CENTER: "center";
export const BASELINE: "baseline";
export const STRETCH: "stretch";
export function isValid(value: any): boolean;
export function parse(value: string): AlignSelf;
}
export class FlexboxLayout extends LayoutBase {
public flexDirection: FlexDirection;
@@ -133,4 +60,4 @@ export const orderProperty: CssProperty<Style, Order>;
export const flexGrowProperty: CssProperty<Style, FlexGrow>;
export const flexShrinkProperty: CssProperty<Style, FlexShrink>;
export const flexWrapBeforeProperty: CssProperty<Style, FlexWrapBefore>;
export const alignSelfProperty: CssProperty<Style, AlignSelf>;
export const alignSelfProperty: CssProperty<Style, AlignSelf>;

4
tns-core-modules/ui/layouts/layout-base-common.ts
View File

@@ -1,5 +1,5 @@
import { LayoutBase as LayoutBaseDefinition } from "./layout-base";
import { View, CustomLayoutView, Property, AddChildFromBuilder, getViewById, Length } from "../core/view";
import { View, CustomLayoutView, Property, AddChildFromBuilder, getViewById, Length, booleanConverter } from "../core/view";
export * from "../core/view";
@@ -149,5 +149,5 @@ export class LayoutBaseCommon extends CustomLayoutView implements LayoutBaseDefi
}
}
export const clipToBoundsProperty = new Property<LayoutBaseCommon, boolean>({ name: "clipToBounds", defaultValue: true });
export const clipToBoundsProperty = new Property<LayoutBaseCommon, boolean>({ name: "clipToBounds", defaultValue: true, valueConverter: booleanConverter });
clipToBoundsProperty.register(LayoutBaseCommon);

19
tns-core-modules/ui/layouts/stack-layout/stack-layout-common.ts
View File

@@ -1,22 +1,15 @@
import { StackLayout as StackLayoutDefinition } from ".";
import { LayoutBase, Property, isIOS } from "../layout-base";
import { StackLayout as StackLayoutDefinition, Orientation } from ".";
import { LayoutBase, Property, isIOS, makeValidator, makeParser } from "../layout-base";
export * from "../layout-base";
export class StackLayoutBase extends LayoutBase implements StackLayoutDefinition {
public orientation: "horizontal" | "vertical";
public orientation: Orientation;
}
// StackLayoutBase.prototype.recycleNativeView = true;
export const orientationProperty = new Property<StackLayoutBase, "horizontal" | "vertical">({
name: "orientation", defaultValue: "vertical", affectsLayout: isIOS,
valueConverter: (v) => {
if (v === "horizontal" || v === "vertical") {
return <"horizontal" | "vertical">v;
}
const converter = makeParser<Orientation>(makeValidator("horizontal", "vertical"));
throw new Error(`Invalid orientation value: ${v}`);
}
});
orientationProperty.register(StackLayoutBase);
export const orientationProperty = new Property<StackLayoutBase, Orientation>({ name: "orientation", defaultValue: "vertical", affectsLayout: isIOS, valueConverter: converter });
orientationProperty.register(StackLayoutBase);

6
tns-core-modules/ui/layouts/stack-layout/stack-layout.d.ts vendored
View File

@@ -8,10 +8,12 @@ export class StackLayout extends LayoutBase {
* Gets or sets if layout should be horizontal or vertical.
* The default value is vertical.
*/
orientation: "horizontal" | "vertical";
orientation: Orientation;
}
export type Orientation = "horizontal" | "vertical";
/**
* Represents the observable property backing the orientation property of each StackLayout instance.
*/
export const orientationProperty: Property<StackLayout, "horizontal" | "vertical">;
export const orientationProperty: Property<StackLayout, Orientation>;

20
tns-core-modules/ui/layouts/wrap-layout/wrap-layout-common.ts
View File

@@ -1,10 +1,10 @@
import { WrapLayout as WrapLayoutDefinition } from ".";
import { LayoutBase, Property, isIOS, Length } from "../layout-base";
import { WrapLayout as WrapLayoutDefinition, Orientation } from ".";
import { LayoutBase, Property, isIOS, Length, makeValidator, makeParser } from "../layout-base";
export * from "../layout-base";
export class WrapLayoutBase extends LayoutBase implements WrapLayoutDefinition {
public orientation: "horizontal" | "vertical";
public orientation: Orientation;
public itemWidth: Length;
public itemHeight: Length;
public effectiveItemWidth: number;
@@ -25,14 +25,6 @@ export const itemHeightProperty = new Property<WrapLayoutBase, Length>({
});
itemHeightProperty.register(WrapLayoutBase);
export const orientationProperty = new Property<WrapLayoutBase, "horizontal" | "vertical">({
name: "orientation", defaultValue: "horizontal", affectsLayout: isIOS,
valueConverter: (v) => {
if (v === "horizontal" || v === "vertical") {
return <"horizontal" | "vertical">v;
}
throw new Error(`Invalid orientation value: ${v}`);
}
});
orientationProperty.register(WrapLayoutBase);
const converter = makeParser<Orientation>(makeValidator<Orientation>("horizontal", "vertical"));
export const orientationProperty = new Property<WrapLayoutBase, Orientation>({ name: "orientation", defaultValue: "horizontal", affectsLayout: isIOS, valueConverter: converter });
orientationProperty.register(WrapLayoutBase);

8
tns-core-modules/ui/layouts/wrap-layout/wrap-layout.d.ts vendored
View File

@@ -10,7 +10,7 @@ export class WrapLayout extends LayoutBase {
* Gets or sets the flow direction. Default value is horizontal.
* If orientation is horizontal items are arranged in rows, else items are arranged in columns.
*/
orientation: "horizontal" | "vertical";
orientation: Orientation;
/**
* Gets or sets the width used to measure and layout each child.
@@ -25,10 +25,12 @@ export class WrapLayout extends LayoutBase {
itemHeight: Length;
}
export type Orientation = "horizontal" | "vertical";
/**
* Represents the observable property backing the orientation property of each WrapLayout instance.
*/
export const orientationProperty: Property<WrapLayout, "horizontal" | "vertical">;
export const orientationProperty: Property<WrapLayout, Orientation>;
/**
* Represents the observable property backing the itemWidth property of each WrapLayout instance.
@@ -38,4 +40,4 @@ export const itemWidthProperty: Property<WrapLayout, Length>;
/**
* Represents the observable property backing the itemHeight property of each WrapLayout instance.
*/
export const itemHeightProperty: Property<WrapLayout, Length>;
export const itemHeightProperty: Property<WrapLayout, Length>;

21
tns-core-modules/ui/scroll-view/scroll-view-common.ts
View File

@@ -1,5 +1,5 @@
import { ScrollView as ScrollViewDefinition } from ".";
import { ContentView, Property } from "../content-view";
import { ScrollView as ScrollViewDefinition, Orientation } from ".";
import { ContentView, Property, makeParser, makeValidator } from "../content-view";
export * from "../content-view";
@@ -7,7 +7,7 @@ export abstract class ScrollViewBase extends ContentView implements ScrollViewDe
private _scrollChangeCount: number = 0;
public static scrollEvent = "scroll";
public orientation: "horizontal" | "vertical";
public orientation: Orientation;
public addEventListener(arg: string, callback: any, thisArg?: any) {
super.addEventListener(arg, callback, thisArg);
@@ -80,19 +80,12 @@ export abstract class ScrollViewBase extends ContentView implements ScrollViewDe
public abstract _onOrientationChanged();
}
export const orientationProperty = new Property<ScrollViewBase, "horizontal" | "vertical">({
const converter = makeParser<Orientation>(makeValidator("horizontal", "vertical"));
export const orientationProperty = new Property<ScrollViewBase, Orientation>({
name: "orientation", defaultValue: "vertical", affectsLayout: true,
valueChanged: (target: ScrollViewBase, oldValue: "horizontal" | "vertical", newValue: "horizontal" | "vertical") => {
valueChanged: (target: ScrollViewBase, oldValue: Orientation, newValue: Orientation) => {
target._onOrientationChanged();
},
valueConverter: (value) => {
if (value === "vertical") {
return "vertical";
} else if (value === "horizontal") {
return "horizontal";
}
throw new Error(`Orientation should be 'horizontal' or 'vertical'. Given: ${value}`);
}
valueConverter: converter
});
orientationProperty.register(ScrollViewBase);

6
tns-core-modules/ui/scroll-view/scroll-view.d.ts vendored
View File

@@ -49,7 +49,7 @@ export class ScrollView extends ContentView {
/**
* Gets or sets direction in which the content can be scrolled.
*/
orientation: string;
orientation: Orientation;
/**
* A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
@@ -72,4 +72,6 @@ export interface ScrollEventData extends EventData {
scrollY: number;
}
export const orientationProperty: Property<ScrollView, "horizontal" | "vertical">;
export type Orientation = "horizontal" | "vertical";
export const orientationProperty: Property<ScrollView, Orientation>;

36
tns-core-modules/ui/styling/style-properties.d.ts vendored
View File

@@ -109,40 +109,6 @@ export const backgroundInternalProperty: CssProperty<Style, Background>;
export const fontInternalProperty: InheritedCssProperty<Style, Font>;
export type BackgroundRepeat = "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
export namespace BackgroundRepeat {
export const REPEAT: "repeat";
export const REPEAT_X: "repeat-x";
export const REPEAT_Y: "repeat-y";
export const NO_REPEAT: "no-repeat";
export function isValid(value: any): boolean;
export function parse(value: string): BackgroundRepeat;
}
export type Visibility = "visible" | "hidden" | "collapse";
export namespace Visibility {
export const VISIBLE: "visible";
export const HIDDEN: "hidden";
export const COLLAPSE: "collapse";
export function isValid(value: any): boolean;
export function parse(value: string): Visibility;
}
export type HorizontalAlignment = "left" | "center" | "right" | "stretch";
export namespace HorizontalAlignment {
export const LEFT: "left";
export const CENTER: "center";
export const RIGHT: "right";
export const STRETCH: "stretch";
export function isValid(value: any): boolean;
export function parse(value: string): HorizontalAlignment;
}
export type VerticalAlignment = "top" | "middle" | "bottom" | "stretch";
export namespace VerticalAlignment {
export const TOP: "top";
export const MIDDLE: "middle";
export const BOTTOM: "bottom";
export const STRETCH: "stretch";
export function isValid(value: any): boolean;
export function parse(value: string): VerticalAlignment;
}
export type VerticalAlignment = "top" | "middle" | "bottom" | "stretch";

90
tns-core-modules/ui/text-base/text-base-common.ts
View File

@@ -1,5 +1,5 @@
// Definitions.
import { TextBase as TextBaseDefinition } from ".";
import { TextBase as TextBaseDefinition, TextAlignment, TextDecoration, TextTransform, WhiteSpace } from ".";
import { FontStyle, FontWeight } from "../styling/font";
import { PropertyChangeData } from "../../data/observable";
@@ -162,11 +162,7 @@ export function isBold(fontWeight: FontWeight): boolean {
export const textProperty = new Property<TextBaseCommon, string>({ name: "text", defaultValue: "" });
textProperty.register(TextBaseCommon);
export const formattedTextProperty = new Property<TextBaseCommon, FormattedString>({
name: "formattedText",
affectsLayout: isIOS,
valueChanged: onFormattedTextPropertyChanged
});
export const formattedTextProperty = new Property<TextBaseCommon, FormattedString>({ name: "formattedText", affectsLayout: isIOS, valueChanged: onFormattedTextPropertyChanged });
formattedTextProperty.register(TextBaseCommon);
function onFormattedTextPropertyChanged(textBase: TextBaseCommon, oldValue: FormattedString, newValue: FormattedString) {
@@ -181,79 +177,21 @@ function onFormattedTextPropertyChanged(textBase: TextBaseCommon, oldValue: Form
}
}
export type TextAlignment = "left" | "center" | "right";
export namespace TextAlignment {
export const LEFT: "left" = "left";
export const CENTER: "center" = "center";
export const RIGHT: "right" = "right";
export const isValid = makeValidator<TextAlignment>(LEFT, CENTER, RIGHT);
export const parse = makeParser<TextAlignment>(isValid);
}
export const textAlignmentProperty = new InheritedCssProperty<Style, TextAlignment>({
name: "textAlignment",
cssName: "text-align",
valueConverter: TextAlignment.parse
});
const textAlignmentConverter = makeParser<TextAlignment>(makeValidator<TextAlignment>("initial", "left", "center", "right"));
export const textAlignmentProperty = new InheritedCssProperty<Style, TextAlignment>({ name: "textAlignment", cssName: "text-align", defaultValue: "initial", valueConverter: textAlignmentConverter });
textAlignmentProperty.register(Style);
export type TextDecoration = "none" | "underline" | "line-through" | "underline line-through";
export namespace TextDecoration {
export const NONE: "none" = "none";
export const UNDERLINE: "underline" = "underline";
export const LINE_THROUGH: "line-through" = "line-through";
export const UNDERLINE_LINE_THROUGH: "underline line-through" = "underline line-through";
export const isValid = makeValidator<TextDecoration>(NONE, UNDERLINE, LINE_THROUGH, UNDERLINE_LINE_THROUGH);
export const parse = makeParser<TextDecoration>(isValid);
}
export const textDecorationProperty = new CssProperty<Style, TextDecoration>({
name: "textDecoration",
cssName: "text-decoration",
defaultValue: "none",
valueConverter: TextDecoration.parse
});
textDecorationProperty.register(Style);
export type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase";
export namespace TextTransform {
export const NONE: "none" = "none";
export const CAPITALIZE: "capitalize" = "capitalize";
export const UPPERCASE: "uppercase" = "uppercase";
export const LOWERCASE: "lowercase" = "lowercase";
export const isValid = makeValidator<TextTransform>(NONE, CAPITALIZE, UPPERCASE, LOWERCASE);
export const parse = makeParser<TextTransform>(isValid);
}
export const textTransformProperty = new CssProperty<Style, TextTransform>({
name: "textTransform",
cssName: "text-transform",
valueConverter: TextTransform.parse
});
const textTransformConverter = makeParser<TextTransform>(makeValidator<TextTransform>("initial", "none", "capitalize", "uppercase", "lowercase"));
export const textTransformProperty = new CssProperty<Style, TextTransform>({ name: "textTransform", cssName: "text-transform", defaultValue: "initial", valueConverter: textTransformConverter });
textTransformProperty.register(Style);
export type WhiteSpace = "normal" | "nowrap";
export namespace WhiteSpace {
export const NORMAL: "normal" = "normal";
export const NO_WRAP: "nowrap" = "nowrap";
export const isValid = makeValidator<WhiteSpace>(NORMAL, NO_WRAP);
export const parse = makeParser<WhiteSpace>(isValid);
}
export const whiteSpaceProperty = new CssProperty<Style, WhiteSpace>({
name: "whiteSpace",
cssName: "white-space",
affectsLayout: isIOS,
valueConverter: WhiteSpace.parse
});
const whiteSpaceConverter = makeParser<WhiteSpace>(makeValidator<WhiteSpace>("initial", "normal", "nowrap"));
export const whiteSpaceProperty = new CssProperty<Style, WhiteSpace>({ name: "whiteSpace", cssName: "white-space", defaultValue: "initial", affectsLayout: isIOS, valueConverter: whiteSpaceConverter });
whiteSpaceProperty.register(Style);
export const letterSpacingProperty = new CssProperty<Style, number>({
name: "letterSpacing",
cssName: "letter-spacing",
defaultValue: 0,
affectsLayout: isIOS,
valueConverter: v => parseFloat(v)
});
letterSpacingProperty.register(Style);
const textDecorationConverter = makeParser<TextDecoration>(makeValidator<TextDecoration>("none", "underline", "line-through", "underline line-through"));
export const textDecorationProperty = new CssProperty<Style, TextDecoration>({ name: "textDecoration", cssName: "text-decoration", defaultValue: "none", valueConverter: textDecorationConverter });
textDecorationProperty.register(Style);
export const letterSpacingProperty = new CssProperty<Style, number>({ name: "letterSpacing", cssName: "letter-spacing", defaultValue: 0, affectsLayout: isIOS, valueConverter: v => parseFloat(v) });
letterSpacingProperty.register(Style);

152
tns-core-modules/ui/text-base/text-base.android.ts
View File

@@ -1,11 +1,11 @@
import { Font } from "../styling/font";
import { TextDecoration, TextAlignment, TextTransform, WhiteSpace } from "./text-base";
import { Font } from "../styling/font";
import { backgroundColorProperty } from "../styling/style-properties";
import {
TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, fontSizeProperty,
textProperty, textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty,
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length,
whiteSpaceProperty, FormattedString, TextDecoration, TextAlignment, TextTransform, WhiteSpace,
layout, Span, Color, isBold
whiteSpaceProperty, FormattedString, layout, Span, Color, isBold
} from "./text-base-common";
export * from "./text-base-common";
@@ -63,9 +63,6 @@ export class TextBase extends TextBaseCommon {
this._defaultTransformationMethod = null;
}
[textProperty.getDefault](): string {
return '';
}
[textProperty.setNative](value: string) {
if (this.formattedText) {
return;
@@ -74,9 +71,6 @@ export class TextBase extends TextBaseCommon {
this._setNativeText();
}
[formattedTextProperty.getDefault](): FormattedString {
return null;
}
[formattedTextProperty.setNative](value: FormattedString) {
// Don't change the transformation method if this is secure TextField or we'll lose the hiding characters.
if ((<any>this).secure) {
@@ -99,14 +93,10 @@ export class TextBase extends TextBaseCommon {
}
}
[textTransformProperty.getDefault](): "default" {
return "default";
}
[textTransformProperty.setNative](value: "default" | TextTransform | android.text.method.TransformationMethod) {
// In case of reset.
if (value === "default") {
this.nativeView.setTransformationMethod(this._defaultTransformationMethod);
return;
[textTransformProperty.setNative](value: TextTransform) {
if (value === "initial") {
this.nativeView.setTransformationMethod(this._defaultTransformationMethod);
return;
}
// Don't change the transformation method if this is secure TextField or we'll lose the hiding characters.
@@ -115,11 +105,44 @@ export class TextBase extends TextBaseCommon {
}
initializeTextTransformation();
this.nativeView.setTransformationMethod(new TextTransformation(this));
}
if (typeof value === "string") {
this.nativeView.setTransformationMethod(new TextTransformation(this));
} else {
this.nativeView.setTransformationMethod(value);
[textAlignmentProperty.getDefault](): TextAlignment {
return "left";
}
[textAlignmentProperty.setNative](value: TextAlignment) {
let verticalGravity = this.nativeView.getGravity() & android.view.Gravity.VERTICAL_GRAVITY_MASK;
switch (value) {
case "initial":
case "left":
this.nativeView.setGravity(android.view.Gravity.LEFT | verticalGravity);
break;
case "center":
this.nativeView.setGravity(android.view.Gravity.CENTER_HORIZONTAL | verticalGravity);
break;
case "right":
this.nativeView.setGravity(android.view.Gravity.RIGHT | verticalGravity);
break;
}
}
// Overriden in TextField becasue setSingleLine(false) will remove methodTransformation.
// and we don't want to allow TextField to be multiline
[whiteSpaceProperty.setNative](value: WhiteSpace) {
const nativeView = this.nativeView;
switch (value) {
case "initial":
case "normal":
nativeView.setSingleLine(false);
nativeView.setEllipsize(null);
break;
case "nowrap":
nativeView.setSingleLine(true);
nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
break;
}
}
@@ -157,85 +180,26 @@ export class TextBase extends TextBaseCommon {
this.nativeView.setTypeface(value instanceof Font ? value.getAndroidTypeface() : value);
}
}
[textAlignmentProperty.getDefault](): TextAlignment {
let textAlignmentGravity = this.nativeView.getGravity() & android.view.Gravity.HORIZONTAL_GRAVITY_MASK;
switch (textAlignmentGravity) {
case android.view.Gravity.CENTER_HORIZONTAL:
return "center";
case android.view.Gravity.RIGHT:
return "right";
case android.view.Gravity.LEFT:
default:
return "left";
}
}
[textAlignmentProperty.setNative](value: TextAlignment) {
let verticalGravity = this.nativeView.getGravity() & android.view.Gravity.VERTICAL_GRAVITY_MASK;
switch (value) {
case "left":
this.nativeView.setGravity(android.view.Gravity.LEFT | verticalGravity);
break;
case "center":
this.nativeView.setGravity(android.view.Gravity.CENTER_HORIZONTAL | verticalGravity);
break;
case "right":
this.nativeView.setGravity(android.view.Gravity.RIGHT | verticalGravity);
break;
default:
throw new Error(`Invalid text alignment value: ${value}. Valid values are: 'left', 'center', 'right'.`);
}
}
[textDecorationProperty.getDefault](): number {
return -1;
}
[textDecorationProperty.setNative](value: number | TextDecoration) {
const isReset = typeof value === "number";
if (!this.formattedText || isReset) {
value = isReset ? "none" : value;
let flags: number;
switch (value) {
case "none":
flags = 0;
break;
case "underline":
flags = android.graphics.Paint.UNDERLINE_TEXT_FLAG;
break;
case "line-through":
flags = android.graphics.Paint.STRIKE_THRU_TEXT_FLAG;
break;
case "underline line-through":
flags = android.graphics.Paint.UNDERLINE_TEXT_FLAG | android.graphics.Paint.STRIKE_THRU_TEXT_FLAG;
break;
default:
throw new Error(`Invalid text decoration value: ${value}. Valid values are: 'none', 'underline', 'line-through', 'underline line-through'.`);
}
this.nativeView.setPaintFlags(flags);
} else {
this._setNativeText();
}
}
// Overriden in TextField becasue setSingleLine(false) will remove methodTransformation.
// and we don't want to allow TextField to be multiline
[whiteSpaceProperty.getDefault](): WhiteSpace {
return "normal";
}
[whiteSpaceProperty.setNative](value: WhiteSpace) {
const nativeView = this.nativeView;
let flags: number;
switch (value) {
case "normal":
nativeView.setSingleLine(false);
nativeView.setEllipsize(null);
case "none":
flags = 0;
break;
case "nowrap":
nativeView.setSingleLine(true);
nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
case "underline":
flags = android.graphics.Paint.UNDERLINE_TEXT_FLAG;
break;
case "line-through":
flags = android.graphics.Paint.STRIKE_THRU_TEXT_FLAG;
break;
case "underline line-through":
flags = android.graphics.Paint.UNDERLINE_TEXT_FLAG | android.graphics.Paint.STRIKE_THRU_TEXT_FLAG;
break;
default:
throw new Error(`Invalid whitespace value: ${value}. Valid values are: 'normal', nowrap'.`);
}
this.nativeView.setPaintFlags(flags);
this._setNativeText();
}
[letterSpacingProperty.getDefault](): number {

40
tns-core-modules/ui/text-base/text-base.d.ts vendored
View File

@@ -91,42 +91,10 @@ export class TextBase extends View implements AddChildFromBuilder {
export const textProperty: Property<TextBase, string>;
export const formattedTextProperty: Property<TextBase, FormattedString>;
export type TextAlignment = "left" | "center" | "right";
export namespace TextAlignment {
export const LEFT: "left";
export const CENTER: "center";
export const RIGHT: "right";
export function isValid(value: any): boolean;
export function parse(value: string): TextAlignment;
}
export type WhiteSpace = "initial" | "normal" | "nowrap";
export type TextAlignment = "initial" | "left" | "center" | "right";
export type TextTransform = "initial" | "none" | "capitalize" | "uppercase" | "lowercase";
export type TextDecoration = "none" | "underline" | "line-through" | "underline line-through";
export namespace TextDecoration {
export const NONE: "none";
export const UNDERLINE: "underline";
export const LINE_THROUGH: "line-through";
export const UNDERLINE_LINE_THROUGH: "underline line-through";
export function isValid(value: any): boolean;
export function parse(value: string): TextDecoration;
}
export type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase";
export namespace TextTransform {
export const NONE: "none";
export const CAPITALIZE: "capitalize";
export const UPPERCASE: "uppercase";
export const LOWERCASE: "lowercase";
export function isValid(value: any): boolean;
export function parse(value: string): TextTransform;
}
export type WhiteSpace = "normal" | "nowrap";
export namespace WhiteSpace {
export const NORMAL: "normal";
export const NO_WRAP: "nowrap";
export function isValid(value: any): boolean;
export function parse(value: string): WhiteSpace;
}
export const textAlignmentProperty: InheritedCssProperty<Style, TextAlignment>;
export const textDecorationProperty: CssProperty<Style, TextDecoration>;
@@ -135,4 +103,4 @@ export const whiteSpaceProperty: CssProperty<Style, WhiteSpace>;
export const letterSpacingProperty: CssProperty<Style, number>;
//Used by tab view
export function getTransformedText(text: string, textTransform: TextTransform): string;
export function getTransformedText(text: string, textTransform: TextTransform): string;

52
tns-core-modules/ui/text-base/text-base.ios.ts
View File

@@ -1,8 +1,9 @@
import { Font } from "../styling/font";
import { TextDecoration, TextAlignment, TextTransform } from "./text-base";
import { Font } from "../styling/font";
import {
TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty,
textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, FormattedString,
TextDecoration, TextAlignment, TextTransform, Span, Color, isBold
Span, Color, isBold
} from "./text-base-common";
export * from "./text-base-common";
@@ -11,9 +12,6 @@ export class TextBase extends TextBaseCommon {
public nativeView: UITextField | UITextView | UILabel | UIButton;
[textProperty.getDefault](): string {
return '';
}
[textProperty.setNative](value: string) {
if (this.formattedText) {
return;
@@ -23,9 +21,6 @@ export class TextBase extends TextBaseCommon {
this._requestLayoutOnTextChanged();
}
[formattedTextProperty.getDefault](): FormattedString {
return null;
}
[formattedTextProperty.setNative](value: FormattedString) {
this._setNativeText();
textProperty.nativeValueChange(this, !value ? '' : value.toString());
@@ -65,58 +60,30 @@ export class TextBase extends TextBaseCommon {
}
}
[textAlignmentProperty.getDefault](): TextAlignment {
let nativeView = this.nativeView;
nativeView = nativeView instanceof UIButton ? nativeView.titleLabel : nativeView;
switch (nativeView.textAlignment) {
case NSTextAlignment.Natural:
case NSTextAlignment.Left:
return "left";
case NSTextAlignment.Center:
return "center";
case NSTextAlignment.Right:
return "right";
default:
throw new Error(`Unsupported NSTextAlignment: ${nativeView.textAlignment}. Currently supported values are NSTextAlignment.Left, NSTextAlignment.Center, and NSTextAlignment.Right.`);
}
}
[textAlignmentProperty.setNative](value: TextAlignment) {
let nativeView = <UITextField | UITextView | UILabel>this.nativeView;
const nativeView = <UITextField | UITextView | UILabel>this.nativeView;
switch (value) {
case "initial":
case "left":
nativeView.textAlignment = NSTextAlignment.Left;
break;
case "center":
nativeView.textAlignment = NSTextAlignment.Center;
break;
case "right":
nativeView.textAlignment = NSTextAlignment.Right;
break;
default:
throw new Error(`Invalid text alignment value: ${value}. Valid values are: 'left', 'center', 'right'.`);
}
}
[textDecorationProperty.getDefault](): TextDecoration {
return "none";
}
[textDecorationProperty.setNative](value: TextDecoration) {
this._setNativeText();
}
[textTransformProperty.getDefault](): TextTransform {
return "none";
}
[textTransformProperty.setNative](value: TextTransform) {
this._setNativeText();
}
[letterSpacingProperty.getDefault](): number {
return 0;
}
[letterSpacingProperty.setNative](value: number) {
this._setNativeText();
}
@@ -146,8 +113,7 @@ export class TextBase extends TextBaseCommon {
setTextDecorationAndTransform() {
const style = this.style;
let dict = new Map<string, any>();
const dict = new Map<string, any>();
switch (style.textDecoration) {
case "none":
break;
@@ -182,7 +148,8 @@ export class TextBase extends TextBaseCommon {
// UITextView's font seems to change inside.
dict.set(NSFontAttributeName, this.nativeView.font);
}
let result = NSMutableAttributedString.alloc().initWithString(source);
const result = NSMutableAttributedString.alloc().initWithString(source);
result.setAttributesRange(<any>dict, { location: 0, length: source.length });
if (this.nativeView instanceof UIButton) {
this.nativeView.setAttributedTitleForState(result, UIControlState.Normal);
@@ -210,7 +177,7 @@ export class TextBase extends TextBaseCommon {
const text = span.text;
const textTransform = (<TextBase>formattedString.parent).textTransform;
let spanText = (text === null || text === undefined) ? '' : text.toString();
if (textTransform !== "none") {
if (textTransform !== "none" && textTransform !== "initial") {
spanText = getTransformedText(spanText, textTransform);
}
@@ -287,7 +254,6 @@ export function getTransformedText(text: string, textTransform: TextTransform):
return NSStringFromNSAttributedString(text).lowercaseString;
case "capitalize":
return NSStringFromNSAttributedString(text).capitalizedString;
case "none":
default:
return text;
}