haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-12 04:10:47 +00:00
Code Issues Releases Wiki Activity

[search] fixup & improvement(display at most 20 result items in the (#6930)

Browse Source 
* [search] fixup & improvement(display at most 20 result items in the
dialog & a possile 'More' link)

- display at most 20 search result items in the dialog
- if there are more than 20 result items, display a 'More' link in the
  bottom of the dialog. click the link, an independent search result
  page will be shown, with all the search parameters kept.

* [search] add the missing icon
This commit is contained in:
llj
2024-10-21 17:39:24 +08:00
committed by GitHub
parent 201da77dd1
commit 45903274d9
3 changed files with 41 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/search/search.js
View File

@@ -9,6 +9,7 @@ import { Utils } from '../../utils/utils';
import { isMac } from '../../utils/extra-attributes';
import toaster from '../toast';
import { SEARCH_DELAY_TIME, getValueLength } from './constant';
import Icon from '../icon';
const propTypes = {
repoID: PropTypes.string,
@@ -17,7 +18,7 @@ const propTypes = {
isPublic: PropTypes.bool,
};
const PER_PAGE = 10;
const PER_PAGE = 20;
const controlKey = isMac() ? '⌘' : 'Ctrl';
class Search extends Component {
@@ -336,20 +337,6 @@ class Search extends Component {
});
};
onResultListScroll = (e) => {
// Load less than 100 results
if (!this.state.hasMore || this.state.isLoading || this.state.resultItems.length > 100) {
return;
}
const listPadding = 20;
if (e.target.scrollTop + e.target.clientHeight + listPadding > this.searchResultListRef.current.clientHeight - 10) {
this.setState({isLoading: true}, () => {
this.source = seafileAPI.getSource();
this.sendRequest(this.queryData, this.source.token, this.state.page);
});
}
};
updateSearchPageURL(queryData) {
let params = '';
for (let key in queryData) {
@@ -427,7 +414,8 @@ class Search extends Component {
}
renderResults = (resultItems, isVisited) => {
const { highlightIndex } = this.state;
const { highlightIndex, hasMore, searchPageUrl } = this.state;
const results = (
<>
{isVisited && <h4 className="visited-search-results-title">{gettext('Search results visited recently')}</h4>}
@@ -445,6 +433,12 @@ class Search extends Component {
);
})}
</ul>
{(!this.props.isPublic && hasMore) &&
<div className="more-search-result mb-1 pl-2 d-flex align-items-center">
<Icon symbol="more-level" className="more-search-result-icon" />
<a href={searchPageUrl} className="more-search-result-text ml-1">{gettext('More')}</a>
</div>
}
</>
);
@@ -499,7 +493,6 @@ class Search extends Component {
</div>
<div
className="search-result-container dropdown-search-result-container"
onScroll={this.onResultListScroll}
ref={this.searchContainer}
>
{this.renderSearchResult()}
@@ -532,7 +525,7 @@ class Search extends Component {
<button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
}
</div>
<div className="search-result-container dropdown-search-result-container" onScroll={this.onResultListScroll}>
<div className="search-result-container dropdown-search-result-container">
{this.renderSearchResult()}
</div>
</div>