- {
- rightData && !isLoading ?
- rightData.map(({ name, id, type }: any) => <div
- data-id={id}
- data-item="true"
- data-type={type}
- data-subfolder-path={name}
- className={classes.row} key={id}>
- <Checkbox
- color="primary"
- className={classes.rowSelection}
- checked={collectionPanelFiles[id] ? collectionPanelFiles[id].value.selected : false}
- />
- {getItemIcon(type, null)} <div className={classes.rowName}>
- {name}
- </div>
- </div>) : <div className={classes.row}>Loading...</div>
- }
+ <div className={classes.searchWrapper}>
+ <SearchInput label="Search" value={rightSearch} onSearch={setRightSearch} />
+ </div>
+ <div className={classes.dataWrapper}>
+ {
+ rightData && !isLoading ?
+ <AutoSizer defaultHeight={500}>
+ {({ height, width }) => {
+ const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
+
+ return !!filtered.length ? <FixedSizeList
+ height={height}
+ itemCount={filtered.length}
+ itemSize={35}
+ width={width}
+ >
+ {
+ ({ index, style }) => {
+ const { id, type, name } = filtered[index];
+
+ return <div
+ style={style}
+ data-id={id}
+ data-item="true"
+ data-type={type}
+ data-subfolder-path={name}
+ className={classes.row} key={id}>
+ <Checkbox
+ color="primary"
+ className={classes.rowSelection}
+ checked={collectionPanelFiles[id] ? collectionPanelFiles[id].value.selected : false}
+ />
+ {getItemIcon(type, null)} <div className={classes.rowName}>
+ {name}
+ </div>
+ </div>
+ }
+ }
+ </FixedSizeList> : <div className={classes.rowEmpty}>No data available</div>
+ }}
+ </AutoSizer> : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div>
+ }
+ </div>