-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>) =>