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 { CollectionPanelItem, CollectionPanelFilesState } 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
  16 const mapStateToProps = () => {
  17     let lastState: CollectionPanelFilesState;
  18     let lastTree: Array<TreeItem<FileTreeData>>;
  19
  20     return (state: RootState): Pick<CollectionPanelFilesProps, "items"> => {
  21         if (lastState !== state.collectionPanelFiles) {
  22             lastState = state.collectionPanelFiles;
  23             lastTree = state.collectionPanelFiles
  24                 .filter(item => item.parentId === '')
  25                 .map(collectionItemToTreeItem(state.collectionPanelFiles));
  26         }
  27         return {
  28             items: lastTree
  29         };
  30     };
  31 };
  32
  33 const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
  34     onCollapseToggle: (id) => {
  35         dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_COLLAPSE({ id }));
  36     },
  37     onSelectionToggle: (event, item) => {
  38         dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_SELECTION({ id: item.id }));
  39     },
  40     onItemMenuOpen: (event, item) => {
  41         event.preventDefault();
  42         dispatch(contextMenuActions.OPEN_CONTEXT_MENU({
  43             position: { x: event.clientX, y: event.clientY },
  44             resource: { kind: ContextMenuKind.COLLECTION_FILES_ITEM, name: item.data.name, uuid: item.id }
  45         }));
  46     },
  47     onOptionsMenuOpen: (event) =>
  48         dispatch(contextMenuActions.OPEN_CONTEXT_MENU({
  49             position: { x: event.clientX, y: event.clientY },
  50             resource: { kind: ContextMenuKind.COLLECTION_FILES, name: '', uuid: '' }
  51         }))
  52 });
  53
  54
  55 export const CollectionPanelFiles = connect(mapStateToProps(), mapDispatchToProps)(Component);
  56
  57 const collectionItemToTreeItem = (items: CollectionPanelItem[]) => (item: CollectionPanelItem): TreeItem<FileTreeData> => {
  58     return {
  59         active: false,
  60         data: {
  61             name: item.name,
  62             size: item.type === 'file' ? item.size : undefined,
  63             type: item.type
  64         },
  65         id: item.id,
  66         items: items
  67             .filter(i => i.parentId === item.id)
  68             .map(collectionItemToTreeItem(items)),
  69         open: item.type === 'directory' ? !item.collapsed : false,
  70         selected: item.selected,
  71         status: TreeItemStatus.LOADED
  72     };
  73 };