src/views-components/collection-panel-files/collection-panel-files.ts

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import { connect } from "react-redux";
   6 import { CollectionPanelFiles as Component, CollectionPanelFilesProps } from "../../components/collection-panel-files/collection-panel-files";
   7 import { RootState } from "../../store/store";
   8 import { TreeItemStatus, TreeItem } from "../../components/tree/tree";
   9 import { CollectionPanelFilesState, CollectionPanelDirectory, CollectionPanelFile } from "../../store/collection-panel/collection-panel-files/collection-panel-files-state";
  10 import { FileTreeData } from "../../components/file-tree/file-tree-data";
  11 import { Dispatch } from "redux";
  12 import { collectionPanelFilesAction } from "../../store/collection-panel/collection-panel-files/collection-panel-files-actions";
  13 import { contextMenuActions } from "../../store/context-menu/context-menu-actions";
  14 import { ContextMenuKind } from "../context-menu/context-menu";
  15 import { Tree, getNodeChildren, getNode } from "../../models/tree";
  16 import { CollectionFileType } from "../../models/collection-file";
  17
  18 const memoizedMapStateToProps = () => {
  19     let prevState: CollectionPanelFilesState;
  20     let prevTree: Array<TreeItem<FileTreeData>>;
  21
  22     return (state: RootState): Pick<CollectionPanelFilesProps, "items"> => {
  23         if (prevState !== state.collectionPanelFiles) {
  24             prevState = state.collectionPanelFiles;
  25             prevTree = getNodeChildren('')(state.collectionPanelFiles)
  26                 .map(collectionItemToTreeItem(state.collectionPanelFiles));
  27         }
  28         return {
  29             items: prevTree
  30         };
  31     };
  32 };
  33
  34 const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
  35     onCollapseToggle: (id) => {
  36         dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_COLLAPSE({ id }));
  37     },
  38     onSelectionToggle: (event, item) => {
  39         dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_SELECTION({ id: item.id }));
  40     },
  41     onItemMenuOpen: (event, item) => {
  42         event.preventDefault();
  43         dispatch(contextMenuActions.OPEN_CONTEXT_MENU({
  44             position: { x: event.clientX, y: event.clientY },
  45             resource: { kind: ContextMenuKind.COLLECTION_FILES_ITEM, name: item.data.name, uuid: item.id }
  46         }));
  47     },
  48     onOptionsMenuOpen: (event) =>
  49         dispatch(contextMenuActions.OPEN_CONTEXT_MENU({
  50             position: { x: event.clientX, y: event.clientY },
  51             resource: { kind: ContextMenuKind.COLLECTION_FILES, name: '', uuid: '' }
  52         }))
  53 });
  54
  55
  56 export const CollectionPanelFiles = connect(memoizedMapStateToProps(), mapDispatchToProps)(Component);
  57
  58 const collectionItemToTreeItem = (tree: Tree<CollectionPanelDirectory | CollectionPanelFile>) =>
  59     (id: string): TreeItem<FileTreeData> => {
  60         const node = getNode(id)(tree) || {
  61             id: '',
  62             children: [],
  63             parent: '',
  64             value: {
  65                 name: 'Invalid node',
  66                 type: CollectionFileType.DIRECTORY,
  67                 selected: false,
  68                 collapsed: true
  69             }
  70         };
  71         return {
  72             active: false,
  73             data: {
  74                 name: node.value.name,
  75                 size: node.value.type === CollectionFileType.FILE ? node.value.size : undefined,
  76                 type: node.value.type
  77             },
  78             id: node.id,
  79             items: getNodeChildren(node.id)(tree)
  80                 .map(collectionItemToTreeItem(tree)),
  81             open: node.value.type === CollectionFileType.DIRECTORY ? !node.value.collapsed : false,
  82             selected: node.value.selected,
  83             status: TreeItemStatus.LOADED
  84         };
  85     };