X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/e92207c912aed73a07340b5fb2a9e2cb23e1da5f..c859c9d9325e2ed86d5d7b067e1209e73ee81251:/src/components/tree/virtual-tree.tsx?ds=sidebyside

diff --git a/src/components/tree/virtual-tree.tsx b/src/components/tree/virtual-tree.tsx
index 4615db4f..54938969 100644
--- a/src/components/tree/virtual-tree.tsx
+++ b/src/components/tree/virtual-tree.tsx
@@ -3,15 +3,16 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
+import classnames from "classnames";
 import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
 import { ReactElement } from "react";
 import { FixedSizeList, ListChildComponentProps } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
-// import {FixedSizeTree as Tree} from 'react-vtree';
 
 import { ArvadosTheme } from '~/common/custom-theme';
-import { TreeItem } from './tree';
-// import { FileTreeData } from '../file-tree/file-tree-data';
+import { TreeItem, TreeProps, TreeItemStatus } from './tree';
+import { ListItem, Radio, Checkbox, CircularProgress, ListItemIcon } from '@material-ui/core';
+import { SidePanelRightArrowIcon } from '../icon/icon';
 
 type CssRules = 'list'
     | 'listItem'
@@ -70,104 +71,111 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-export interface TreeProps<T> {
-    disableRipple?: boolean;
-    currentItemUuid?: string;
-    items?: Array<TreeItem<T>>;
+export interface VirtualTreeItem<T> extends TreeItem<T> {
+    itemCount?: number;
     level?: number;
-    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
-    render: (item: TreeItem<T>, level?: number) => ReactElement<{}>;
-    showSelection?: boolean | ((item: TreeItem<T>) => boolean);
-    levelIndentation?: number;
-    itemRightPadding?: number;
-    toggleItemActive: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
-    toggleItemOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
-    toggleItemSelection?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
-
-    /**
-     * When set to true use radio buttons instead of checkboxes for item selection.
-     * This does not guarantee radio group behavior (i.e item mutual exclusivity).
-     * Any item selection logic must be done in the toggleItemActive callback prop.
-     */
-    useRadioButtons?: boolean;
 }
 
-// export const RowA = <T, _>(items: TreeItem<T>[], render:any) => (index: number) => {
-//     return <div>
-//         {render(items[index])}
-//     </div>;
-// };
-
 // For some reason, on TSX files it isn't accepted just one generic param, so
 // I'm using <T, _> as a workaround.
-export const Row = <T, _>(items: TreeItem<T>[], render: any) => (props: React.PropsWithChildren<ListChildComponentProps>) => {
-    const { index, style } = props;
-    const level = items[index].level || 0;
-    const levelIndentation = 20;
-    return <div style={style}>
-        <div style={{ paddingLeft: (level + 1) * levelIndentation,}}>
-            {typeof render === 'function'
-                ? items[index] && render(items[index]) || ''
-                : 'whoops'}
-        </div>
-    </div>;
-    // <div style={style} key={`item/${level}/${idx}`}>
-    //     <ListItem button className={listItem}
-    //         style={{
-    //             paddingLeft: (level + 1) * levelIndentation,
-    //             paddingRight: itemRightPadding,
-    //         }}
-    //         disableRipple={disableRipple}
-    //         onClick={event => toggleItemActive(event, it)}
-    //         selected={showSelection(it) && it.id === currentItemUuid}
-    //         onContextMenu={this.handleRowContextMenu(it)}>
-    //         {it.status === TreeItemStatus.PENDING ?
-    //             <CircularProgress size={10} className={loader} /> : null}
-    //         <i onClick={this.handleToggleItemOpen(it)}
-    //             className={toggableIconContainer}>
-    //             <ListItemIcon className={this.getToggableIconClassNames(it.open, it.active)}>
-    //                 {this.getProperArrowAnimation(it.status, it.items!)}
-    //             </ListItemIcon>
-    //         </i>
-    //         {showSelection(it) && !useRadioButtons &&
-    //             <Checkbox
-    //                 checked={it.selected}
-    //                 className={classes.checkbox}
-    //                 color="primary"
-    //                 onClick={this.handleCheckboxChange(it)} />}
-    //         {showSelection(it) && useRadioButtons &&
-    //             <Radio
-    //                 checked={it.selected}
-    //                 className={classes.checkbox}
-    //                 color="primary" />}
-    //         <div className={renderContainer}>
-    //             {render(it, level)}
-    //         </div>
-    //     </ListItem>
-    //     {it.items && it.items.length > 0 &&
-    //         <Collapse in={it.open} timeout="auto" unmountOnExit>
-    //             <Tree
-    //                 showSelection={this.props.showSelection}
-    //                 items={it.items}
-    //                 render={render}
-    //                 disableRipple={disableRipple}
-    //                 toggleItemOpen={toggleItemOpen}
-    //                 toggleItemActive={toggleItemActive}
-    //                 level={level + 1}
-    //                 onContextMenu={onContextMenu}
-    //                 toggleItemSelection={this.props.toggleItemSelection} />
-    //         </Collapse>}
-    // </div>
-};
-
-export const VirtualList = <T, _>(height: number, width: number, items: TreeItem<T>[], render: any) =>
+export const Row =  <T, _>(itemList: VirtualTreeItem<T>[], render: any, treeProps: TreeProps<T>) => withStyles(styles)(
+    (props: React.PropsWithChildren<ListChildComponentProps> & WithStyles<CssRules>) => {
+        const { index, style, classes } = props;
+        const it = itemList[index];
+        const level = it.level || 0;
+        const { toggleItemActive, disableRipple, currentItemUuid, useRadioButtons } = treeProps;
+        const { listItem, loader, toggableIconContainer, renderContainer } = classes;
+        const { levelIndentation = 20, itemRightPadding = 20 } = treeProps;
+
+        const showSelection = typeof treeProps.showSelection === 'function'
+            ? treeProps.showSelection
+            : () => treeProps.showSelection ? true : false;
+
+        const handleRowContextMenu = (item: VirtualTreeItem<T>) =>
+            (event: React.MouseEvent<HTMLElement>) => {
+                treeProps.onContextMenu(event, item);
+            };
+
+        const handleToggleItemOpen = (item: VirtualTreeItem<T>) =>
+            (event: React.MouseEvent<HTMLElement>) => {
+                event.stopPropagation();
+                treeProps.toggleItemOpen(event, item);
+            };
+
+        const getToggableIconClassNames = (isOpen?: boolean, isActive?: boolean) => {
+            const { iconOpen, iconClose, active, toggableIcon } = props.classes;
+            return classnames(toggableIcon, {
+                [iconOpen]: isOpen,
+                [iconClose]: !isOpen,
+                [active]: isActive
+            });
+        };
+
+        const isSidePanelIconNotNeeded = (status: string, itemCount: number) => {
+            return status === TreeItemStatus.PENDING ||
+                (status === TreeItemStatus.LOADED && itemCount === 0);
+        };
+
+        const getProperArrowAnimation = (status: string, itemCount: number) => {
+            return isSidePanelIconNotNeeded(status, itemCount) ? <span /> : <SidePanelRightArrowIcon style={{ fontSize: '14px' }} />;
+        };
+
+        const handleCheckboxChange = (item: VirtualTreeItem<T>) => {
+            const { toggleItemSelection } = treeProps;
+            return toggleItemSelection
+                ? (event: React.MouseEvent<HTMLElement>) => {
+                    event.stopPropagation();
+                    toggleItemSelection(event, item);
+                }
+                : undefined;
+        };
+
+        return <div data-cy='virtual-file-tree' style={style}>
+            <ListItem button className={listItem}
+                style={{
+                    paddingLeft: (level + 1) * levelIndentation,
+                    paddingRight: itemRightPadding,
+                }}
+                disableRipple={disableRipple}
+                onClick={event => toggleItemActive(event, it)}
+                selected={showSelection(it) && it.id === currentItemUuid}
+                onContextMenu={handleRowContextMenu(it)}>
+                {it.status === TreeItemStatus.PENDING ?
+                    <CircularProgress size={10} className={loader} /> : null}
+                <i onClick={handleToggleItemOpen(it)}
+                    className={toggableIconContainer}>
+                    <ListItemIcon className={getToggableIconClassNames(it.open, it.active)}>
+                        {getProperArrowAnimation(it.status, it.itemCount!)}
+                    </ListItemIcon>
+                </i>
+                {showSelection(it) && !useRadioButtons &&
+                    <Checkbox
+                        checked={it.selected}
+                        className={classes.checkbox}
+                        color="primary"
+                        onClick={handleCheckboxChange(it)} />}
+                {showSelection(it) && useRadioButtons &&
+                    <Radio
+                        checked={it.selected}
+                        className={classes.checkbox}
+                        color="primary" />}
+                <div className={renderContainer}>
+                    {render(it, level)}
+                </div>
+            </ListItem>
+        </div>;
+    });
+
+const itemSize = 30;
+
+export const VirtualList = <T, _>(height: number, width: number, items: VirtualTreeItem<T>[], render: any, treeProps: TreeProps<T>) =>
     <FixedSizeList
         height={height}
         itemCount={items.length}
-        itemSize={30}
+        itemSize={itemSize}
         width={width}
     >
-        {Row(items, render)}
+        {Row(items, render, treeProps)}
     </FixedSizeList>;
 
 export const VirtualTree = withStyles(styles)(
@@ -175,77 +183,11 @@ export const VirtualTree = withStyles(styles)(
         render(): ReactElement<any> {
             const { items, render } = this.props;
 
-            return <div className={this.props.classes.virtualizedList}><AutoSizer>
+            return <AutoSizer>
                 {({ height, width }) => {
-                    return VirtualList(height, width, items || [], render);
+                    return VirtualList(height, width, items || [], render, this.props);
                 }}
-            </AutoSizer></div>;
+            </AutoSizer>;
         }
     }
 );
-
-// const treeWalkerWithTree = (tree: Array<TreeItem<FileTreeData>>) => function* treeWalker(refresh: any) {
-//     const stack = [];
-
-//     // Remember all the necessary data of the first node in the stack.
-//     stack.push({
-//       nestingLevel: 0,
-//       node: tree,
-//     });
-
-//     // Walk through the tree until we have no nodes available.
-//     while (stack.length !== 0) {
-//         const {
-//             node: {items = [], id, name},
-//             nestingLevel,
-//         } = stack.pop()!;
-
-//         // Here we are sending the information about the node to the Tree component
-//         // and receive an information about the openness state from it. The
-//         // `refresh` parameter tells us if the full update of the tree is requested;
-//         // basing on it we decide to return the full node data or only the node
-//         // id to update the nodes order.
-//         const isOpened = yield refresh
-//             ? {
-//                 id,
-//                 isLeaf: items.length === 0,
-//                 isOpenByDefault: true,
-//                 name,
-//                 nestingLevel,
-//             }
-//             : id;
-
-//         // Basing on the node openness state we are deciding if we need to render
-//         // the child nodes (if they exist).
-//         if (children.length !== 0 && isOpened) {
-//             // Since it is a stack structure, we need to put nodes we want to render
-//             // first to the end of the stack.
-//             for (let i = children.length - 1; i >= 0; i--) {
-//                 stack.push({
-//                     nestingLevel: nestingLevel + 1,
-//                     node: children[i],
-//                 });
-//             }
-//         }
-//     }
-// };
-
-// // Node component receives all the data we created in the `treeWalker` +
-// // internal openness state (`isOpen`), function to change internal openness
-// // state (`toggle`) and `style` parameter that should be added to the root div.
-// const Node = ({data: {isLeaf, name}, isOpen, style, toggle}) => (
-//     <div style={style}>
-//         {!isLeaf && (
-//         <button type="button" onClick={toggle}>
-//             {isOpen ? '-' : '+'}
-//         </button>
-//         )}
-//         <div>{name}</div>
-//     </div>
-// );
-
-// export const Example = () => (
-//     <Tree treeWalker={treeWalker} itemSize={30} height={150} width={300}>
-//         {Node}
-//     </Tree>
-// );
\ No newline at end of file