- <div className={classes.leftPanel}>
- {
- leftData && !!leftData.length ?
- leftData.filter(({ type }) => type === 'directory').map(({ name, id, type }: any) => <div
- data-item="true"
- data-parent-path={name}
- className={classNames(classes.row, getActiveClass(name))}
- key={id}>{getItemIcon(type, getActiveClass(name))} <div className={classes.rowName}>{name}</div>
- </div>) : <div className={classes.row}>Loading...</div>
- }
+ <div className={classNames(classes.leftPanel, path.length > 1 ? classes.leftPanelVisible : classes.leftPanelHidden)}>
+ <Tooltip title="Go back" className={path.length > 1 ? classes.backButton : classes.backButtonHidden}>
+ <IconButton onClick={() => setPath([...path.slice(0, path.length -1)])}>
+ <BackIcon />
+ </IconButton>
+ </Tooltip>
+ <div className={path.length > 1 ? classes.searchWrapper : classes.searchWrapperHidden}>
+ <SearchInput label="Search" value={leftSearch} onSearch={setLeftSearch} />
+ </div>
+ <div className={classes.dataWrapper}>
+ {
+ leftData ?
+ <AutoSizer defaultWidth={0}>
+ {({ height, width }) => {
+ const filtered = leftData.filter(({ name }) => name.indexOf(leftSearch) > -1);
+
+ return !!filtered.length ? <FixedSizeList
+ height={height}
+ itemCount={filtered.length}
+ itemSize={35}
+ width={width}
+ >
+ {
+ ({ index, style }) => {
+ const { id, type, name } = filtered[index];
+
+ return <div
+ data-id={id}
+ style={style}
+ data-item="true"
+ data-type={type}
+ data-parent-path={name}
+ className={classNames(classes.row, getActiveClass(name))}
+ key={id}>
+ {getItemIcon(type, getActiveClass(name))}
+ <div className={classes.rowName}>
+ {name}
+ </div>
+ {
+ getActiveClass(name) ? <SidePanelRightArrowIcon
+ style={{ display: 'inline', marginTop: '5px', marginLeft: '5px' }} /> : null
+ }
+ </div>;
+ }
+ }
+ </FixedSizeList> : <div className={classes.rowEmpty}>No directories available</div>
+ }}
+ </AutoSizer> : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div>
+ }
+
+ </div>