feat: use node meta for actions and additional elements (#90)

Author: Raubzeug

src/components/NavigationTree/NavigationTree.tsx

@@ -30,7 +30,7 @@ const renderServiceNode = (node: NavigationTreeServiceNode) => {
     return <EmptyView key={key} level={node.level} />;
 };
 
-export function NavigationTree({
+export function NavigationTree<D = any, M = any>({
     rootState: partialRootState,
     fetchPath,
     getActions,
@@ -40,7 +40,7 @@ export function NavigationTree({
     onActivePathUpdate,
     cache = true,
     virtualize = false,
-}: NavigationTreeProps) {
+}: NavigationTreeProps<D, M>) {
     const [state, dispatch] = React.useReducer(reducer, {
         [partialRootState.path]: getNodeState(partialRootState),
     });

src/components/NavigationTree/NavigationTreeNode.tsx

@@ -118,7 +118,16 @@ export function NavigationTreeNode({
                     payload: {path, error},
                 });
             });
-    }, [nodeState.collapsed]);
+    }, [
+        activePath,
+        cache,
+        dispatch,
+        fetchPath,
+        nodeState.collapsed,
+        nodeState.loaded,
+        nodeState.loading,
+        path,
+    ]);
 
     const handleClick = React.useCallback(() => {
         if (onActivate) {
@@ -131,11 +140,11 @@ export function NavigationTreeNode({
     }, [dispatch, path]);
 
     const additionalNodeElements = React.useMemo(() => {
-        return renderAdditionalNodeElements?.(nodeState.path, nodeState.type);
+        return renderAdditionalNodeElements?.(nodeState.path, nodeState.type, nodeState.meta);
     }, [renderAdditionalNodeElements, nodeState]);
 
     const actions = React.useMemo(() => {
-        return getActions?.(nodeState.path, nodeState.type);
+        return getActions?.(nodeState.path, nodeState.type, nodeState.meta);
     }, [getActions, nodeState]);
 
     const handleActionsOpenToggle = React.useCallback(

src/components/NavigationTree/types.ts

@@ -16,11 +16,12 @@ export type NavigationTreeNodeType =
     | 'transfer'
     | 'view';
 
-export interface NavigationTreeDataItem {
+export interface NavigationTreeDataItem<M = unknown> {
     name: string;
     type: NavigationTreeNodeType;
     /** determined by type by default */
     expandable?: boolean;
+    meta?: M;
 }
 
 export interface NavigationTreeState {
@@ -39,6 +40,7 @@ export interface NavigationTreeNodeState {
     error: boolean;
     children: string[];
     level?: number;
+    meta?: unknown;
 }
 
 export interface NavigationTreeServiceNode {
@@ -52,18 +54,23 @@ export type NavigationTreeNodePartialState = Omit<
     'loading' | 'loaded' | 'error' | 'children'
 >;
 
-export interface NavigationTreeProps<D = any> {
+export interface NavigationTreeProps<D = any, M = any> {
     rootState: NavigationTreeNodePartialState;
-    fetchPath: (path: string) => Promise<NavigationTreeDataItem[]>;
+    fetchPath: (path: string) => Promise<NavigationTreeDataItem<M>[]>;
     onActionsOpenToggle?: (args: {
         path: string;
         type: NavigationTreeNodeType;
         isOpen: boolean;
     }) => void;
-    getActions?: (path: string, type: NavigationTreeNodeType) => DropdownMenuItemMixed<D>[];
+    getActions?: (
+        path: string,
+        type: NavigationTreeNodeType,
+        meta: M,
+    ) => DropdownMenuItemMixed<D>[];
     renderAdditionalNodeElements?: (
         path: string,
         type: NavigationTreeNodeType,
+        meta: M,
     ) => JSX.Element | undefined;
     activePath?: string;
     onActivePathUpdate?: (activePath: string) => void;