Merge pull request #3891 from NativeScript/tab-view-text-transform

Initial value for text transform
This commit is contained in:
Alexander Vakrilov
2017-03-31 09:57:56 +03:00
committed by GitHub
11 changed files with 147 additions and 39 deletions

View File

@ -19,6 +19,7 @@ export function pageLoaded(args: EventData) {
examples.set("tabmore", "tab-view/tab-view-more");
examples.set("tabViewCss", "tab-view/tab-view-css");
examples.set("tab-view-icons", "tab-view/tab-view-icon");
examples.set("text-transform", "tab-view/text-transform");
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;

View File

@ -0,0 +1,18 @@
import { Page } from "tns-core-modules/ui/page";
const CSS = `
#tab1 { text-transform: none; }
#tab2 { text-transform: lowercase; }
#tab3 { text-transform: uppercase; }
#tab4 { text-transform: capitalize; }
`
export function applyTap(args) {
var page = <Page>args.object.page;
page.css = CSS;
}
export function resetTap(args) {
var page = <Page>args.object.page;
page.css = "";
}

View File

@ -0,0 +1,29 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigate">
<TabView>
<TabView.items>
<TabViewItem title="tAb ViEw" id="tab1">
<TabViewItem.view>
<StackLayout>
<Button text="apply" tap="applyTap"/>
<Button text="reset" tap="resetTap"/>
</StackLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="tAb ViEw" id="tab2">
<TabViewItem.view>
<Label text="empty tab" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="tAb ViEw" id="tab3">
<TabViewItem.view>
<Label text="empty tab" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="tAb ViEw" id="tab4">
<TabViewItem.view>
<Label text="empty tab" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@ -542,7 +542,7 @@ 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.assertEqual(view.style.textTransform, enums.TextTransform.none, "TextTransform default value");
TKUnit.assertNull(view.style.textTransform, "TextTransform default value");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.none, "TextDecoration default value");
TKUnit.assertTrue(view.style.letterSpacing === 0, "LetterSpacing default value");

View File

