Merge pull request #793 from grahammendick/action-bar

grahammendick · Aug 3, 2024 · 1b60487 · 1b60487
2 parents 9a330df + ba2338e
commit 1b60487
Show file tree

Hide file tree

Showing 39 changed files with 1,105 additions and 128 deletions.
diff --git a/NavigationReactNative/src/BottomAppBar.tsx b/NavigationReactNative/src/BottomAppBar.tsx
@@ -1,8 +1,12 @@
-import React, { cloneElement, ReactElement } from 'react';
+import React, { cloneElement, ReactElement, useContext } from 'react';
 import { Platform, Image, requireNativeComponent, NativeModules } from 'react-native';
+import { NavigationContext } from 'navigation-react';
 import SearchBar from './SearchBar';
 
-const BottomAppBar = ({ navigationImage, overflowImage, children, style, ...props }: any) => {
+const BottomAppBar = ({ navigationImage, overflowImage, onNavigationPress, children, style, ...props }: any) => {
+    const navigationEvent = useContext(NavigationContext);
+    var {stateNavigator} = navigationEvent;
+    var crumb = stateNavigator.stateContext.crumbs.length;
     if (Platform.OS === 'ios') return null;
     const Material3 = global.__turboModuleProxy != null ? require("./NativeMaterial3Module").default : NativeModules.Material3;
     const { on: material3 } = Platform.OS === 'android' ? Material3.getConstants() : { on: false };
@@ -12,11 +16,17 @@ const BottomAppBar = ({ navigationImage, overflowImage, children, style, ...prop
     return (
         <>
             <NVBottomAppBar
+                crumb={crumb}
+                autoNavigation={!onNavigationPress}
                 navigationImage={Image.resolveAssetSource(navigationImage)}
                 overflowImage={Image.resolveAssetSource(overflowImage)}
                 barHeight={!material3 ? 56 : 80}
                 style={{height: !material3 ? 56 : 80}}
-                {...props}>
+                {...props}
+                onNavigationPress={() => {
+                    if (onNavigationPress) onNavigationPress();
+                    else if (crumb > 0) stateNavigator.navigateBack(1);
+                }}>
                 {childrenArray.filter(({type}) => type !== SearchBar)}
             </NVBottomAppBar>
             {searchBar}

diff --git a/NavigationReactNative/src/BottomAppBarNativeComponent.js b/NavigationReactNative/src/BottomAppBarNativeComponent.js
@@ -6,6 +6,8 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNati
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
+  crumb: Int32,
+  autoNavigation: boolean,
   barTintColor: ColorValue,
   tintColor: ColorValue,
   fabAlignmentMode: string,
@@ -16,6 +18,7 @@ type NativeProps = $ReadOnly<{|
   hideOnScroll: boolean,
   navigationImage: ImageSource,
   navigationTestID: string,
+  navigationAccessibilityLabel: string,
   overflowImage: ImageSource,
   overflowTestID: string,
   barHeight: Double,

diff --git a/NavigationReactNative/src/Drawer.tsx b/NavigationReactNative/src/Drawer.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { requireNativeComponent, StyleSheet, Platform } from 'react-native';
+import BackButton from './BackButton';
+
+const Drawer = ({view, open, fromRight = false, onChangeOpen, onOpen, onClose, children}) => {
+    const [show, setShow] = useState(false);
+    const [mostRecentEventCount, setMostRecentEventCount] = useState(0);
+    if (open != null && show !== open) setShow(open);
+    const onChangeShow = ({nativeEvent}) => {
+        const {eventCount: mostRecentEventCount, open: newOpen} = nativeEvent;
+        if (show !== newOpen) {
+            if (open == null)
+                setShow(newOpen);
+            if (!!onChangeOpen)
+                onChangeOpen(newOpen);
+        }
+        if (newOpen) onOpen?.();
+        else onClose?.();
+        setMostRecentEventCount(mostRecentEventCount);
+    }
+    if (Platform.OS === 'ios') return children;
+    return (
+        <>
+            <BackButton onPress={() => {
+                if (show) {
+                    if (open == null)
+                        setShow(false);
+                    if (!!onChangeOpen)
+                        onChangeOpen(false);
+                    return true;
+                }
+                return false;
+            }} />
+            <NVDrawerLayout
+                open={show}
+                fromRight={fromRight}
+                mostRecentEventCount={mostRecentEventCount}
+                onChangeOpen={onChangeShow}
+                style={styles.drawer}>
+                {children}
+                <NVDrawer fromRight={fromRight} style={[styles.view]}>
+                    {view}
+                </NVDrawer>
+            </NVDrawerLayout>
+        </>
+    );
+};
+
+const NVDrawerLayout = global.nativeFabricUIManager ? require('./DrawerLayoutNativeComponent').default : requireNativeComponent('NVDrawerLayout');
+const NVDrawer = global.nativeFabricUIManager ? require('./DrawerNativeComponent').default : requireNativeComponent('NVDrawer');
+
+const styles = StyleSheet.create({
+    drawer: {
+        flex: 1,
+    },
+    view: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 64,
+        elevation: 5,
+        backgroundColor: 'transparent',
+    }
+});
+
+export default Drawer;
diff --git a/NavigationReactNative/src/DrawerLayoutNativeComponent.js b/NavigationReactNative/src/DrawerLayoutNativeComponent.js
@@ -0,0 +1,20 @@
+// @flow strict-local
+
+import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type {HostComponent} from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  open: boolean,
+  fromRight: boolean,
+  mostRecentEventCount: Int32,
+  onChangeOpen: DirectEventHandler<$ReadOnly<{|
+    open: boolean,
+    eventCount: Int32,
+  |}>>,
+|}>;
+
+export default (codegenNativeComponent<NativeProps>(
+   'NVDrawerLayout',
+): HostComponent<NativeProps>);
diff --git a/NavigationReactNative/src/DrawerNativeComponent.js b/NavigationReactNative/src/DrawerNativeComponent.js
@@ -0,0 +1,14 @@
+// @flow strict-local
+
+import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type {HostComponent} from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  fromRight: boolean,
+|}>;
+
+export default (codegenNativeComponent<NativeProps>(
+   'NVDrawer',
+): HostComponent<NativeProps>);
diff --git a/NavigationReactNative/src/NavigationBar.tsx b/NavigationReactNative/src/NavigationBar.tsx
@@ -51,7 +51,8 @@ class NavigationBar extends React.Component<any, any> {
         searchBarTintColor = typeof searchBarTintColor === 'function' ? searchBarTintColor(true) : searchBarTintColor;
         var toolbarTintColor = searchToolbar ? searchBarTintColor : scrollEdgeProps.barTintColor;
         var placeholder = searchBar?.props.placeholder;
-        var crumb = navigationEvent.stateNavigator.stateContext.crumbs.length;
+        var {stateNavigator} = navigationEvent;
+        var crumb = stateNavigator.stateContext.crumbs.length;
         return (
             <>
                 <NVNavigationBar
@@ -74,6 +75,8 @@ class NavigationBar extends React.Component<any, any> {
                             {...(collapsingBar && collapsingBar.props)}>
                             {collapsingBar && collapsingBar.props.children}
                             <Toolbar
+                                crumb={crumb}
+                                autoNavigation={!onNavigationPress}
                                 logo={Image.resolveAssetSource(logo)}
                                 navigationImage={Image.resolveAssetSource(navigationImage)}
                                 overflowImage={Image.resolveAssetSource(overflowImage)}
@@ -88,8 +91,10 @@ class NavigationBar extends React.Component<any, any> {
                                 fontSize={searchBar?.props.fontSize}
                                 titleCentered={!!titleCentered}
                                 barHeight={!material3 || searchToolbar ? 56 : 64}
-                                navigationDecorative={!onNavigationPress}
-                                onNavigationPress={onNavigationPress}
+                                onNavigationPress={() => {
+                                    if (onNavigationPress) onNavigationPress();
+                                    else if (crumb > 0) stateNavigator.navigateBack(1);
+                                }}
                                 style={{height: !material3 || searchToolbar ? 56 : 64, margin: searchToolbar ? 16 : undefined}}>
                                 {[
                                     !searchToolbar && childrenArray.find(({type}) => type === TitleBar),

diff --git a/NavigationReactNative/src/NavigationReactNative.ts b/NavigationReactNative/src/NavigationReactNative.ts
@@ -16,10 +16,11 @@ import CollapsingBar from './CollapsingBar';
 import ActionBar from './ActionBar';
 import StatusBar from './StatusBar';
 import Sheet, {BottomSheet} from './Sheet'
+import Drawer from './Drawer';
 import FloatingActionButton from './FloatingActionButton';
 import useNavigating from './useNavigating';
 import useNavigated from './useNavigated';
 import useUnloading from './useUnloading';
 import useUnloaded from './useUnloaded';
 const Scene = NavigationStack.Scene;
-export { NavigationStack, Scene, NavigationBar, LeftBar, RightBar, BarButton, TitleBar, SearchBar, TabBar, TabBarItem, TabBarItemContext, SharedElement, BackHandlerContext, ModalBackHandler, CoordinatorLayout, CollapsingBar, ActionBar, StatusBar, Sheet, BottomSheet, FloatingActionButton, useNavigating, useNavigated, useUnloading, useUnloaded };
+export { NavigationStack, Scene, NavigationBar, LeftBar, RightBar, BarButton, TitleBar, SearchBar, TabBar, TabBarItem, TabBarItemContext, SharedElement, BackHandlerContext, ModalBackHandler, CoordinatorLayout, CollapsingBar, ActionBar, StatusBar, Sheet, BottomSheet, Drawer, FloatingActionButton, useNavigating, useNavigated, useUnloading, useUnloaded };
diff --git a/NavigationReactNative/src/SearchToolbarNativeComponent.js b/NavigationReactNative/src/SearchToolbarNativeComponent.js
@@ -6,6 +6,8 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNati
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
+  crumb: Int32,
+  autoNavigation: boolean,
   placeholder: string,
   fontFamily: string,
   fontWeight: string,
@@ -15,7 +17,6 @@ type NativeProps = $ReadOnly<{|
   tintColor: ColorValue,
   navigationImage: ImageSource,
   navigationTestID: string,
-  navigationDecorative: boolean,
   navigationAccessibilityLabel: string,
   overflowImage: ImageSource,
   overflowTestID: string,

diff --git a/NavigationReactNative/src/Sheet.tsx b/NavigationReactNative/src/Sheet.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useContext, useState, useRef, createContext, useEffect } from 'react';
+import React, { useMemo, useContext, useState, useRef, createContext } from 'react';
 import { requireNativeComponent, Platform, UIManager, StyleSheet } from 'react-native';
 import { NavigationContext } from 'navigation-react';
 import useNavigated from './useNavigated';

diff --git a/NavigationReactNative/src/ToolbarNativeComponent.js b/NavigationReactNative/src/ToolbarNativeComponent.js
@@ -6,6 +6,8 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNati
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
+  crumb: Int32,
+  autoNavigation: boolean,
   title: string,
   titleFontFamily: string,
   titleFontWeight: string,

diff --git a/...ReactNative/src/android/src/main/java/com/navigation/reactnative/BottomAppBarManager.java b/...ReactNative/src/android/src/main/java/com/navigation/reactnative/BottomAppBarManager.java
@@ -28,11 +28,26 @@ protected BottomAppBarView createViewInstance(@NonNull ThemedReactContext reactC
         return new BottomAppBarView(reactContext);
     }
 
+    @ReactProp(name = "crumb")
+    public void setCrumb(BottomAppBarView view, int crumb) {
+        view.crumb = crumb;
+    }
+
+    @ReactProp(name = "autoNavigation")
+    public void setAutoNavigation(BottomAppBarView view, boolean autoNavigation) {
+        view.autoNavigation = autoNavigation;
+    }
+
     @ReactProp(name = "navigationImage")
     public void setNavIcon(BottomAppBarView view, ReadableMap navIcon) {
         view.setNavIconSource(navIcon);
     }
 
+    @ReactProp(name = "navigationAccessibilityLabel")
+    public void setNavigationContentDescription(BottomAppBarView view, String navigationContentDescription) {
+        view.setNavigationContentDescription(navigationContentDescription);
+    }
+
     @ReactProp(name = "overflowImage")
     public void setOverflowIcon(BottomAppBarView view, ReadableMap overflowIcon) {
         view.setOverflowIconSource(overflowIcon);
@@ -122,7 +137,7 @@ public View getChildAt(BottomAppBarView parent, int index) {
     @Override
     protected void onAfterUpdateTransaction(@NonNull BottomAppBarView view) {
         super.onAfterUpdateTransaction(view);
-        view.setFabAlignmentMode(view.fabAlignmentMode);
+        view.onAfterUpdateTransaction();
     }
 
     @Override