Add toggleItemSelection callback

[arvados.git] / src / views-components / projects-tree-picker / generic-projects-tree-picker.tsx

diff --git a/src/views-components/projects-tree-picker/generic-projects-tree-picker.tsx b/src/views-components/projects-tree-picker/generic-projects-tree-picker.tsx
index 1ddbe3ac6c0fc6813edad569032612087b50c084..77f831fafd10432fc1ec86513b1f9fa23cbdb646 100644 (file)
--- a/src/views-components/projects-tree-picker/generic-projects-tree-picker.tsx
+++ b/src/views-components/projects-tree-picker/generic-projects-tree-picker.tsx
@@ -25,18 +25,18 @@ export type ProjectsTreePickerItem = ProjectsTreePickerRootItem | GroupContentsR
 type PickedTreePickerProps = Pick<TreePickerProps<ProjectsTreePickerItem>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
 
 export interface ProjectsTreePickerDataProps {
-    pickerId: string;
     includeCollections?: boolean;
     includeFiles?: boolean;
     rootItemIcon: IconType;
+    showSelection?: boolean;
     loadRootItem: (item: TreeItem<ProjectsTreePickerRootItem>, pickerId: string, includeCollections?: boolean, inlcudeFiles?: boolean) => void;
 }
 
 export type ProjectsTreePickerProps = ProjectsTreePickerDataProps & Partial<PickedTreePickerProps>;
 
-const mapStateToProps = (_: any, { pickerId, rootItemIcon }: ProjectsTreePickerProps) => ({
+const mapStateToProps = (_: any, { rootItemIcon, showSelection }: ProjectsTreePickerProps) => ({
     render: renderTreeItem(rootItemIcon),
-    pickerId,
+    showSelection: isSelectionVisible(showSelection),
 });
 
 const mapDispatchToProps = (dispatch: Dispatch, { loadRootItem, includeCollections, includeFiles, ...props }: ProjectsTreePickerProps): PickedTreePickerProps => ({
@@ -63,8 +63,11 @@ const mapDispatchToProps = (dispatch: Dispatch, { loadRootItem, includeCollectio
             dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id, pickerId }));
         }
     },
-    toggleItemSelection: (_, { id }, pickerId) => {
-        dispatch<any>(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECTION({ id, pickerId }));
+    toggleItemSelection: (event, item, pickerId) => {
+        dispatch<any>(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECTION({ id: item.id, pickerId }));
+        if(props.toggleItemSelection){
+            props.toggleItemSelection(event, item, pickerId);
+        }
     },
 });
 
@@ -90,6 +93,17 @@ const getProjectPickerIcon = ({ data }: TreeItem<ProjectsTreePickerItem>, rootIc
     }
 };
 
+const isSelectionVisible = (shouldBeVisible?: boolean) =>
+    ({ status, items }: TreeItem<ProjectsTreePickerItem>): boolean => {
+        if (shouldBeVisible) {
+            if (items && items.length > 0) {
+                return items.every(isSelectionVisible(shouldBeVisible));
+            }
+            return status === TreeItemStatus.LOADED;
+        }
+        return false;
+    };
+
 const renderTreeItem = (rootItemIcon: IconType) => (item: TreeItem<ProjectResource>) =>
     <ListItemTextIcon
         icon={getProjectPickerIcon(item, rootItemIcon)}