//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
+import 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 { ArvadosTheme } from 'common/custom-theme';
+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'
| 'iconOpen'
| 'toggableIcon'
| 'checkbox'
+ | 'virtualFileTree'
| 'virtualizedList';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
list: {
padding: '3px 0px',
},
+ virtualFileTree: {
+ "&:last-child": {
+ paddingBottom: 20
+ }
+ },
virtualizedList: {
height: '200px',
},
}
});
-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) =>
+// eslint-disable-next-line
+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, virtualFileTree } = 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 className={virtualFileTree} 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;
+
+// eslint-disable-next-line
+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)(
class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
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
projects / arvados-workbench2.git / blobdiff