@nativescript-community/ui-appbar 0.0.0-stage → 1.0.0

package/index-common.js

@@ -0,0 +1,104 @@
+import { ActionBar, ActionItem, GridLayout, ItemSpec, Property, View, isAndroid } from '@nativescript/core';
+import { showMenu } from '@nativescript-community/ui-menu';
+function changed(target) {
+    target.onAppBarPropertyChanged();
+}
+export const sizeProperty = new Property({ name: 'size', defaultValue: 'small', valueChanged: changed });
+export const scrollBehaviorProperty = new Property({ name: 'scrollBehavior', defaultValue: 'none', valueChanged: changed });
+export const subtitleProperty = new Property({ name: 'subtitle', valueChanged: changed });
+export const formattedTitleProperty = new Property({ name: 'formattedTitle', valueChanged: changed });
+export const translucentProperty = new Property({ name: 'translucent', defaultValue: false, valueConverter: (v) => v === true || v === 'true' || v === '', valueChanged: changed });
+export const searchableProperty = new Property({ name: 'searchable', defaultValue: false, valueConverter: (v) => v === true || v === 'true' || v === '', valueChanged: changed });
+export const searchHintProperty = new Property({ name: 'searchHint', valueChanged: changed });
+export const scrollTargetProperty = new Property({ name: 'scrollTarget', valueChanged: changed });
+function itemChanged(target) {
+    target.actionBar?.update?.();
+}
+export const badgeProperty = new Property({ name: 'badge', valueChanged: itemChanged });
+export const menuProperty = new Property({ name: 'menu', valueChanged: itemChanged });
+export const prominentProperty = new Property({ name: 'prominent', defaultValue: false, valueConverter: (v) => v === true || v === 'true' || v === '', valueChanged: itemChanged });
+/**
+ * An action of the bar. In addition to the core `ActionItem` (text, icon, `actionView`, `android.position`...):
+ * - `menu`: items of a menu shown when the action is tapped (iOS: native menu of the bar button, Android: popup menu)
+ * - `prominent`: iOS 26 tinted Liquid Glass button
+ */
+export class AppBarItem extends ActionItem {
+    // a view inside the item is its `actionView`: <appBarItem><uibutton .../></appBarItem>
+    _addChildFromBuilder(name, value) {
+        if (value instanceof View) {
+            this.actionView = value;
+        }
+        else {
+            // @ts-ignore
+            super._addChildFromBuilder?.(name, value);
+        }
+    }
+    _raiseTap() {
+        if (this.actionView) {
+            // the core takes the touches of the action view (Android click listener, iOS tap recognizer) for the tap of the item: the view gets its own `tap` event
+            this.actionView.notify({ eventName: 'tap', object: this.actionView });
+        }
+        if (isAndroid && this.menu?.length && this.actionBar) {
+            showMenu({ anchor: this.actionBar, items: this.menu, placement: { horizontal: 'end', vertical: 'below' } });
+            return;
+        }
+        super._raiseTap();
+    }
+}
+menuProperty.register(AppBarItem);
+badgeProperty.register(AppBarItem);
+prominentProperty.register(AppBarItem);
+export const searchModeProperty = new Property({ name: 'searchMode', defaultValue: 'collapsible', valueChanged: changed });
+export const searchPlacementProperty = new Property({ name: 'searchPlacement', defaultValue: 'stacked', valueChanged: changed });
+export const bottomItemsProperty = new Property({ name: 'bottomItems', valueChanged: changed });
+export class AppBarBase extends ActionBar {
+    constructor() {
+        super(...arguments);
+        /** the current text of the search (read only) */
+        this.searchText = '';
+    }
+    onAppBarPropertyChanged() {
+        this.update();
+    }
+}
+AppBarBase.bottomItemTapEvent = 'bottomItemTap';
+/** raised when the text of the search changes */
+AppBarBase.searchChangeEvent = 'searchChange';
+/** raised when the search is submitted (keyboard search key) */
+AppBarBase.searchSubmitEvent = 'searchSubmit';
+/** raised when the search is closed / cancelled */
+AppBarBase.searchCancelEvent = 'searchCancel';
+sizeProperty.register(AppBarBase);
+scrollBehaviorProperty.register(AppBarBase);
+subtitleProperty.register(AppBarBase);
+formattedTitleProperty.register(AppBarBase);
+translucentProperty.register(AppBarBase);
+scrollTargetProperty.register(AppBarBase);
+searchableProperty.register(AppBarBase);
+searchHintProperty.register(AppBarBase);
+bottomItemsProperty.register(AppBarBase);
+searchModeProperty.register(AppBarBase);
+searchPlacementProperty.register(AppBarBase);
+/**
+ * Layout for the views anchored to the page itself (a floating action button, a bottom bar...), not to the scrolling content: use it as the `overlay` of an AppPage.
+ * Android: the content of an AppPage is taller than the screen while the bar is expanded (the content moves up when the bar collapses), so a view anchored to the bottom of the content would be off screen.
+ */
+export class AppPageOverlay extends GridLayout {
+    constructor() {
+        super();
+        // explicit star row and column: the children are aligned in the whole page, also when the keyboard changes its size
+        this.addRow(new ItemSpec(1, 'star'));
+        this.addColumn(new ItemSpec(1, 'star'));
+    }
+}
+/** raises the tap of a bottom item: the `onTap` of the item and the `bottomItemTap` event of the bar */
+export function notifyBottomItemTap(bar, item) {
+    item.onTap?.(item);
+    bar.notify({ eventName: AppBarBase.bottomItemTapEvent, object: bar, item });
+}
+/**
+ * Android `searchMode="bar"`: the content of the full screen search (suggestions, results): use it as the `searchContent` of an AppPage. Ignored on iOS.
+ */
+export class AppPageSearchContent extends GridLayout {
+}
+//# sourceMappingURL=index-common.js.map

