// SPDX-License-Identifier: AGPL-3.0
import { connect } from "react-redux";
-import { Tree, TreeProps, TreeItem, TreeItemStatus } from "~/components/tree/tree";
-import { RootState } from "~/store/store";
-import { getNodeChildrenIds, Tree as Ttree, createTree, getNode, TreeNodeStatus } from '~/models/tree';
+import { Tree, TreeProps, TreeItem, TreeItemStatus } from "components/tree/tree";
+import { RootState } from "store/store";
+import { getNodeChildrenIds, Tree as Ttree, createTree, getNode, TreeNodeStatus } from 'models/tree';
import { Dispatch } from "redux";
import { initTreeNode } from '../../models/tree';
+import { ResourcesState } from "store/resources/resources";
type Callback<T> = (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>, pickerId: string) => void;
export interface TreePickerProps<T> {
return item;
};
-const memoizedMapStateToProps = () => {
- let prevTree: Ttree<any>;
- let mappedProps: Pick<TreeProps<any>, 'items' | 'disableRipple' | 'itemsMap'>;
- return <T>(state: RootState, props: TreePickerProps<T>): Pick<TreeProps<T>, 'items' | 'disableRipple' | 'itemsMap'> => {
+const mapStateToProps =
+ <T>(state: RootState, props: TreePickerProps<T>): Pick<TreeProps<T>, 'items' | 'disableRipple' | 'itemsMap'> => {
const itemsIdMap: Map<string, TreeItem<T>> = new Map();
const tree = state.treePicker[props.pickerId] || createTree();
- if (tree !== prevTree) {
- prevTree = tree;
- mappedProps = {
- disableRipple: true,
- items: getNodeChildrenIds('')(tree)
- .map(treePickerToTreeItems(tree))
- .map(item => addToItemsIdMap(item, itemsIdMap))
- .map(parentItem => ({
- ...parentItem,
- flatTree: true,
- items: flatTree(itemsIdMap, 2, parentItem.items || []),
- })),
- itemsMap: itemsIdMap,
- };
- }
- return mappedProps;
+ return {
+ disableRipple: true,
+ items: getNodeChildrenIds('')(tree)
+ .map(treePickerToTreeItems(tree, state.resources))
+ .map(item => addToItemsIdMap(item, itemsIdMap))
+ .map(parentItem => ({
+ ...parentItem,
+ flatTree: true,
+ items: flatTree(itemsIdMap, 2, parentItem.items || []),
+ })),
+ itemsMap: itemsIdMap,
+ };
};
-};
const mapDispatchToProps = (_: Dispatch, props: TreePickerProps<any>): Pick<TreeProps<any>, 'onContextMenu' | 'toggleItemOpen' | 'toggleItemActive' | 'toggleItemSelection'> => ({
onContextMenu: (event, item) => props.onContextMenu(event, item, props.pickerId),
toggleItemSelection: (event, item) => props.toggleItemSelection(event, item, props.pickerId),
});
-export const TreePicker = connect(memoizedMapStateToProps(), mapDispatchToProps)(Tree);
+export const TreePicker = connect(mapStateToProps, mapDispatchToProps)(Tree);
-const treePickerToTreeItems = (tree: Ttree<any>) =>
+const treePickerToTreeItems = (tree: Ttree<any>, resources: ResourcesState) =>
(id: string): TreeItem<any> => {
const node = getNode(id)(tree) || initTreeNode({ id: '', value: 'InvalidNode' });
const items = getNodeChildrenIds(node.id)(tree)
- .map(treePickerToTreeItems(tree));
+ .map(treePickerToTreeItems(tree, resources));
+ const resource = resources[node.id];
return {
active: node.active,
- data: node.value,
+ data: resource ? { ...resource, name: node.value.name || node.value } : undefined || node.value,
id: node.id,
items: items.length > 0 ? items : undefined,
open: node.expanded,