@ -5,6 +5,7 @@ import {
} from "../core/view";
export * from "../core/view";
import { TextTransform } from "../text-base";
export const traceCategory = "TabView";
@ -13,6 +14,13 @@ export abstract class TabViewItemBase extends ViewBase implements TabViewItemDef
private _view: View;
private _iconSource: string;
get textTransform(): TextTransform {
return this.style.textTransform;
}
set textTransform(value: TextTransform) {
this.style.textTransform = value;
}
public _addChildFromBuilder(name: string, value: any): void {
if (value instanceof View) {
this.view = value;
@ -76,6 +84,13 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom
public androidOffscreenTabLimit: number;
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
get androidSelectedTabHighlightColor(): Color {
return this.style.androidSelectedTabHighlightColor;
}
set androidSelectedTabHighlightColor(value: Color) {
this.style.androidSelectedTabHighlightColor = value;
}
get tabTextColor(): Color {
return this.style.tabTextColor;
}

View File

@ -191,6 +191,26 @@ export class TabViewItem extends TabViewItemBase {
nativeView: android.widget.TextView;
public tabItemSpec: org.nativescript.widgets.TabItemSpec;
public index: number;
private _defaultTransformationMethod: android.text.method.TransformationMethod;
public initNativeView(): void {
super.initNativeView();
if (this.nativeView) {
this._defaultTransformationMethod = this.nativeView.getTransformationMethod();
}
}
public resetNativeView(): void {
super.resetNativeView();
if (this.nativeView) {
// We reset it here too because this could be changed by multiple properties - whiteSpace, secure, textTransform
this.nativeView.setTransformationMethod(this._defaultTransformationMethod);
}
}
public createNativeView() {
return this.nativeView;
}
public setNativeView(textView: android.widget.TextView): void {
this.nativeView = textView;
@ -225,13 +245,19 @@ export class TabViewItem extends TabViewItemBase {
this.nativeView.setTypeface(value instanceof Font ? value.getAndroidTypeface() : value);
}
[textTransformProperty.getDefault](): TextTransform {
return "none";
[textTransformProperty.getDefault](): "default" {
return "default";
}
[textTransformProperty.setNative](value: TextTransform) {
[textTransformProperty.setNative](value: TextTransform | "default") {
const tv = this.nativeView;
const result = getTransformedText(this.title, value);
tv.setText(result);
if (value === "default") {
tv.setTransformationMethod(this._defaultTransformationMethod);
tv.setText(this.title);
} else {
const result = getTransformedText(this.title, value);
tv.setText(result);
tv.setTransformationMethod(null);
}
}
}

View File

@ -2,7 +2,7 @@
* Contains the TabView class, which represents a standard content component with tabs.
*/
import { View, ViewBase, Property, CssProperty, Style, EventData, Color } from "../core/view";
import { TextTransform } from "../text-base";
/**
* Represents a tab view entry.
*/
@ -21,6 +21,11 @@ export class TabViewItem extends ViewBase {
* Gets or sets the icon source of the TabViewItem. This could either be a a file name or resource id.
*/
public iconSource: string;
/**
* Gets or sets the text transform of the tab titles.
*/
textTransform: TextTransform;
}
/**
@ -52,6 +57,26 @@ export class TabView extends View {
*/
selectedIndex: number;
/**
* Gets or sets the text color of the tabs titles.
*/
tabTextColor: Color;
/**
* Gets or sets the background color of the tabs.
*/
tabBackgroundColor: Color;
/**
* Gets or sets the text color of the selected tab title.
*/
selectedTabTextColor: Color;
/**
* Gets or sets the color of the horizontal line drawn below the currently selected tab on Android.
*/
androidSelectedTabHighlightColor: Color;
/**
* Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
*/

View File

@ -3,7 +3,7 @@
import {
TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty,
tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, iosIconRenderingModeProperty,
View, fontInternalProperty, layout, traceEnabled, traceWrite, traceCategories, Color
View, fontInternalProperty, layout, traceEnabled, traceWrite, traceCategories, Color, initNativeView
} from "./tab-view-common"
import { textTransformProperty, TextTransform, getTransformedText } from "../text-base";
@ -120,15 +120,28 @@ function updateItemTitlePosition(tabBarItem: UITabBarItem): void {
}
export class TabViewItem extends TabViewItemBase {
private _iosViewController: UIViewController;
public setViewController(controller: UIViewController) {
this._iosViewController = controller;
(<any>this)._nativeView = this.nativeView = controller.view;
initNativeView(this);
}
public disposeNativeView() {
this._iosViewController = undefined;
this.nativeView = undefined;
}
_iosViewController: UIViewController;
public _update() {
const parent = <TabView>this.parent;
let controller = this._iosViewController;
if (parent && controller) {
const icon = parent._getIcon(this.iconSource);
const index = parent.items.indexOf(this);
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(this.title, icon, index);
const title = getTransformedText(this.title, this.style.textTransform);
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, icon, index);
if (!icon) {
updateItemTitlePosition(tabBarItem);
}
@ -140,6 +153,10 @@ export class TabViewItem extends TabViewItemBase {
controller.tabBarItem = tabBarItem;
}
}
[textTransformProperty.setNative](value: TextTransform) {
this._update();
}
}
export class TabView extends TabViewBase {
@ -248,7 +265,7 @@ export class TabView extends TabViewBase {
newController.view.addSubview(item.view.ios);
}
item._iosViewController = newController;
item.setViewController(newController);
const icon = this._getIcon(item.iconSource);
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((item.title || ""), icon, i);
@ -356,18 +373,6 @@ export class TabView extends TabViewBase {
}
}
private _updateIOSTabBarTextTransform(newValue: TextTransform): void {
if (!this.items) {
return;
}
const tabBar = this.ios.tabBar;
for (let i = 0, count = tabBar.items.count; i < count; i++) {
const item = tabBar.items[i];
item.title = getTransformedText(item.title, newValue);
}
}
[selectedIndexProperty.getDefault](): number {
return -1;
}
@ -411,14 +416,6 @@ export class TabView extends TabViewBase {
this._updateIOSTabBarColorsAndFonts();
}
// TODO: Move this to TabViewItem
[textTransformProperty.getDefault](): TextTransform {
return "none";
}
[textTransformProperty.setNative](value: TextTransform) {
this._updateIOSTabBarTextTransform(value);
}
// TODO: Move this to TabViewItem
[fontInternalProperty.getDefault](): Font {
return null;

View File

@ -229,7 +229,6 @@ export namespace TextTransform {
export const textTransformProperty = new CssProperty<Style, TextTransform>({
name: "textTransform",
cssName: "text-transform",
defaultValue: "none",
valueConverter: TextTransform.parse
});
textTransformProperty.register(Style);

View File

@ -300,16 +300,15 @@ function getCapitalizedString(str: string): string {
export function getTransformedText(text: string, textTransform: TextTransform): string {
switch (textTransform) {
case "none":
return text;
case "uppercase":
return text.toUpperCase();
case "lowercase":
return text.toLowerCase();
case "capitalize":
return getCapitalizedString(text);
case "none":
default:
throw new Error(`Invalid text transform value: ${textTransform}. Valid values are: 'none', 'capitalize', 'uppercase', 'lowercase'.`);
return text;
}
}
@ -324,7 +323,7 @@ function createSpannableStringBuilder(formattedString: FormattedString): android
const text = span.text;
const textTransform = (<TextBase>formattedString.parent).textTransform;
let spanText = (text === null || text === undefined) ? '' : text.toString();
if (textTransform !== "none") {
if (textTransform && textTransform !== "none") {
spanText = getTransformedText(spanText, textTransform);
}

View File

@ -281,16 +281,15 @@ export class TextBase extends TextBaseCommon {
export function getTransformedText(text: string, textTransform: TextTransform): string {
switch (textTransform) {
case "none":
return text;
case "uppercase":
return NSStringFromNSAttributedString(text).uppercaseString;
case "lowercase":
return NSStringFromNSAttributedString(text).lowercaseString;
case "capitalize":
return NSStringFromNSAttributedString(text).capitalizedString;
case "none":
default:
throw new Error(`Invalid text transform value: ${textTransform}. Valid values are: 'none', 'capitalize', 'uppercase', 'lowercase'.`);
return text;
}
}