+
+ // Scroll to selected item whenever it changes, accepts selectedRef from props for recursive trees
+ const [cachedSelectedRef, setCachedRef] = useState<HTMLDivElement | null>(null)
+ const selectedRef = props.selectedRef || useCallback((node: HTMLDivElement | null) => {
+ if (node && node.scrollIntoView && node !== cachedSelectedRef) {
+ node.scrollIntoView({ behavior: "smooth", block: "center" });
+ }
+ setCachedRef(node);
+ }, [cachedSelectedRef]);
+
+ const { levelIndentation = 20, itemRightPadding = 20 } = props;
+ return <List className={list}>
+ {items && items.map((it: TreeItem<T>, idx: number) => {
+ if (isInFavoritesTree(it) && it.open === true && it.items && it.items.length) {
+ it = { ...it, items: it.items.filter(item => item.depth && item.depth < 3) }
+ }
+ return <div key={`item/${level}/${it.id}`}>
+ <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={(event) => props.onContextMenu(event, it)}>
+ {it.status === TreeItemStatus.PENDING ?
+ <CircularProgress size={10} className={loader} /> : null}
+ <i onClick={(e) => handleToggleItemOpen(it, e)}
+ className={toggableIconContainer}>
+ <ListItemIcon className={getToggableIconClassNames(it.open, it.active)}>
+ {getProperArrowAnimation(it.status, it.items!)}
+ </ListItemIcon>
+ </i>
+ {showSelection(it) && !useRadioButtons &&
+ <Checkbox
+ checked={it.selected}
+ indeterminate={!it.selected && it.indeterminate}
+ className={classes.checkbox}
+ color="primary"
+ onClick={handleCheckboxChange(it)} />}
+ {showSelection(it) && useRadioButtons &&
+ <Radio
+ checked={it.selected}
+ className={classes.checkbox}
+ color="primary" />}
+ <div className={renderContainer} ref={!!it.active ? selectedRef : undefined}>
+ {render(it, level)}
+ </div>
+ </ListItem>
+ {
+ it.open && it.items && it.items.length > 0 &&
+ it.flatTree ?
+ <FlatTree
+ it={it}
+ itemsMap={itemsMap}
+ showSelection={showSelection}
+ classes={props.classes}
+ useRadioButtons={useRadioButtons}
+ levelIndentation={levelIndentation}
+ handleCheckboxChange={handleCheckboxChange}
+ onContextMenu={props.onContextMenu}
+ handleToggleItemOpen={handleToggleItemOpen}
+ toggleItemActive={props.toggleItemActive}
+ getToggableIconClassNames={getToggableIconClassNames}
+ getProperArrowAnimation={getProperArrowAnimation}
+ selectedRef={selectedRef}
+ /> :
+ <Collapse in={it.open} timeout="auto" unmountOnExit>
+ <Tree
+ showSelection={props.showSelection}
+ items={it.items}
+ render={render}
+ disableRipple={disableRipple}
+ toggleItemOpen={toggleItemOpen}
+ toggleItemActive={toggleItemActive}
+ level={level + 1}
+ onContextMenu={props.onContextMenu}
+ toggleItemSelection={props.toggleItemSelection}
+ selectedRef={selectedRef}
+ />
+ </Collapse>
+ }
+ </div>;
+ })}
+ </List>;