michael.reber/rclone-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix filebrowser hight and improve search speed

Browse Source 
Used settimeout to prevent searching on every keystroke
This commit is contained in:
controlol 2021-11-01 22:26:31 +01:00
parent dfc83360e5
commit dbd7956491
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/fileBrowser.jsx
View File

@ -44,13 +44,13 @@ const FBContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: inherit;
position: relative; position: relative;
` `
// bunch of styled components // bunch of styled components
const BrowserWrapper = styled.div` const BrowserWrapper = styled.div`
height: 100%; height: inherit;
width: 100%; width: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
@ -219,6 +219,7 @@ class FileBrowser extends Component {
this.backListener = undefined this.backListener = undefined
this.handleInputChange = this.handleInputChange.bind(this) this.handleInputChange = this.handleInputChange.bind(this)
this.searchTimeout = undefined
} }
componentDidMount = () => { componentDidMount = () => {
@ -257,12 +258,15 @@ class FileBrowser extends Component {
// used to filter the files // used to filter the files
handleInputChange({target}) { handleInputChange({target}) {
const value = target.type === 'checkbox' ? target.checked : target.value clearTimeout(this.searchTimeout)
const name = target.name
this.setState({ [name]: value }) const value = target.type === 'checkbox' ? target.checked : target.value
this.searchTimeout = setTimeout(this.doSearch, 200, value.toLowerCase())
} }
doSearch = filter => this.setState({ filter })
// change the way files should be ordered // change the way files should be ordered
updateOrder = orderBy => { updateOrder = orderBy => {
if (this.state.orderBy === orderBy) { if (this.state.orderBy === orderBy) {
@ -396,6 +400,8 @@ class FileBrowser extends Component {
else files = this.state.files else files = this.state.files
return files return files
// apply search filter
.filter(v => v.Name?.toLowerCase().indexOf(this.state.filter) !== -1)
// sort by name // sort by name
.sort((a,b) => this.state.orderBy === "name" ? this.state.orderAscending ? a.Name.localeCompare(b.Name, 'nl', { sensitivity: 'base' }) : b.Name.localeCompare(a.Name, 'nl', { sensitivity: 'base' }) : 0) .sort((a,b) => this.state.orderBy === "name" ? this.state.orderAscending ? a.Name.localeCompare(b.Name, 'nl', { sensitivity: 'base' }) : b.Name.localeCompare(a.Name, 'nl', { sensitivity: 'base' }) : 0)
// // sort by modified date // // sort by modified date
@ -404,8 +410,6 @@ class FileBrowser extends Component {
.sort((a,b) => this.state.orderBy === "size" ? this.state.orderAscending ? a.Size - b.Size : b.Size - a.Size : 0) .sort((a,b) => this.state.orderBy === "size" ? this.state.orderAscending ? a.Size - b.Size : b.Size - a.Size : 0)
// // sort folders to top // // sort folders to top
.sort((a,b) => (b.IsDir ? 1 : 0) - (a.IsDir ? 1 : 0)) .sort((a,b) => (b.IsDir ? 1 : 0) - (a.IsDir ? 1 : 0))
// apply search filter
.filter(v => v.Name?.includes(this.state.filter))
.map(v => ( .map(v => (
<Fragment key={v.Name + "file"}> <Fragment key={v.Name + "file"}>
{ this.renderImage(v.MimeType, v.Name) } { this.renderImage(v.MimeType, v.Name) }
@ -453,7 +457,7 @@ class FileBrowser extends Component {
</div> </div>
<div> <div>
<SearchLabel htmlFor="filterFiles" style={{ textAlign: "end" }} > Search </SearchLabel> <SearchLabel htmlFor="filterFiles" style={{ textAlign: "end" }} > Search </SearchLabel>
<SearchInput name="filter" id="filterFiles" type="text" placeholder="search" value={this.state.filter} autoComplete="off" onChange={this.handleInputChange} /> <SearchInput name="filter" id="filterFiles" type="text" placeholder="search" initialValue="" autoComplete="off" onChange={this.handleInputChange} />
</div> </div>
<GridFileBrowser> <GridFileBrowser>

4
src/components/fileBrowser.styled.js
View File

@ -25,7 +25,7 @@ export const Label = styled.label`
export const FileBrowsersContainer = styled.div` export const FileBrowsersContainer = styled.div`
display: flex; display: flex;
gap: 0 1rem; gap: 0 1rem;
height: calc(100% - 7rem); height: calc(94vh - 9rem);
` `
export const FileBrowserWrapper = styled.div` export const FileBrowserWrapper = styled.div`
@ -33,7 +33,7 @@ export const FileBrowserWrapper = styled.div`
flex-direction: column; flex-direction: column;
gap: .5rem 0; gap: .5rem 0;
width: 100%; width: 100%;
height: 100%; height: inherit;
` `
export const FileBrowserRemotes = styled.div` export const FileBrowserRemotes = styled.div`