mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-16 03:31:45 +08:00
Merge pull request #3891 from NativeScript/tab-view-text-transform
Initial value for text transform
This commit is contained in:
@ -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;
|
||||
|
18
apps/app/ui-tests-app/tab-view/text-transform.ts
Normal file
18
apps/app/ui-tests-app/tab-view/text-transform.ts
Normal 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 = "";
|
||||
}
|
29
apps/app/ui-tests-app/tab-view/text-transform.xml
Normal file
29
apps/app/ui-tests-app/tab-view/text-transform.xml
Normal 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>
|
@ -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");
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
27
tns-core-modules/ui/tab-view/tab-view.d.ts
vendored
27
tns-core-modules/ui/tab-view/tab-view.d.ts
vendored
@ -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.
|
||||
*/
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user