diff --git a/demo-angular/src/app/examples/styling/styling-example.component.html b/demo-angular/src/app/examples/styling/styling-example.component.html index 0df04d7..ac2c4ce 100644 --- a/demo-angular/src/app/examples/styling/styling-example.component.html +++ b/demo-angular/src/app/examples/styling/styling-example.component.html @@ -4,7 +4,7 @@ + androidCloseButtonPosition="navigationButton" androidCloseButtonIcon="ic_menu_back"> diff --git a/demo-vue/app/components/Styling.vue b/demo-vue/app/components/Styling.vue index 445b6bb..ddf5854 100644 --- a/demo-vue/app/components/Styling.vue +++ b/demo-vue/app/components/Styling.vue @@ -13,8 +13,8 @@ textField="name" iOSCloseButtonIcon="14" iOSCloseButtonPosition="left" - androidCloseButtonPosition="actionBar" - androidCloseButtonIcon="ic_media_previous"> + androidCloseButtonPosition="navigationButton" + androidCloseButtonIcon="ic_menu_back"> diff --git a/demo/app/examples/styling/styling-page.xml b/demo/app/examples/styling/styling-page.xml index 3a709fc..c0d4682 100644 --- a/demo/app/examples/styling/styling-page.xml +++ b/demo/app/examples/styling/styling-page.xml @@ -8,8 +8,8 @@ pickerTitle="{{ pickerTitle }}" iOSCloseButtonIcon="14" iOSCloseButtonPosition="left" - androidCloseButtonPosition="actionBar" - androidCloseButtonIcon="ic_media_previous"> + androidCloseButtonPosition="navigationButton" + androidCloseButtonIcon="ic_menu_back"> diff --git a/src/picker.common.ts b/src/picker.common.ts index 5cfb653..842e33b 100644 --- a/src/picker.common.ts +++ b/src/picker.common.ts @@ -11,8 +11,9 @@ import { fromObject } from "tns-core-modules/data/observable"; import { addWeakEventListener, removeWeakEventListener } from "tns-core-modules/ui/core/weak-event-listener"; import { ObservableArray, ChangedData } from "tns-core-modules/data/observable-array/observable-array"; import { GridLayout } from 'tns-core-modules/ui/layouts/grid-layout/grid-layout'; -import { ActionItem } from 'tns-core-modules/ui/action-bar/action-bar'; +import { ActionItem, NavigationButton } from 'tns-core-modules/ui/action-bar/action-bar'; import { Frame } from 'tns-core-modules/ui/frame/frame'; +import { isAndroid } from 'tns-core-modules/platform'; export interface ItemsSource { length: number; @@ -47,7 +48,7 @@ export class PickerField extends TextField implements TemplatedItemsView { public selectedIndex: number; public iOSCloseButtonPosition: "left" | "right"; public iOSCloseButtonIcon: number; - public androidCloseButtonPosition: "actionBar" | "actionBarIfRoom" | "popup"; + public androidCloseButtonPosition: "navigationButton" | "actionBar" | "actionBarIfRoom" | "popup"; public androidCloseButtonIcon: string; private _modalListView: ListView; private _modalRoot: Frame; @@ -96,31 +97,34 @@ export class PickerField extends TextField implements TemplatedItemsView { this.applyCssScope(this._page.actionBar); - let actionItem = new ActionItem(); - actionItem.text = "Close"; - actionItem.on(Button.tapEvent, (args: ItemEventData) => { - this.closeCallback(undefined, undefined); - }); + const isNavigationButton = isAndroid && this.androidCloseButtonPosition === "navigationButton"; + const closeButton = isNavigationButton ? new NavigationButton() : new ActionItem(); - this.applyCssScope(actionItem); + closeButton.text = "Close"; + closeButton.on(Button.tapEvent, () => { + this.closeCallback(); + }); + this.applyCssScope(closeButton); - if (actionItem.ios) { - actionItem.ios.position = this.iOSCloseButtonPosition; - actionItem.ios.systemIcon = this.iOSCloseButtonIcon; + if (closeButton.ios) { + closeButton.ios.position = this.iOSCloseButtonPosition; + closeButton.ios.systemIcon = this.iOSCloseButtonIcon; } - - if (actionItem.android) { - actionItem.android.systemIcon = this.androidCloseButtonIcon; - actionItem.android.position = this.androidCloseButtonPosition; + if (closeButton.android) { + closeButton.android.systemIcon = this.androidCloseButtonIcon; + closeButton.android.position = this.androidCloseButtonPosition; } - this._page.actionBar.actionItems.addItem(actionItem); + if (isNavigationButton) { + this._page.actionBar.navigationButton = closeButton; + } else { + this._page.actionBar.actionItems.addItem(closeButton); + } this._modalRoot.on(Page.shownModallyEvent, this.shownModallyHandler.bind(this)); this._modalListView.on(ListView.itemLoadingEvent, this.listViewItemLoadingHandler.bind(this)); this._modalListView.on(ListView.itemTapEvent, this.listViewItemTapHandler.bind(this)); - this.applyCssScope(this._modalListView); this._modalListView.items = this.items; this.applyCssScope(this._modalGridLayout); diff --git a/src/picker.d.ts b/src/picker.d.ts index 61b1efd..0a47d86 100644 --- a/src/picker.d.ts +++ b/src/picker.d.ts @@ -77,7 +77,7 @@ export class PickerField extends TextField implements TemplatedItemsView { /** * Gets or sets the position of the 'close' button of the ActionBar of the modal view. */ - public androidCloseButtonPosition: "actionBar" | "actionBarIfRoom" | "popup"; + public androidCloseButtonPosition: "navigationButton" | "actionBar" | "actionBarIfRoom" | "popup"; /** * Gets or sets the icon of the 'close' button of the ActionBar of the modal view.