package/index-common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-common.js","sourceRoot":"","sources":["../../src/ui-appbar/index-common.ts"],"names":[],"mappings":"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"}

package/index.android.d.ts

@@ -0,0 +1,98 @@
+import { Page, View } from '@nativescript/core';
+import { AppBarBase, AppBarBottomItem, AppBarItem, AppBarScrollBehavior, AppBarSearchMode, AppBarSearchPlacement, AppBarSize, AppPageOverlay, AppPageSearchContent } from './index-common';
+export { AppBarBottomItem, AppBarItem, AppBarScrollBehavior, AppBarSearchMode, AppBarSearchPlacement, AppBarSize, AppPageOverlay, AppPageSearchContent };
+/**
+ * Android: a Material Toolbar. In an `AppPage` it lives in an `AppBarLayout`: `size` medium / large use a M3 `CollapsingToolbarLayout`,
+ * `scrollBehavior` the scroll flags / lift on scroll of the AppBarLayout.
+ */
+export declare class AppBar extends AppBarBase {
+    createNativeView(): com.google.android.material.appbar.MaterialToolbar;
+    _redrawNativeBackground(value: any): void;
+    /** the color of the bar: the css `background-color`, else the surface color of the theme */
+    getBarColor(): number;
+    /** the color of the title and the icons: the css `color`, else the on surface color of the theme */
+    getOnBarColor(): number;
+    /** tints the navigation icon, the actions and the overflow icon with the color of the content of the bar */
+    applyTints(): void;
+    _updateNavigationButton(): void;
+    onAppBarPropertyChanged(): void;
+    update(): void;
+    _addActionItems(): void;
+    private _badges;
+    /** the badges of the actions (a number, a text or a dot): attached once the action views exist */
+    private syncBadges;
+    /** a collapsible SearchView as the first action */
+    private addSearchItem;
+    _updateTitleAndTitleView(): void;
+}
+/**
+ * Android: a Page whose content scrolls with a Material `AppBarLayout` (lift, hide, collapse...).
+ *
+ * The native tree is built INSIDE the root of the regular Page, so any library that replaces the Page root
+ * (like gesturehandler `PageLayout`) keeps working:
+ *
+ *  root = super.createNativeView()          (GridLayout, or the gesturehandler PageLayout)
+ *   `- CoordinatorLayout                    (row 1)
+ *       |- AppBarLayout  <- the ActionBar Toolbar (in a CollapsingToolbarLayout for medium / large)
+ *       `- ContentLayout (ScrollingViewBehavior) <- the page content
+ */
+export declare class AppPage extends Page {
+    private _coordinator;
+    private _appBarLayout;
+    private _nativeContent;
+    private _nativeOverlay;
+    private _overlay;
+    private _searchContent;
+    private _searchBar;
+    private _searchView;
+    private _collapsing;
+    private _collapsingSize;
+    private _scrollBehavior;
+    /** the CollapsingToolbarLayout of a medium / large bar */
+    get collapsingLayout(): com.google.android.material.appbar.CollapsingToolbarLayout;
+    /** the behavior of a bar which is not an AppBar (a core ActionBar) */
+    get scrollBehavior(): AppBarScrollBehavior;
+    set scrollBehavior(value: AppBarScrollBehavior);
+    /** views anchored to the page (a FAB, a bottom bar...) instead of the scrolling content */
+    get overlay(): View;
+    set overlay(value: View);
+    _addChildFromBuilder(name: string, value: any): void;
+    /** `searchMode="bar"`: the content of the full screen search (suggestions, results) */
+    get searchContent(): View;
+    set searchContent(value: View);
+    eachChildView(callback: (child: View) => boolean): void;
+    createNativeView(): org.nativescript.widgets.GridLayout;
+    private _softInputMode;
+    onUnloaded(): void;
+    onLoaded(): void;
+    disposeNativeView(): void;
+    private getStatusBarHeight;
+    /** moves the toolbar between the AppBarLayout and a CollapsingToolbarLayout and applies the scroll settings */
+    syncAppBar(): void;
+    private _hideTarget;
+    private _hideView;
+    private _hideDetach;
+    /**
+     * `hide`: the bar leaves the screen while the list scrolls down and comes back while it scrolls up, both at the same time as the list scrolls
+     * (the nested scrolling of the AppBarLayout would let the bar consume the scroll first). The bar follows the scroll deltas of the list and settles when the scroll stops.
+     */
+    private syncHide;
+    private _liftListener;
+    private setStatusScrimColor;
+    private _statusScrim;
+    private _searchBarSetup;
+    /** `searchMode="bar"`: a Material 3 SearchBar under the toolbar that opens the full screen SearchView */
+    private syncSearchBar;
+    private _bottomBadges;
+    private _bottomBar;
+    private _bottomInsetListener;
+    /** `bottomItems`: a Material BottomAppBar, over the content, below the overlay */
+    private syncBottomBar;
+    /** the last items of the scrolling view must not stay under the bottom bar */
+    private syncBottomInset;
+    private _insetListener;
+    /** translucent: the first items of the scrolling view must start below the bar: its top padding follows the height of the bar */
+    private syncTranslucentInset;
+    _addViewToNativeVisualTree(child: View, atIndex?: number): boolean;
+    _removeViewFromNativeVisualTree(child: View): void;
+}