//
// 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 { ArvadosTheme } from '~/common/custom-theme';
+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';
| 'iconOpen'
| 'toggableIcon'
| 'checkbox'
+ | 'virtualFileTree'
| 'virtualizedList';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
list: {
padding: '3px 0px',
},
+ virtualFileTree: {
+ "&:last-child": {
+ paddingBottom: 20
+ }
+ },
virtualizedList: {
height: '200px',
},
// For some reason, on TSX files it isn't accepted just one generic param, so
// I'm using <T, _> as a workaround.
+// 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 } = classes;
+ const { listItem, loader, toggableIconContainer, renderContainer, virtualFileTree } = classes;
const { levelIndentation = 20, itemRightPadding = 20 } = treeProps;
const showSelection = typeof treeProps.showSelection === 'function'
: undefined;
};
- return <div data-cy='virtual-file-tree' style={style}>
+ return <div className={virtualFileTree} data-cy='virtual-file-tree' style={style}>
<ListItem button className={listItem}
style={{
paddingLeft: (level + 1) * levelIndentation,
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}
class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
render(): ReactElement<any> {
const { items, render } = this.props;
-
return <AutoSizer>
{({ height, width }) => {
return VirtualList(height, width, items || [], render, this.props);