mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
chore: format
This commit is contained in:
Nathan Walker
@@ -1,8 +1,16 @@
|
||||
import { Font } from "../styling/font";
|
||||
import {
|
||||
SegmentedBarItemBase, SegmentedBarBase, selectedIndexProperty, itemsProperty, selectedBackgroundColorProperty
|
||||
SegmentedBarItemBase,
|
||||
SegmentedBarBase,
|
||||
selectedIndexProperty,
|
||||
itemsProperty,
|
||||
selectedBackgroundColorProperty,
|
||||
} from "./segmented-bar-common";
|
||||
import { colorProperty, fontInternalProperty, fontSizeProperty } from "../styling/style-properties";
|
||||
import {
|
||||
colorProperty,
|
||||
fontInternalProperty,
|
||||
fontSizeProperty,
|
||||
} from "../styling/style-properties";
|
||||
import { Color } from "../../color";
|
||||
import { layout } from "../../utils/utils";
|
||||
|
||||
@@ -14,15 +22,18 @@ 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;
|
||||
@@ -33,243 +44,283 @@ 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);
|
||||
}
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
102
nativescript-core/ui/segmented-bar/index.d.ts
vendored
102
nativescript-core/ui/segmented-bar/index.d.ts
vendored
@@ -9,76 +9,76 @@ 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;
|
||||
implements AddChildFromBuilder, AddArrayFromBuilder {
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,133 +1,162 @@
|
||||
import { Font } from "../styling/font";
|
||||
import {
|
||||
SegmentedBarItemBase, SegmentedBarBase, selectedIndexProperty, itemsProperty, selectedBackgroundColorProperty
|
||||
SegmentedBarItemBase,
|
||||
SegmentedBarBase,
|
||||
selectedIndexProperty,
|
||||
itemsProperty,
|
||||
selectedBackgroundColorProperty,
|
||||
} from "./segmented-bar-common";
|
||||
import { colorProperty, fontInternalProperty } from "../styling/style-properties";
|
||||
import {
|
||||
colorProperty,
|
||||
fontInternalProperty,
|
||||
} from "../styling/style-properties";
|
||||
import { Color } from "../../color";
|
||||
import { ios as iosUtils } from "../../utils/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] },
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,112 +1,126 @@
|
||||
import { SegmentedBar as SegmentedBarDefinition, SegmentedBarItem as SegmentedBarItemDefinition, SelectedIndexChangedEventData } from ".";
|
||||
import {
|
||||
SegmentedBar as SegmentedBarDefinition,
|
||||
SegmentedBarItem as SegmentedBarItemDefinition,
|
||||
SelectedIndexChangedEventData,
|
||||
} from ".";
|
||||
import {
|
||||
View, AddChildFromBuilder, AddArrayFromBuilder, CSSType
|
||||
View,
|
||||
AddChildFromBuilder,
|
||||
AddArrayFromBuilder,
|
||||
CSSType,
|
||||
} from "../core/view";
|
||||
import { ViewBase } from "../core/view-base";
|
||||
import {
|
||||
ViewBase
|
||||
} from "../core/view-base";
|
||||
import {
|
||||
Property, CoercibleProperty, InheritedCssProperty
|
||||
Property,
|
||||
CoercibleProperty,
|
||||
InheritedCssProperty,
|
||||
} from "../core/properties";
|
||||
import {
|
||||
Color
|
||||
} from "../../color";
|
||||
import {
|
||||
Style
|
||||
} from "../styling/style";
|
||||
import {
|
||||
EventData
|
||||
} from "../../data/observable";
|
||||
import { Color } from "../../color";
|
||||
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 = "";
|
||||
export abstract class SegmentedBarItemBase extends ViewBase
|
||||
implements SegmentedBarItemDefinition {
|
||||
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";
|
||||
export abstract class SegmentedBarBase extends View
|
||||
implements
|
||||
SegmentedBarDefinition,
|
||||
AddChildFromBuilder,
|
||||
AddArrayFromBuilder {
|
||||
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";
|
||||
@@ -114,37 +128,58 @@ 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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
export const itemsProperty = new Property<
|
||||
SegmentedBarBase,
|
||||
SegmentedBarItemDefinition[]
|
||||
>({
|
||||
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) });
|
||||
export const selectedBackgroundColorProperty = new InheritedCssProperty<
|
||||
Style,
|
||||
Color
|
||||
>({
|
||||
name: "selectedBackgroundColor",
|
||||
cssName: "selected-background-color",
|
||||
equalityComparer: Color.equals,
|
||||
valueConverter: (v) => new Color(v),
|
||||
});
|
||||
selectedBackgroundColorProperty.register(Style);
|
||||
|
||||
Reference in New Issue
Block a user