//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
-import * as classnames from "classnames";
+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';
-import { min } from 'lodash';
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',
},
// 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 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}
{Row(items, render, treeProps)}
</FixedSizeList>;
-export const VirtualTree = (maxElements: number) => withStyles(styles)(
+export const VirtualTree = withStyles(styles)(
class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
render(): ReactElement<any> {
const { items, render } = this.props;
-
- // Virtual list viewport's maximum height
- const itemsQty = items && items.length || 0;
- const viewportHeight = min([itemsQty, maxElements])! * itemSize;
-
- return <div style={{height: viewportHeight}}><AutoSizer>
+ return <AutoSizer>
{({ height, width }) => {
return VirtualList(height, width, items || [], render, this.props);
}}
- </AutoSizer></div>;
+ </AutoSizer>;
}
}
);