export interface TreeProps<T> {
disableRipple?: boolean;
+ currentItemUuid?: string;
items?: Array<TreeItem<T>>;
level?: number;
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
render(): ReactElement<any> {
const level = this.props.level ? this.props.level : 0;
- const { classes, render, toggleItemOpen, items, toggleItemActive, onContextMenu, disableRipple } = this.props;
+ const { classes, render, toggleItemOpen, items, toggleItemActive, onContextMenu, disableRipple, currentItemUuid } = this.props;
const { list, listItem, loader, toggableIconContainer, renderContainer } = classes;
const isCheckboxVisible = typeof this.props.showSelection === 'function'
? this.props.showSelection
return <List className={list}>
{items && items.map((it: TreeItem<T>, idx: number) =>
<div key={`item/${level}/${idx}`}>
- <ListItem button className={listItem}
- style={{
+ <ListItem button className={listItem}
+ style={{
paddingLeft: (level + 1) * levelIndentation,
paddingRight: itemRightPadding,
}}
disableRipple={disableRipple}
onClick={event => toggleItemActive(event, it)}
+ selected={isCheckboxVisible(it) && it.id === currentItemUuid}
onContextMenu={this.handleRowContextMenu(it)}>
{it.status === TreeItemStatus.PENDING ?
<CircularProgress size={10} className={loader} /> : null}
{this.getProperArrowAnimation(it.status, it.items!)}
</ListItemIcon>
</i>
- { isCheckboxVisible(it) &&
+ {isCheckboxVisible(it) &&
<Checkbox
checked={it.selected}
className={classes.checkbox}