src/views-components/side-panel-tree/side-panel-tree.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { Dispatch } from "redux";
   7 import { connect } from "react-redux";
   8 import { TreePicker, TreePickerProps } from "../tree-picker/tree-picker";
   9 import { TreeItem } from "~/components/tree/tree";
  10 import { ProjectResource } from "~/models/project";
  11 import { ListItemTextIcon } from "~/components/list-item-text-icon/list-item-text-icon";
  12 import { ProjectIcon, FavoriteIcon, ProjectsIcon, ShareMeIcon, TrashIcon } from '~/components/icon/icon';
  13 import { WorkflowIcon } from '~/components/icon/icon';
  14 import { activateSidePanelTreeItem, toggleSidePanelTreeItemCollapse, SIDE_PANEL_TREE, SidePanelTreeCategory } from '~/store/side-panel-tree/side-panel-tree-actions';
  15 import { openSidePanelContextMenu } from '~/store/context-menu/context-menu-actions';
  16 import { noop } from 'lodash';
  17 export interface SidePanelTreeProps {
  18     onItemActivation: (id: string) => void;
  19     sidePanelProgress?: boolean;
  20 }
  21
  22 type SidePanelTreeActionProps = Pick<TreePickerProps<ProjectResource | string>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
  23
  24 const mapDispatchToProps = (dispatch: Dispatch, props: SidePanelTreeProps): SidePanelTreeActionProps => ({
  25     onContextMenu: (event, { id }) => {
  26         dispatch<any>(openSidePanelContextMenu(event, id));
  27     },
  28     toggleItemActive: (_, { id }) => {
  29         dispatch<any>(activateSidePanelTreeItem(id));
  30         props.onItemActivation(id);
  31     },
  32     toggleItemOpen: (_, { id }) => {
  33         dispatch<any>(toggleSidePanelTreeItemCollapse(id));
  34     },
  35     toggleItemSelection: noop,
  36 });
  37
  38 export const SidePanelTree = connect(undefined, mapDispatchToProps)(
  39     (props: SidePanelTreeActionProps) =>
  40         <TreePicker {...props} render={renderSidePanelItem} pickerId={SIDE_PANEL_TREE} />);
  41
  42 const renderSidePanelItem = (item: TreeItem<ProjectResource>) =>
  43     <ListItemTextIcon
  44         icon={getProjectPickerIcon(item)}
  45         name={typeof item.data === 'string' ? item.data : item.data.name}
  46         isActive={item.active}
  47         hasMargin={true}
  48         iconSize={1.25}
  49     />;
  50
  51 const getProjectPickerIcon = (item: TreeItem<ProjectResource | string>) =>
  52     typeof item.data === 'string'
  53         ? getSidePanelIcon(item.data)
  54         : ProjectIcon;
  55
  56 const getSidePanelIcon = (category: string) => {
  57     switch (category) {
  58         case SidePanelTreeCategory.FAVORITES:
  59             return FavoriteIcon;
  60         case SidePanelTreeCategory.PROJECTS:
  61             return ProjectsIcon;
  62         case SidePanelTreeCategory.SHARED_WITH_ME:
  63             return ShareMeIcon;
  64         case SidePanelTreeCategory.TRASH:
  65             return TrashIcon;
  66         case SidePanelTreeCategory.WORKFLOWS:
  67             return WorkflowIcon;
  68         default:
  69             return ProjectIcon;
  70     }
  71 };