feat(NavigationTree): explicitly specify expandable nodes

Author: ariser

src/components/NavigationTree/NavigationTree.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {NavigationTreeProps} from './types';
-import {reducer, getDefaultNodeState} from './state';
+import {reducer, getNodeState} from './state';
 import {NavigationTreeNode} from './NavigationTreeNode';
 import {NavigationTreeDirectory} from './NavigationTreeDirectory';
 
@@ -16,10 +16,7 @@ export function NavigationTree({
     cache = true,
 }: NavigationTreeProps) {
     const [state, dispatch] = React.useReducer(reducer, {
-        [partialRootState.path]: {
-            ...getDefaultNodeState(),
-            ...partialRootState,
-        },
+        [partialRootState.path]: getNodeState(partialRootState),
     });
     const rootState = state[partialRootState.path];
 

src/components/NavigationTree/NavigationTreeDirectory.tsx

@@ -70,7 +70,7 @@ export function NavigationTreeDirectory({
                     const childPath = `${path}/${childName}`;
                     let children;
 
-                    if (state[childPath].type === 'directory') {
+                    if (state[childPath].expandable) {
                         children = (
                             <NavigationTreeDirectory
                                 state={state}

src/components/NavigationTree/NavigationTreeNode.tsx

@@ -32,10 +32,6 @@ function renderIcon(type: NavigationTreeNodeType | string, collapsed: boolean) {
     }
 }
 
-function isArrowVisible(type: NavigationTreeNodeType | string) {
-    return type === 'database' || type === 'directory';
-}
-
 export function NavigationTreeNode({
     path,
     state,
@@ -68,7 +64,7 @@ export function NavigationTreeNode({
             collapsed={nodeState.collapsed}
             active={active}
             actions={actions}
-            hasArrow={isArrowVisible(nodeState.type)}
+            hasArrow={nodeState.expandable}
             onClick={handleClick}
             onArrowClick={handleArrowClick}
         >

src/components/NavigationTree/state.ts

@@ -1,4 +1,8 @@
-import {NavigationTreeState} from './types';
+import {
+    NavigationTreeNodeState,
+    NavigationTreeNodePartialState,
+    NavigationTreeState,
+} from './types';
 
 export enum NavigationTreeActionType {
     ToggleCollapsed = 'toggle-collapsed',
@@ -21,6 +25,16 @@ export function getDefaultNodeState() {
     };
 }
 
+export function getNodeState(
+    partialState: NavigationTreeNodePartialState,
+): NavigationTreeNodeState {
+    return {
+        ...getDefaultNodeState(),
+        expandable: partialState.type === 'database' || partialState.type === 'directory',
+        ...partialState,
+    };
+}
+
 export function reducer(state: NavigationTreeState = {}, action: NavigationTreeAction) {
     switch (action.type) {
         case NavigationTreeActionType.ToggleCollapsed:
@@ -60,21 +74,17 @@ export function reducer(state: NavigationTreeState = {}, action: NavigationTreeA
 
                 for (const item of action.payload.data) {
                     const path = `${action.payload.path}/${item.name}`;
-                    const name = item.name;
-                    const type = item.type;
 
                     // expand the tree according to the active path
                     // prioritize the existing state to expand the tree only on first load
                     const {activePath = ''} = action.payload;
                     const collapsed = state[path]?.collapsed ?? !activePath.startsWith(`${path}/`);
 
-                    newState[path] = {
-                        ...getDefaultNodeState(),
+                    newState[path] = getNodeState({
+                        ...item,
                         collapsed,
                         path,
-                        name,
-                        type,
-                    };
+                    });
                 }
             }
 

src/components/NavigationTree/types.ts

@@ -5,6 +5,8 @@ export type NavigationTreeNodeType = 'database' | 'directory' | 'table';
 export interface NavigationTreeDataItem {
     name: string;
     type: NavigationTreeNodeType;
+    /** determined by type by default */
+    expandable?: boolean;
 }
 
 export interface NavigationTreeState {
@@ -15,15 +17,22 @@ export interface NavigationTreeNodeState {
     path: string;
     name: string;
     type: NavigationTreeNodeType;
+    /** determined by type by default */
+    expandable?: boolean;
     collapsed: boolean;
     loading: boolean;
     loaded: boolean;
     error: boolean;
     children: string[];
 }
 
+export type NavigationTreeNodePartialState = Omit<
+    NavigationTreeNodeState,
+    'loading' | 'loaded' | 'error' | 'children'
+>;
+
 export interface NavigationTreeProps<D = any> {
-    rootState: Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
+    rootState: NavigationTreeNodePartialState;
     fetchPath: (path: string) => Promise<NavigationTreeDataItem[]>;
     getActions?: (path: string, type: NavigationTreeNodeType) => DropdownMenuItemMixed<D>[];
     activePath?: string;