Skip to content

Commit 0c5a76b

Browse files
authored
feat: use node meta for actions and additional elements (#90)
1 parent 955ff90 commit 0c5a76b

File tree

3 files changed

+25
-9
lines changed

3 files changed

+25
-9
lines changed

src/components/NavigationTree/NavigationTree.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const renderServiceNode = (node: NavigationTreeServiceNode) => {
3030
return <EmptyView key={key} level={node.level} />;
3131
};
3232

33-
export function NavigationTree({
33+
export function NavigationTree<D = any, M = any>({
3434
rootState: partialRootState,
3535
fetchPath,
3636
getActions,
@@ -40,7 +40,7 @@ export function NavigationTree({
4040
onActivePathUpdate,
4141
cache = true,
4242
virtualize = false,
43-
}: NavigationTreeProps) {
43+
}: NavigationTreeProps<D, M>) {
4444
const [state, dispatch] = React.useReducer(reducer, {
4545
[partialRootState.path]: getNodeState(partialRootState),
4646
});

src/components/NavigationTree/NavigationTreeNode.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,16 @@ export function NavigationTreeNode({
118118
payload: {path, error},
119119
});
120120
});
121-
}, [nodeState.collapsed]);
121+
}, [
122+
activePath,
123+
cache,
124+
dispatch,
125+
fetchPath,
126+
nodeState.collapsed,
127+
nodeState.loaded,
128+
nodeState.loading,
129+
path,
130+
]);
122131

123132
const handleClick = React.useCallback(() => {
124133
if (onActivate) {
@@ -131,11 +140,11 @@ export function NavigationTreeNode({
131140
}, [dispatch, path]);
132141

133142
const additionalNodeElements = React.useMemo(() => {
134-
return renderAdditionalNodeElements?.(nodeState.path, nodeState.type);
143+
return renderAdditionalNodeElements?.(nodeState.path, nodeState.type, nodeState.meta);
135144
}, [renderAdditionalNodeElements, nodeState]);
136145

137146
const actions = React.useMemo(() => {
138-
return getActions?.(nodeState.path, nodeState.type);
147+
return getActions?.(nodeState.path, nodeState.type, nodeState.meta);
139148
}, [getActions, nodeState]);
140149

141150
const handleActionsOpenToggle = React.useCallback(

src/components/NavigationTree/types.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ export type NavigationTreeNodeType =
1616
| 'transfer'
1717
| 'view';
1818

19-
export interface NavigationTreeDataItem {
19+
export interface NavigationTreeDataItem<M = unknown> {
2020
name: string;
2121
type: NavigationTreeNodeType;
2222
/** determined by type by default */
2323
expandable?: boolean;
24+
meta?: M;
2425
}
2526

2627
export interface NavigationTreeState {
@@ -39,6 +40,7 @@ export interface NavigationTreeNodeState {
3940
error: boolean;
4041
children: string[];
4142
level?: number;
43+
meta?: unknown;
4244
}
4345

4446
export interface NavigationTreeServiceNode {
@@ -52,18 +54,23 @@ export type NavigationTreeNodePartialState = Omit<
5254
'loading' | 'loaded' | 'error' | 'children'
5355
>;
5456

55-
export interface NavigationTreeProps<D = any> {
57+
export interface NavigationTreeProps<D = any, M = any> {
5658
rootState: NavigationTreeNodePartialState;
57-
fetchPath: (path: string) => Promise<NavigationTreeDataItem[]>;
59+
fetchPath: (path: string) => Promise<NavigationTreeDataItem<M>[]>;
5860
onActionsOpenToggle?: (args: {
5961
path: string;
6062
type: NavigationTreeNodeType;
6163
isOpen: boolean;
6264
}) => void;
63-
getActions?: (path: string, type: NavigationTreeNodeType) => DropdownMenuItemMixed<D>[];
65+
getActions?: (
66+
path: string,
67+
type: NavigationTreeNodeType,
68+
meta: M,
69+
) => DropdownMenuItemMixed<D>[];
6470
renderAdditionalNodeElements?: (
6571
path: string,
6672
type: NavigationTreeNodeType,
73+
meta: M,
6774
) => JSX.Element | undefined;
6875
activePath?: string;
6976
onActivePathUpdate?: (activePath: string) => void;

0 commit comments

Comments
 (0)