mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
chore: default tabs
This commit is contained in:
Nathan Walker
@@ -12,15 +12,15 @@ const R_ATTR_STATE_SELECTED = 0x010100a1;
|
||||
const TITLE_TEXT_VIEW_ID = 16908310; // http://developer.android.com/reference/android/R.id.html#title
|
||||
|
||||
interface TabChangeListener {
|
||||
new (owner: SegmentedBar): android.widget.TabHost.OnTabChangeListener;
|
||||
new (owner: SegmentedBar): android.widget.TabHost.OnTabChangeListener;
|
||||
}
|
||||
|
||||
interface TabContentFactory {
|
||||
new (owner: SegmentedBar): android.widget.TabHost.TabContentFactory;
|
||||
new (owner: SegmentedBar): android.widget.TabHost.TabContentFactory;
|
||||
}
|
||||
|
||||
interface TabHost {
|
||||
new (context: android.content.Context, attrs: android.util.AttributeSet): android.widget.TabHost;
|
||||
new (context: android.content.Context, attrs: android.util.AttributeSet): android.widget.TabHost;
|
||||
}
|
||||
|
||||
let apiLevel: number;
|
||||
@@ -31,243 +31,243 @@ let TabChangeListener: TabChangeListener;
|
||||
let TabContentFactory: TabContentFactory;
|
||||
|
||||
function initializeNativeClasses(): void {
|
||||
if (TabChangeListener) {
|
||||
return;
|
||||
}
|
||||
if (TabChangeListener) {
|
||||
return;
|
||||
}
|
||||
|
||||
apiLevel = android.os.Build.VERSION.SDK_INT;
|
||||
// Indicator thickness for material - 2dip. For pre-material - 5dip.
|
||||
selectedIndicatorThickness = layout.toDevicePixels(apiLevel >= 21 ? 2 : 5);
|
||||
apiLevel = android.os.Build.VERSION.SDK_INT;
|
||||
// Indicator thickness for material - 2dip. For pre-material - 5dip.
|
||||
selectedIndicatorThickness = layout.toDevicePixels(apiLevel >= 21 ? 2 : 5);
|
||||
|
||||
@Interfaces([android.widget.TabHost.OnTabChangeListener])
|
||||
class TabChangeListenerImpl extends java.lang.Object implements android.widget.TabHost.OnTabChangeListener {
|
||||
constructor(public owner: SegmentedBar) {
|
||||
super();
|
||||
@Interfaces([android.widget.TabHost.OnTabChangeListener])
|
||||
class TabChangeListenerImpl extends java.lang.Object implements android.widget.TabHost.OnTabChangeListener {
|
||||
constructor(public owner: SegmentedBar) {
|
||||
super();
|
||||
|
||||
return global.__native(this);
|
||||
}
|
||||
return global.__native(this);
|
||||
}
|
||||
|
||||
onTabChanged(id: string): void {
|
||||
const owner = this.owner;
|
||||
if (owner.shouldChangeSelectedIndex()) {
|
||||
owner.selectedIndex = parseInt(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
onTabChanged(id: string): void {
|
||||
const owner = this.owner;
|
||||
if (owner.shouldChangeSelectedIndex()) {
|
||||
owner.selectedIndex = parseInt(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Interfaces([android.widget.TabHost.TabContentFactory])
|
||||
class TabContentFactoryImpl extends java.lang.Object implements android.widget.TabHost.TabContentFactory {
|
||||
constructor(public owner: SegmentedBar) {
|
||||
super();
|
||||
@Interfaces([android.widget.TabHost.TabContentFactory])
|
||||
class TabContentFactoryImpl extends java.lang.Object implements android.widget.TabHost.TabContentFactory {
|
||||
constructor(public owner: SegmentedBar) {
|
||||
super();
|
||||
|
||||
return global.__native(this);
|
||||
}
|
||||
return global.__native(this);
|
||||
}
|
||||
|
||||
createTabContent(tag: string): android.view.View {
|
||||
const tv = new android.widget.TextView(this.owner._context);
|
||||
// This is collapsed by default and made visible
|
||||
// by android when TabItem becomes visible/selected.
|
||||
// TODO: Try commenting visibility change.
|
||||
tv.setVisibility(android.view.View.GONE);
|
||||
tv.setMaxLines(1);
|
||||
tv.setEllipsize(android.text.TextUtils.TruncateAt.END);
|
||||
createTabContent(tag: string): android.view.View {
|
||||
const tv = new android.widget.TextView(this.owner._context);
|
||||
// This is collapsed by default and made visible
|
||||
// by android when TabItem becomes visible/selected.
|
||||
// TODO: Try commenting visibility change.
|
||||
tv.setVisibility(android.view.View.GONE);
|
||||
tv.setMaxLines(1);
|
||||
tv.setEllipsize(android.text.TextUtils.TruncateAt.END);
|
||||
|
||||
return tv;
|
||||
}
|
||||
}
|
||||
return tv;
|
||||
}
|
||||
}
|
||||
|
||||
class TabHostImpl extends android.widget.TabHost {
|
||||
constructor(context: android.content.Context, attrs: android.util.AttributeSet) {
|
||||
super(context, attrs);
|
||||
class TabHostImpl extends android.widget.TabHost {
|
||||
constructor(context: android.content.Context, attrs: android.util.AttributeSet) {
|
||||
super(context, attrs);
|
||||
|
||||
return global.__native(this);
|
||||
}
|
||||
return global.__native(this);
|
||||
}
|
||||
|
||||
public onAttachedToWindow(): void {
|
||||
// overriden to remove the code that will steal the focus from edit fields.
|
||||
}
|
||||
}
|
||||
public onAttachedToWindow(): void {
|
||||
// overriden to remove the code that will steal the focus from edit fields.
|
||||
}
|
||||
}
|
||||
|
||||
TabHost = TabHostImpl;
|
||||
TabChangeListener = TabChangeListenerImpl;
|
||||
TabContentFactory = TabContentFactoryImpl;
|
||||
TabHost = TabHostImpl;
|
||||
TabChangeListener = TabChangeListenerImpl;
|
||||
TabContentFactory = TabContentFactoryImpl;
|
||||
}
|
||||
|
||||
export class SegmentedBarItem extends SegmentedBarItemBase {
|
||||
nativeViewProtected: android.widget.TextView;
|
||||
nativeViewProtected: android.widget.TextView;
|
||||
|
||||
public setupNativeView(tabIndex: number): void {
|
||||
// TabHost.TabSpec.setIndicator DOES NOT WORK once the title has been set.
|
||||
// http://stackoverflow.com/questions/2935781/modify-tab-indicator-dynamically-in-android
|
||||
const titleTextView = <android.widget.TextView>this.parent.nativeViewProtected.getTabWidget().getChildAt(tabIndex).findViewById(TITLE_TEXT_VIEW_ID);
|
||||
public setupNativeView(tabIndex: number): void {
|
||||
// TabHost.TabSpec.setIndicator DOES NOT WORK once the title has been set.
|
||||
// http://stackoverflow.com/questions/2935781/modify-tab-indicator-dynamically-in-android
|
||||
const titleTextView = <android.widget.TextView>this.parent.nativeViewProtected.getTabWidget().getChildAt(tabIndex).findViewById(TITLE_TEXT_VIEW_ID);
|
||||
|
||||
this.setNativeView(titleTextView);
|
||||
if (titleTextView) {
|
||||
if (this.titleDirty) {
|
||||
this._update();
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setNativeView(titleTextView);
|
||||
if (titleTextView) {
|
||||
if (this.titleDirty) {
|
||||
this._update();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private titleDirty: boolean;
|
||||
public _update(): void {
|
||||
const tv = this.nativeViewProtected;
|
||||
if (tv) {
|
||||
let title = this.title;
|
||||
title = title === null || title === undefined ? '' : title;
|
||||
tv.setText(title);
|
||||
this.titleDirty = false;
|
||||
} else {
|
||||
this.titleDirty = true;
|
||||
}
|
||||
}
|
||||
private titleDirty: boolean;
|
||||
public _update(): void {
|
||||
const tv = this.nativeViewProtected;
|
||||
if (tv) {
|
||||
let title = this.title;
|
||||
title = title === null || title === undefined ? '' : title;
|
||||
tv.setText(title);
|
||||
this.titleDirty = false;
|
||||
} else {
|
||||
this.titleDirty = true;
|
||||
}
|
||||
}
|
||||
|
||||
[colorProperty.getDefault](): number {
|
||||
return this.nativeViewProtected.getCurrentTextColor();
|
||||
}
|
||||
[colorProperty.setNative](value: Color | number) {
|
||||
const color = value instanceof Color ? value.android : value;
|
||||
this.nativeViewProtected.setTextColor(color);
|
||||
}
|
||||
[colorProperty.getDefault](): number {
|
||||
return this.nativeViewProtected.getCurrentTextColor();
|
||||
}
|
||||
[colorProperty.setNative](value: Color | number) {
|
||||
const color = value instanceof Color ? value.android : value;
|
||||
this.nativeViewProtected.setTextColor(color);
|
||||
}
|
||||
|
||||
[fontSizeProperty.getDefault](): { nativeSize: number } {
|
||||
return { nativeSize: this.nativeViewProtected.getTextSize() };
|
||||
}
|
||||
[fontSizeProperty.setNative](value: number | { nativeSize: number }) {
|
||||
if (typeof value === 'number') {
|
||||
this.nativeViewProtected.setTextSize(value);
|
||||
} else {
|
||||
this.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
|
||||
}
|
||||
}
|
||||
[fontSizeProperty.getDefault](): { nativeSize: number } {
|
||||
return { nativeSize: this.nativeViewProtected.getTextSize() };
|
||||
}
|
||||
[fontSizeProperty.setNative](value: number | { nativeSize: number }) {
|
||||
if (typeof value === 'number') {
|
||||
this.nativeViewProtected.setTextSize(value);
|
||||
} else {
|
||||
this.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
|
||||
}
|
||||
}
|
||||
|
||||
[fontInternalProperty.getDefault](): android.graphics.Typeface {
|
||||
return this.nativeViewProtected.getTypeface();
|
||||
}
|
||||
[fontInternalProperty.setNative](value: Font | android.graphics.Typeface) {
|
||||
this.nativeViewProtected.setTypeface(value instanceof Font ? value.getAndroidTypeface() : value);
|
||||
}
|
||||
[fontInternalProperty.getDefault](): android.graphics.Typeface {
|
||||
return this.nativeViewProtected.getTypeface();
|
||||
}
|
||||
[fontInternalProperty.setNative](value: Font | android.graphics.Typeface) {
|
||||
this.nativeViewProtected.setTypeface(value instanceof Font ? value.getAndroidTypeface() : value);
|
||||
}
|
||||
|
||||
[selectedBackgroundColorProperty.getDefault](): android.graphics.drawable.Drawable {
|
||||
const viewGroup = <android.view.ViewGroup>this.nativeViewProtected.getParent();
|
||||
[selectedBackgroundColorProperty.getDefault](): android.graphics.drawable.Drawable {
|
||||
const viewGroup = <android.view.ViewGroup>this.nativeViewProtected.getParent();
|
||||
|
||||
return viewGroup.getBackground();
|
||||
}
|
||||
[selectedBackgroundColorProperty.setNative](value: Color | android.graphics.drawable.Drawable) {
|
||||
const nativeView = this.nativeViewProtected;
|
||||
const viewGroup = <android.view.ViewGroup>nativeView.getParent();
|
||||
if (value instanceof Color) {
|
||||
const color = value.android;
|
||||
const backgroundDrawable = viewGroup.getBackground();
|
||||
if (apiLevel > 21 && backgroundDrawable) {
|
||||
const newDrawable = tryCloneDrawable(backgroundDrawable, nativeView.getResources());
|
||||
newDrawable.setColorFilter(color, android.graphics.PorterDuff.Mode.SRC_IN);
|
||||
viewGroup.setBackground(newDrawable);
|
||||
} else {
|
||||
const stateDrawable = new android.graphics.drawable.StateListDrawable();
|
||||
const colorDrawable: android.graphics.drawable.ColorDrawable = new org.nativescript.widgets.SegmentedBarColorDrawable(color, selectedIndicatorThickness);
|
||||
const arr = Array.create('int', 1);
|
||||
arr[0] = R_ATTR_STATE_SELECTED;
|
||||
stateDrawable.addState(arr, colorDrawable);
|
||||
stateDrawable.setBounds(0, 15, viewGroup.getRight(), viewGroup.getBottom());
|
||||
viewGroup.setBackground(stateDrawable);
|
||||
}
|
||||
} else {
|
||||
const backgroundDrawable = tryCloneDrawable(value, nativeView.getResources());
|
||||
viewGroup.setBackground(backgroundDrawable);
|
||||
}
|
||||
}
|
||||
return viewGroup.getBackground();
|
||||
}
|
||||
[selectedBackgroundColorProperty.setNative](value: Color | android.graphics.drawable.Drawable) {
|
||||
const nativeView = this.nativeViewProtected;
|
||||
const viewGroup = <android.view.ViewGroup>nativeView.getParent();
|
||||
if (value instanceof Color) {
|
||||
const color = value.android;
|
||||
const backgroundDrawable = viewGroup.getBackground();
|
||||
if (apiLevel > 21 && backgroundDrawable) {
|
||||
const newDrawable = tryCloneDrawable(backgroundDrawable, nativeView.getResources());
|
||||
newDrawable.setColorFilter(color, android.graphics.PorterDuff.Mode.SRC_IN);
|
||||
viewGroup.setBackground(newDrawable);
|
||||
} else {
|
||||
const stateDrawable = new android.graphics.drawable.StateListDrawable();
|
||||
const colorDrawable: android.graphics.drawable.ColorDrawable = new org.nativescript.widgets.SegmentedBarColorDrawable(color, selectedIndicatorThickness);
|
||||
const arr = Array.create('int', 1);
|
||||
arr[0] = R_ATTR_STATE_SELECTED;
|
||||
stateDrawable.addState(arr, colorDrawable);
|
||||
stateDrawable.setBounds(0, 15, viewGroup.getRight(), viewGroup.getBottom());
|
||||
viewGroup.setBackground(stateDrawable);
|
||||
}
|
||||
} else {
|
||||
const backgroundDrawable = tryCloneDrawable(value, nativeView.getResources());
|
||||
viewGroup.setBackground(backgroundDrawable);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
|
||||
if (value) {
|
||||
const constantState = value.getConstantState();
|
||||
if (constantState) {
|
||||
return constantState.newDrawable(resources);
|
||||
}
|
||||
}
|
||||
if (value) {
|
||||
const constantState = value.getConstantState();
|
||||
if (constantState) {
|
||||
return constantState.newDrawable(resources);
|
||||
}
|
||||
}
|
||||
|
||||
return value;
|
||||
return value;
|
||||
}
|
||||
|
||||
export class SegmentedBar extends SegmentedBarBase {
|
||||
nativeViewProtected: android.widget.TabHost;
|
||||
private _tabContentFactory: android.widget.TabHost.TabContentFactory;
|
||||
private _addingTab: boolean;
|
||||
nativeViewProtected: android.widget.TabHost;
|
||||
private _tabContentFactory: android.widget.TabHost.TabContentFactory;
|
||||
private _addingTab: boolean;
|
||||
|
||||
public shouldChangeSelectedIndex(): boolean {
|
||||
return !this._addingTab;
|
||||
}
|
||||
public shouldChangeSelectedIndex(): boolean {
|
||||
return !this._addingTab;
|
||||
}
|
||||
|
||||
public createNativeView() {
|
||||
initializeNativeClasses();
|
||||
public createNativeView() {
|
||||
initializeNativeClasses();
|
||||
|
||||
const context: android.content.Context = this._context;
|
||||
const nativeView = new TabHost(context, null);
|
||||
const context: android.content.Context = this._context;
|
||||
const nativeView = new TabHost(context, null);
|
||||
|
||||
const tabHostLayout = new android.widget.LinearLayout(context);
|
||||
tabHostLayout.setOrientation(android.widget.LinearLayout.VERTICAL);
|
||||
const tabHostLayout = new android.widget.LinearLayout(context);
|
||||
tabHostLayout.setOrientation(android.widget.LinearLayout.VERTICAL);
|
||||
|
||||
const tabWidget = new android.widget.TabWidget(context);
|
||||
tabWidget.setId(R_ID_TABS);
|
||||
tabHostLayout.addView(tabWidget);
|
||||
const tabWidget = new android.widget.TabWidget(context);
|
||||
tabWidget.setId(R_ID_TABS);
|
||||
tabHostLayout.addView(tabWidget);
|
||||
|
||||
const frame = new android.widget.FrameLayout(context);
|
||||
frame.setId(R_ID_TABCONTENT);
|
||||
frame.setVisibility(android.view.View.GONE);
|
||||
tabHostLayout.addView(frame);
|
||||
const frame = new android.widget.FrameLayout(context);
|
||||
frame.setId(R_ID_TABCONTENT);
|
||||
frame.setVisibility(android.view.View.GONE);
|
||||
tabHostLayout.addView(frame);
|
||||
|
||||
nativeView.addView(tabHostLayout);
|
||||
nativeView.addView(tabHostLayout);
|
||||
|
||||
return nativeView;
|
||||
}
|
||||
return nativeView;
|
||||
}
|
||||
|
||||
public initNativeView(): void {
|
||||
super.initNativeView();
|
||||
const nativeView = this.nativeViewProtected;
|
||||
const listener = new TabChangeListener(this);
|
||||
nativeView.setOnTabChangedListener(listener);
|
||||
(<any>nativeView).listener = listener;
|
||||
nativeView.setup();
|
||||
this._tabContentFactory = this._tabContentFactory || new TabContentFactory(this);
|
||||
}
|
||||
public initNativeView(): void {
|
||||
super.initNativeView();
|
||||
const nativeView = this.nativeViewProtected;
|
||||
const listener = new TabChangeListener(this);
|
||||
nativeView.setOnTabChangedListener(listener);
|
||||
(<any>nativeView).listener = listener;
|
||||
nativeView.setup();
|
||||
this._tabContentFactory = this._tabContentFactory || new TabContentFactory(this);
|
||||
}
|
||||
|
||||
public disposeNativeView() {
|
||||
const nativeView: any = this.nativeViewProtected;
|
||||
nativeView.listener.owner = null;
|
||||
super.disposeNativeView();
|
||||
}
|
||||
public disposeNativeView() {
|
||||
const nativeView: any = this.nativeViewProtected;
|
||||
nativeView.listener.owner = null;
|
||||
super.disposeNativeView();
|
||||
}
|
||||
|
||||
private insertTab(tabItem: SegmentedBarItem, index: number): void {
|
||||
const tabHost = this.nativeViewProtected;
|
||||
const tab = tabHost.newTabSpec(index + '');
|
||||
tab.setIndicator(tabItem.title + '');
|
||||
tab.setContent(this._tabContentFactory);
|
||||
private insertTab(tabItem: SegmentedBarItem, index: number): void {
|
||||
const tabHost = this.nativeViewProtected;
|
||||
const tab = tabHost.newTabSpec(index + '');
|
||||
tab.setIndicator(tabItem.title + '');
|
||||
tab.setContent(this._tabContentFactory);
|
||||
|
||||
this._addingTab = true;
|
||||
tabHost.addTab(tab);
|
||||
tabItem.setupNativeView(index);
|
||||
this._addingTab = false;
|
||||
}
|
||||
this._addingTab = true;
|
||||
tabHost.addTab(tab);
|
||||
tabItem.setupNativeView(index);
|
||||
this._addingTab = false;
|
||||
}
|
||||
|
||||
[selectedIndexProperty.getDefault](): number {
|
||||
return -1;
|
||||
}
|
||||
[selectedIndexProperty.setNative](value: number) {
|
||||
this.nativeViewProtected.setCurrentTab(value);
|
||||
}
|
||||
[selectedIndexProperty.getDefault](): number {
|
||||
return -1;
|
||||
}
|
||||
[selectedIndexProperty.setNative](value: number) {
|
||||
this.nativeViewProtected.setCurrentTab(value);
|
||||
}
|
||||
|
||||
[itemsProperty.getDefault](): SegmentedBarItem[] {
|
||||
return null;
|
||||
}
|
||||
[itemsProperty.setNative](value: SegmentedBarItem[]) {
|
||||
this.nativeViewProtected.clearAllTabs();
|
||||
[itemsProperty.getDefault](): SegmentedBarItem[] {
|
||||
return null;
|
||||
}
|
||||
[itemsProperty.setNative](value: SegmentedBarItem[]) {
|
||||
this.nativeViewProtected.clearAllTabs();
|
||||
|
||||
const newItems = value;
|
||||
if (newItems) {
|
||||
newItems.forEach((item, i, arr) => this.insertTab(item, i));
|
||||
}
|
||||
const newItems = value;
|
||||
if (newItems) {
|
||||
newItems.forEach((item, i, arr) => this.insertTab(item, i));
|
||||
}
|
||||
|
||||
selectedIndexProperty.coerce(this);
|
||||
}
|
||||
selectedIndexProperty.coerce(this);
|
||||
}
|
||||
}
|
||||
|
||||
92
nativescript-core/ui/segmented-bar/index.d.ts
vendored
92
nativescript-core/ui/segmented-bar/index.d.ts
vendored
@@ -9,71 +9,71 @@ import { Style } from '../styling/style';
|
||||
* Represents a SegmentedBar item.
|
||||
*/
|
||||
export class SegmentedBarItem extends ViewBase {
|
||||
/**
|
||||
* Gets or sets the title of the SegmentedBarItem.
|
||||
*/
|
||||
public title: string;
|
||||
/**
|
||||
* Gets or sets the title of the SegmentedBarItem.
|
||||
*/
|
||||
public title: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines the data for the SegmentedBar.selectedIndexChanged event.
|
||||
*/
|
||||
export interface SelectedIndexChangedEventData extends EventData {
|
||||
/**
|
||||
* The old selected index.
|
||||
*/
|
||||
oldIndex: number;
|
||||
/**
|
||||
* The old selected index.
|
||||
*/
|
||||
oldIndex: number;
|
||||
|
||||
/**
|
||||
* The new selected index.
|
||||
*/
|
||||
newIndex: number;
|
||||
/**
|
||||
* The new selected index.
|
||||
*/
|
||||
newIndex: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents a UI SegmentedBar component.
|
||||
*/
|
||||
export class SegmentedBar extends View implements AddChildFromBuilder, AddArrayFromBuilder {
|
||||
/**
|
||||
* Gets or sets the selected index of the SegmentedBar component.
|
||||
*/
|
||||
selectedIndex: number;
|
||||
/**
|
||||
* Gets or sets the selected index of the SegmentedBar component.
|
||||
*/
|
||||
selectedIndex: number;
|
||||
|
||||
/**
|
||||
* Gets or sets the selected background color of the SegmentedBar component.
|
||||
*/
|
||||
selectedBackgroundColor: Color;
|
||||
/**
|
||||
* Gets or sets the selected background color of the SegmentedBar component.
|
||||
*/
|
||||
selectedBackgroundColor: Color;
|
||||
|
||||
/**
|
||||
* Gets or sets the items of the SegmentedBar.
|
||||
*/
|
||||
items: Array<SegmentedBarItem>;
|
||||
/**
|
||||
* Gets or sets the items of the SegmentedBar.
|
||||
*/
|
||||
items: Array<SegmentedBarItem>;
|
||||
|
||||
/**
|
||||
* String value used when hooking to the selectedIndexChanged event.
|
||||
*/
|
||||
public static selectedIndexChangedEvent: string;
|
||||
/**
|
||||
* String value used when hooking to the selectedIndexChanged event.
|
||||
*/
|
||||
public static selectedIndexChangedEvent: string;
|
||||
|
||||
/**
|
||||
* A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
|
||||
* @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
|
||||
* @param callback - Callback function which will be executed when event is raised.
|
||||
* @param thisArg - An optional parameter which will be used as `this` context for callback execution.
|
||||
*/
|
||||
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
|
||||
/**
|
||||
* A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
|
||||
* @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
|
||||
* @param callback - Callback function which will be executed when event is raised.
|
||||
* @param thisArg - An optional parameter which will be used as `this` context for callback execution.
|
||||
*/
|
||||
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
|
||||
|
||||
/**
|
||||
* Raised when the selected index changes.
|
||||
*/
|
||||
on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
|
||||
/**
|
||||
* Raised when the selected index changes.
|
||||
*/
|
||||
on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
|
||||
|
||||
/**
|
||||
* Called for every child element declared in xml.
|
||||
* @param name - Name of the element.
|
||||
* @param value - Value of the element.
|
||||
*/
|
||||
public _addChildFromBuilder(name: string, value: any): void;
|
||||
public _addArrayFromBuilder(name: string, value: Array<any>): void;
|
||||
/**
|
||||
* Called for every child element declared in xml.
|
||||
* @param name - Name of the element.
|
||||
* @param value - Value of the element.
|
||||
*/
|
||||
public _addChildFromBuilder(name: string, value: any): void;
|
||||
public _addArrayFromBuilder(name: string, value: Array<any>): void;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -6,124 +6,124 @@ import { ios as iosUtils } from '../../utils';
|
||||
export * from './segmented-bar-common';
|
||||
|
||||
export class SegmentedBarItem extends SegmentedBarItemBase {
|
||||
public _update() {
|
||||
const parent = <SegmentedBar>this.parent;
|
||||
if (parent) {
|
||||
let tabIndex = parent.items.indexOf(this);
|
||||
let title = this.title;
|
||||
title = title === null || title === undefined ? '' : title;
|
||||
parent.ios.setTitleForSegmentAtIndex(title, tabIndex);
|
||||
}
|
||||
}
|
||||
public _update() {
|
||||
const parent = <SegmentedBar>this.parent;
|
||||
if (parent) {
|
||||
let tabIndex = parent.items.indexOf(this);
|
||||
let title = this.title;
|
||||
title = title === null || title === undefined ? '' : title;
|
||||
parent.ios.setTitleForSegmentAtIndex(title, tabIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class SegmentedBar extends SegmentedBarBase {
|
||||
nativeViewProtected: UISegmentedControl;
|
||||
private _selectionHandler: NSObject;
|
||||
nativeViewProtected: UISegmentedControl;
|
||||
private _selectionHandler: NSObject;
|
||||
|
||||
createNativeView() {
|
||||
return UISegmentedControl.new();
|
||||
}
|
||||
createNativeView() {
|
||||
return UISegmentedControl.new();
|
||||
}
|
||||
|
||||
initNativeView() {
|
||||
super.initNativeView();
|
||||
this._selectionHandler = SelectionHandlerImpl.initWithOwner(new WeakRef(this));
|
||||
this.nativeViewProtected.addTargetActionForControlEvents(this._selectionHandler, 'selected', UIControlEvents.ValueChanged);
|
||||
}
|
||||
initNativeView() {
|
||||
super.initNativeView();
|
||||
this._selectionHandler = SelectionHandlerImpl.initWithOwner(new WeakRef(this));
|
||||
this.nativeViewProtected.addTargetActionForControlEvents(this._selectionHandler, 'selected', UIControlEvents.ValueChanged);
|
||||
}
|
||||
|
||||
disposeNativeView() {
|
||||
this._selectionHandler = null;
|
||||
super.disposeNativeView();
|
||||
}
|
||||
disposeNativeView() {
|
||||
this._selectionHandler = null;
|
||||
super.disposeNativeView();
|
||||
}
|
||||
|
||||
get ios(): UISegmentedControl {
|
||||
return this.nativeViewProtected;
|
||||
}
|
||||
get ios(): UISegmentedControl {
|
||||
return this.nativeViewProtected;
|
||||
}
|
||||
|
||||
[selectedIndexProperty.getDefault](): number {
|
||||
return -1;
|
||||
}
|
||||
[selectedIndexProperty.setNative](value: number) {
|
||||
this.ios.selectedSegmentIndex = value;
|
||||
}
|
||||
[selectedIndexProperty.getDefault](): number {
|
||||
return -1;
|
||||
}
|
||||
[selectedIndexProperty.setNative](value: number) {
|
||||
this.ios.selectedSegmentIndex = value;
|
||||
}
|
||||
|
||||
[itemsProperty.getDefault](): SegmentedBarItem[] {
|
||||
return null;
|
||||
}
|
||||
[itemsProperty.setNative](value: SegmentedBarItem[]) {
|
||||
const segmentedControl = this.ios;
|
||||
segmentedControl.removeAllSegments();
|
||||
const newItems = value;
|
||||
[itemsProperty.getDefault](): SegmentedBarItem[] {
|
||||
return null;
|
||||
}
|
||||
[itemsProperty.setNative](value: SegmentedBarItem[]) {
|
||||
const segmentedControl = this.ios;
|
||||
segmentedControl.removeAllSegments();
|
||||
const newItems = value;
|
||||
|
||||
if (newItems && newItems.length) {
|
||||
newItems.forEach((item, index, arr) => {
|
||||
let title = item.title;
|
||||
title = title === null || title === undefined ? '' : title;
|
||||
segmentedControl.insertSegmentWithTitleAtIndexAnimated(title, index, false);
|
||||
});
|
||||
}
|
||||
if (newItems && newItems.length) {
|
||||
newItems.forEach((item, index, arr) => {
|
||||
let title = item.title;
|
||||
title = title === null || title === undefined ? '' : title;
|
||||
segmentedControl.insertSegmentWithTitleAtIndexAnimated(title, index, false);
|
||||
});
|
||||
}
|
||||
|
||||
selectedIndexProperty.coerce(this);
|
||||
}
|
||||
selectedIndexProperty.coerce(this);
|
||||
}
|
||||
|
||||
[selectedBackgroundColorProperty.getDefault](): UIColor {
|
||||
const currentOsVersion = iosUtils.MajorVersion;
|
||||
[selectedBackgroundColorProperty.getDefault](): UIColor {
|
||||
const currentOsVersion = iosUtils.MajorVersion;
|
||||
|
||||
return currentOsVersion < 13 ? this.ios.tintColor : this.ios.selectedSegmentTintColor;
|
||||
}
|
||||
[selectedBackgroundColorProperty.setNative](value: UIColor | Color) {
|
||||
const currentOsVersion = iosUtils.MajorVersion;
|
||||
let color = value instanceof Color ? value.ios : value;
|
||||
if (currentOsVersion < 13) {
|
||||
this.ios.tintColor = color;
|
||||
} else {
|
||||
this.ios.selectedSegmentTintColor = color;
|
||||
}
|
||||
}
|
||||
return currentOsVersion < 13 ? this.ios.tintColor : this.ios.selectedSegmentTintColor;
|
||||
}
|
||||
[selectedBackgroundColorProperty.setNative](value: UIColor | Color) {
|
||||
const currentOsVersion = iosUtils.MajorVersion;
|
||||
let color = value instanceof Color ? value.ios : value;
|
||||
if (currentOsVersion < 13) {
|
||||
this.ios.tintColor = color;
|
||||
} else {
|
||||
this.ios.selectedSegmentTintColor = color;
|
||||
}
|
||||
}
|
||||
|
||||
[colorProperty.getDefault](): UIColor {
|
||||
return null;
|
||||
}
|
||||
[colorProperty.setNative](value: Color | UIColor) {
|
||||
let color = value instanceof Color ? value.ios : value;
|
||||
let bar = this.ios;
|
||||
let currentAttrs = bar.titleTextAttributesForState(UIControlState.Normal);
|
||||
let attrs = currentAttrs ? currentAttrs.mutableCopy() : NSMutableDictionary.new();
|
||||
attrs.setValueForKey(color, NSForegroundColorAttributeName);
|
||||
bar.setTitleTextAttributesForState(attrs, UIControlState.Normal);
|
||||
}
|
||||
[colorProperty.getDefault](): UIColor {
|
||||
return null;
|
||||
}
|
||||
[colorProperty.setNative](value: Color | UIColor) {
|
||||
let color = value instanceof Color ? value.ios : value;
|
||||
let bar = this.ios;
|
||||
let currentAttrs = bar.titleTextAttributesForState(UIControlState.Normal);
|
||||
let attrs = currentAttrs ? currentAttrs.mutableCopy() : NSMutableDictionary.new();
|
||||
attrs.setValueForKey(color, NSForegroundColorAttributeName);
|
||||
bar.setTitleTextAttributesForState(attrs, UIControlState.Normal);
|
||||
}
|
||||
|
||||
[fontInternalProperty.getDefault](): Font {
|
||||
return null;
|
||||
}
|
||||
[fontInternalProperty.setNative](value: Font) {
|
||||
let font: UIFont = value ? value.getUIFont(UIFont.systemFontOfSize(UIFont.labelFontSize)) : null;
|
||||
let bar = this.ios;
|
||||
let currentAttrs = bar.titleTextAttributesForState(UIControlState.Normal);
|
||||
let attrs = currentAttrs ? currentAttrs.mutableCopy() : NSMutableDictionary.new();
|
||||
attrs.setValueForKey(font, NSFontAttributeName);
|
||||
bar.setTitleTextAttributesForState(attrs, UIControlState.Normal);
|
||||
}
|
||||
[fontInternalProperty.getDefault](): Font {
|
||||
return null;
|
||||
}
|
||||
[fontInternalProperty.setNative](value: Font) {
|
||||
let font: UIFont = value ? value.getUIFont(UIFont.systemFontOfSize(UIFont.labelFontSize)) : null;
|
||||
let bar = this.ios;
|
||||
let currentAttrs = bar.titleTextAttributesForState(UIControlState.Normal);
|
||||
let attrs = currentAttrs ? currentAttrs.mutableCopy() : NSMutableDictionary.new();
|
||||
attrs.setValueForKey(font, NSFontAttributeName);
|
||||
bar.setTitleTextAttributesForState(attrs, UIControlState.Normal);
|
||||
}
|
||||
}
|
||||
|
||||
class SelectionHandlerImpl extends NSObject {
|
||||
private _owner: WeakRef<SegmentedBar>;
|
||||
private _owner: WeakRef<SegmentedBar>;
|
||||
|
||||
public static initWithOwner(owner: WeakRef<SegmentedBar>): SelectionHandlerImpl {
|
||||
let handler = <SelectionHandlerImpl>SelectionHandlerImpl.new();
|
||||
handler._owner = owner;
|
||||
public static initWithOwner(owner: WeakRef<SegmentedBar>): SelectionHandlerImpl {
|
||||
let handler = <SelectionHandlerImpl>SelectionHandlerImpl.new();
|
||||
handler._owner = owner;
|
||||
|
||||
return handler;
|
||||
}
|
||||
return handler;
|
||||
}
|
||||
|
||||
public selected(sender: UISegmentedControl) {
|
||||
let owner = this._owner.get();
|
||||
if (owner) {
|
||||
owner.selectedIndex = sender.selectedSegmentIndex;
|
||||
}
|
||||
}
|
||||
public selected(sender: UISegmentedControl) {
|
||||
let owner = this._owner.get();
|
||||
if (owner) {
|
||||
owner.selectedIndex = sender.selectedSegmentIndex;
|
||||
}
|
||||
}
|
||||
|
||||
public static ObjCExposedMethods = {
|
||||
selected: { returns: interop.types.void, params: [UISegmentedControl] },
|
||||
};
|
||||
public static ObjCExposedMethods = {
|
||||
selected: { returns: interop.types.void, params: [UISegmentedControl] },
|
||||
};
|
||||
}
|
||||
|
||||
@@ -7,94 +7,94 @@ import { Style } from '../styling/style';
|
||||
import { EventData } from '../../data/observable';
|
||||
|
||||
export module knownCollections {
|
||||
export const items = 'items';
|
||||
export const items = 'items';
|
||||
}
|
||||
|
||||
@CSSType('SegmentedBarItem')
|
||||
export abstract class SegmentedBarItemBase extends ViewBase implements SegmentedBarItemDefinition {
|
||||
private _title: string = '';
|
||||
private _title: string = '';
|
||||
|
||||
get title(): string {
|
||||
return this._title;
|
||||
}
|
||||
set title(value: string) {
|
||||
let strValue = value !== null && value !== undefined ? value.toString() : '';
|
||||
if (this._title !== strValue) {
|
||||
this._title = strValue;
|
||||
this._update();
|
||||
}
|
||||
}
|
||||
get title(): string {
|
||||
return this._title;
|
||||
}
|
||||
set title(value: string) {
|
||||
let strValue = value !== null && value !== undefined ? value.toString() : '';
|
||||
if (this._title !== strValue) {
|
||||
this._title = strValue;
|
||||
this._update();
|
||||
}
|
||||
}
|
||||
|
||||
public abstract _update();
|
||||
public abstract _update();
|
||||
}
|
||||
|
||||
@CSSType('SegmentedBar')
|
||||
export abstract class SegmentedBarBase extends View implements SegmentedBarDefinition, AddChildFromBuilder, AddArrayFromBuilder {
|
||||
public static selectedIndexChangedEvent = 'selectedIndexChanged';
|
||||
public static selectedIndexChangedEvent = 'selectedIndexChanged';
|
||||
|
||||
public selectedIndex: number;
|
||||
public items: Array<SegmentedBarItemDefinition>;
|
||||
public selectedIndex: number;
|
||||
public items: Array<SegmentedBarItemDefinition>;
|
||||
|
||||
public get selectedBackgroundColor(): Color {
|
||||
return this.style.selectedBackgroundColor;
|
||||
}
|
||||
public set selectedBackgroundColor(value: Color) {
|
||||
this.style.selectedBackgroundColor = value;
|
||||
}
|
||||
public get selectedBackgroundColor(): Color {
|
||||
return this.style.selectedBackgroundColor;
|
||||
}
|
||||
public set selectedBackgroundColor(value: Color) {
|
||||
this.style.selectedBackgroundColor = value;
|
||||
}
|
||||
|
||||
public _addArrayFromBuilder(name: string, value: Array<any>): void {
|
||||
if (name === 'items') {
|
||||
this.items = value;
|
||||
}
|
||||
}
|
||||
public _addArrayFromBuilder(name: string, value: Array<any>): void {
|
||||
if (name === 'items') {
|
||||
this.items = value;
|
||||
}
|
||||
}
|
||||
|
||||
public _addChildFromBuilder(name: string, value: any): void {
|
||||
if (name === 'SegmentedBarItem') {
|
||||
const item = <SegmentedBarItemBase>value;
|
||||
let items = this.items;
|
||||
if (!items) {
|
||||
items = new Array<SegmentedBarItemBase>();
|
||||
items.push(item);
|
||||
this.items = items;
|
||||
} else {
|
||||
items.push(item);
|
||||
this._addView(item);
|
||||
}
|
||||
public _addChildFromBuilder(name: string, value: any): void {
|
||||
if (name === 'SegmentedBarItem') {
|
||||
const item = <SegmentedBarItemBase>value;
|
||||
let items = this.items;
|
||||
if (!items) {
|
||||
items = new Array<SegmentedBarItemBase>();
|
||||
items.push(item);
|
||||
this.items = items;
|
||||
} else {
|
||||
items.push(item);
|
||||
this._addView(item);
|
||||
}
|
||||
|
||||
if (this.nativeViewProtected) {
|
||||
this[itemsProperty.setNative](items);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.nativeViewProtected) {
|
||||
this[itemsProperty.setNative](items);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public onItemsChanged(oldItems: SegmentedBarItemDefinition[], newItems: SegmentedBarItemDefinition[]): void {
|
||||
if (oldItems) {
|
||||
for (let i = 0, count = oldItems.length; i < count; i++) {
|
||||
this._removeView(oldItems[i]);
|
||||
}
|
||||
}
|
||||
public onItemsChanged(oldItems: SegmentedBarItemDefinition[], newItems: SegmentedBarItemDefinition[]): void {
|
||||
if (oldItems) {
|
||||
for (let i = 0, count = oldItems.length; i < count; i++) {
|
||||
this._removeView(oldItems[i]);
|
||||
}
|
||||
}
|
||||
|
||||
if (newItems) {
|
||||
for (let i = 0, count = newItems.length; i < count; i++) {
|
||||
this._addView(newItems[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (newItems) {
|
||||
for (let i = 0, count = newItems.length; i < count; i++) {
|
||||
this._addView(newItems[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Make _addView to keep its children so this method is not needed!
|
||||
public eachChild(callback: (child: ViewBase) => boolean): void {
|
||||
const items = this.items;
|
||||
if (items) {
|
||||
items.forEach((item, i) => {
|
||||
callback(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
// TODO: Make _addView to keep its children so this method is not needed!
|
||||
public eachChild(callback: (child: ViewBase) => boolean): void {
|
||||
const items = this.items;
|
||||
if (items) {
|
||||
items.forEach((item, i) => {
|
||||
callback(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface SegmentedBarBase {
|
||||
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
|
||||
on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
|
||||
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
|
||||
on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
|
||||
}
|
||||
|
||||
SegmentedBarBase.prototype.recycleNativeView = 'auto';
|
||||
@@ -103,48 +103,48 @@ SegmentedBarBase.prototype.recycleNativeView = 'auto';
|
||||
* Gets or sets the selected index dependency property of the SegmentedBar.
|
||||
*/
|
||||
export const selectedIndexProperty = new CoercibleProperty<SegmentedBarBase, number>({
|
||||
name: 'selectedIndex',
|
||||
defaultValue: -1,
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
target.notify(<SelectedIndexChangedEventData>{
|
||||
eventName: SegmentedBarBase.selectedIndexChangedEvent,
|
||||
object: target,
|
||||
oldIndex: oldValue,
|
||||
newIndex: newValue,
|
||||
});
|
||||
},
|
||||
coerceValue: (target, value) => {
|
||||
let items = target.items;
|
||||
if (items) {
|
||||
let max = items.length - 1;
|
||||
if (value < 0) {
|
||||
value = 0;
|
||||
}
|
||||
if (value > max) {
|
||||
value = max;
|
||||
}
|
||||
} else {
|
||||
value = -1;
|
||||
}
|
||||
name: 'selectedIndex',
|
||||
defaultValue: -1,
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
target.notify(<SelectedIndexChangedEventData>{
|
||||
eventName: SegmentedBarBase.selectedIndexChangedEvent,
|
||||
object: target,
|
||||
oldIndex: oldValue,
|
||||
newIndex: newValue,
|
||||
});
|
||||
},
|
||||
coerceValue: (target, value) => {
|
||||
let items = target.items;
|
||||
if (items) {
|
||||
let max = items.length - 1;
|
||||
if (value < 0) {
|
||||
value = 0;
|
||||
}
|
||||
if (value > max) {
|
||||
value = max;
|
||||
}
|
||||
} else {
|
||||
value = -1;
|
||||
}
|
||||
|
||||
return value;
|
||||
},
|
||||
valueConverter: (v) => parseInt(v),
|
||||
return value;
|
||||
},
|
||||
valueConverter: (v) => parseInt(v),
|
||||
});
|
||||
selectedIndexProperty.register(SegmentedBarBase);
|
||||
|
||||
export const itemsProperty = new Property<SegmentedBarBase, SegmentedBarItemDefinition[]>({
|
||||
name: 'items',
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
target.onItemsChanged(oldValue, newValue);
|
||||
},
|
||||
name: 'items',
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
target.onItemsChanged(oldValue, newValue);
|
||||
},
|
||||
});
|
||||
itemsProperty.register(SegmentedBarBase);
|
||||
|
||||
export const selectedBackgroundColorProperty = new InheritedCssProperty<Style, Color>({
|
||||
name: 'selectedBackgroundColor',
|
||||
cssName: 'selected-background-color',
|
||||
equalityComparer: Color.equals,
|
||||
valueConverter: (v) => new Color(v),
|
||||
name: 'selectedBackgroundColor',
|
||||
cssName: 'selected-background-color',
|
||||
equalityComparer: Color.equals,
|
||||
valueConverter: (v) => new Color(v),
|
||||
});
|
||||
selectedBackgroundColorProperty.register(Style);
|
||||
|
||||
Reference in New Issue
Block a user