{searchInfo.length !== 0 && (
diff --git a/frontend/src/components/file-chooser/recently-used-list-item.js b/frontend/src/components/file-chooser/recently-used-list-item.js
index 2c79bcfde0..d73f2bebab 100644
--- a/frontend/src/components/file-chooser/recently-used-list-item.js
+++ b/frontend/src/components/file-chooser/recently-used-list-item.js
@@ -1,7 +1,7 @@
import React from 'react';
const RecentlyUsedListItem = ({ item, isSelected, onItemClick }) => {
- const title = item.path.split('/').pop();
+ const title = item.path === '/' ? item.path : item.path.split('/').pop();
const handleItemClick = () => {
onItemClick(item.repo, item.path);
diff --git a/frontend/src/components/file-chooser/repo-list-item.js b/frontend/src/components/file-chooser/repo-list-item.js
index b1b4b69c1a..d59eebfb7f 100644
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/frontend/src/components/file-chooser/repo-list-item.js
@@ -35,6 +35,7 @@ class RepoListItem extends React.Component {
hasLoaded: false,
isMounted: false,
};
+ this.loadRepoTimer = null;
}
componentDidMount() {
@@ -45,17 +46,16 @@ class RepoListItem extends React.Component {
const { repoID, filePath } = selectedItemInfo || {};
if (repoID && repoID === repo.repo_id) {
this.loadRepoDirentList(repo);
- setTimeout(() => {
+ this.loadRepoTimer = setTimeout(() => {
this.setState({ isShowChildren: true });
this.loadNodeAndParentsByPath(repoID, filePath);
}, 0);
return;
}
- // the repo is current repo and currentPath is not '/'
- if (isCurrentRepo && !repoID) {
+ if (repo.repo_id === this.props.selectedRepo.repo_id || isCurrentRepo) {
this.loadRepoDirentList(repo);
- setTimeout(() => {
+ this.loadRepoTimer = setTimeout(() => {
const repoID = repo.repo_id;
if (isCurrentRepo && currentPath && currentPath != '/') {
const expandNode = true;
@@ -65,38 +65,20 @@ class RepoListItem extends React.Component {
}
}
- componentDidUpdate(prevProps) {
- if (prevProps.isBrowsing && !this.props.isBrowsing) {
- this.setState({
- treeData: treeHelper.buildTree(),
- isShowChildren: this.props.initToShowChildren,
- });
-
- const { isCurrentRepo, currentPath, repo, selectedItemInfo } = this.props;
- const { repoID } = selectedItemInfo || {};
-
- if (isCurrentRepo && !repoID) {
- this.loadRepoDirentList(repo);
- setTimeout(() => {
- const repoID = repo.repo_id;
- if (isCurrentRepo && currentPath && currentPath != '/') {
- const expandNode = true;
- this.loadNodeAndParentsByPath(repoID, currentPath, expandNode);
- }
- }, 0);
- }
- }
-
- }
-
componentWillUnmount() {
- this.setState({ isMounted: false });
+ this.clearLoadRepoTimer();
+ this.setState({ isMounted: false, hasLoaded: false });
}
+ clearLoadRepoTimer = () => {
+ if (!this.loadRepoTimer) return;
+ clearTimeout(this.loadRepoTimer);
+ this.loadRepoTimer = null;
+ };
+
loadRepoDirentList = async (repo) => {
const { hasLoaded } = this.state;
if (hasLoaded) return;
-
const repoID = repo.repo_id;
try {
diff --git a/frontend/src/components/file-chooser/repo-list-view.js b/frontend/src/components/file-chooser/repo-list-view.js
index a41ea90562..54d8ab1370 100644
--- a/frontend/src/components/file-chooser/repo-list-view.js
+++ b/frontend/src/components/file-chooser/repo-list-view.js
@@ -19,6 +19,20 @@ const propTypes = {
browsingPath: PropTypes.string,
};
+const defaultProps = {
+ currentRepoInfo: null,
+ isShowFile: false,
+ repo: null,
+ repoList: [],
+ selectedRepo: null,
+ selectedPath: '',
+ fileSuffixes: [],
+ selectedItemInfo: null,
+ currentPath: '',
+ isBrowsing: false,
+ browsingPath: '',
+};
+
class RepoListView extends React.Component {
render() {
@@ -56,5 +70,6 @@ class RepoListView extends React.Component {
}
RepoListView.propTypes = propTypes;
+RepoListView.defaultProps = defaultProps;
export default RepoListView;
diff --git a/frontend/src/components/file-chooser/repo-list-wrapper.jsx b/frontend/src/components/file-chooser/repo-list-wrapper.jsx
new file mode 100644
index 0000000000..55f5b44cd2
--- /dev/null
+++ b/frontend/src/components/file-chooser/repo-list-wrapper.jsx
@@ -0,0 +1,170 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RepoListView from './repo-list-view';
+import RecentlyUsedListView from './recently-used-list-view';
+import { gettext } from '../../utils/constants';
+
+export const MODE_TYPE_MAP = {
+ CURRENT_AND_OTHER_REPOS: 'current_repo_and_other_repos',
+ ONLY_CURRENT_LIBRARY: 'only_current_library',
+ ONLY_ALL_REPOS: 'only_all_repos',
+ ONLY_OTHER_LIBRARIES: 'only_other_libraries',
+ RECENTLY_USED: 'recently_used',
+};
+
+const RepoListWrapper = (props) => {
+ const {
+ mode, isShowFile, fileSuffixes, currentPath, isBrowsing, browsingPath, isCurrentRepoShow, currentRepoInfo, selectedRepo,
+ selectedPath, isOtherRepoShow, selectedItemInfo, repoList,
+ } = props;
+
+ const renderRecentlyUsed = () => {
+ const recentlyUsedList = JSON.parse(localStorage.getItem('recently-used-list')) || [];
+ return (
+
- 
+ {item.is_dir ? : })
}
{item.repo_name}/{item.link_content}
diff --git a/frontend/src/components/file-chooser/searcher/index.css b/frontend/src/components/file-chooser/searcher/index.css
new file mode 100644
index 0000000000..50f6c7b923
--- /dev/null
+++ b/frontend/src/components/file-chooser/searcher/index.css
@@ -0,0 +1,55 @@
+.file-chooser-searcher.search-container {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ margin-bottom: 16px;
+}
+
+.file-chooser-searcher .search-input-container {
+ position: relative;
+}
+
+.file-chooser-searcher .search-icon-left {
+ min-width: 2rem;
+}
+
+.file-chooser-searcher .search-input-container .search-input {
+ width: 100%;
+ height: 2.375rem;
+ padding-left: 2rem;
+ padding-right: 1.5rem;
+}
+
+.file-chooser-searcher .search-input-container .search-control {
+ position: absolute;
+ top: 12px;
+ right: 8px;
+ font-size: 16px;
+}
+
+.file-chooser-search-results-popover .popover {
+ min-width: 400px;
+ padding: 1rem;
+}
+
+.file-chooser-search-results-popover .search-results-popover-body {
+ width: 100%;
+}
+
+.file-chooser-search-results-popover .search-results-popover-body .search-results-item {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.file-chooser-search-results-popover .search-results-popover-body .searched-list-item.searched-dir td {
+ padding: 0;
+}
+
+.file-chooser-search-results-popover .search-results-popover-body .searched-item-icon {
+ border-radius: 3px 0 0 3px;
+}
+
+.file-chooser-search-results-popover .search-results-popover-body .searched-item-link {
+ border-radius: 0 3px 3px 0;
+}
diff --git a/frontend/src/components/file-chooser/searcher/index.js b/frontend/src/components/file-chooser/searcher/index.js
new file mode 100644
index 0000000000..2e872f50e5
--- /dev/null
+++ b/frontend/src/components/file-chooser/searcher/index.js
@@ -0,0 +1,205 @@
+import React, { useState, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Input, UncontrolledPopover } from 'reactstrap';
+import Loading from '../../loading';
+import toaster from '../../toast';
+import RepoInfo from '../../../models/repo-info';
+import SearchedListView from '../searched-list-view';
+import { gettext } from '../../../utils/constants';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { Utils } from '../../../utils/utils';
+
+import './index.css';
+
+export const SearchStatus = {
+ IDLE: 'idle',
+ LOADING: 'loading',
+ RESULTS: 'results',
+ NO_RESULTS: 'no_results',
+ BROWSING: 'browsing',
+};
+
+const Searcher = ({ searchStatus, onUpdateSearchStatus, onDirentItemClick, selectSearchedItem, selectRepo, selectPath, setBrowsingPath }) => {
+ const [inputValue, setInputValue] = useState('');
+ const [isResultsPopoverOpen, setIsResultsPopoverOpen] = useState(false);
+ const [searchResults, setSearchResults] = useState([]);
+
+ const inputRef = useRef(null);
+
+ const searchTimer = useRef(null);
+ const source = useRef(null);
+
+ const onPopoverToggle = useCallback((show) => {
+ setIsResultsPopoverOpen(show);
+ }, []);
+
+ const handleSearchInputChange = (e) => {
+ const newValue = e.target.value.trim();
+ setInputValue(newValue);
+
+ if (newValue.length === 0) {
+ onUpdateSearchStatus(SearchStatus.IDLE);
+ setSearchResults([]);
+ return;
+ }
+
+ onUpdateSearchStatus(SearchStatus.LOADING);
+ onPopoverToggle(true);
+
+ const queryData = {
+ q: newValue,
+ search_repo: 'all',
+ search_ftypes: 'all',
+ obj_type: 'dir',
+ };
+
+ if (searchTimer) {
+ clearTimeout(searchTimer.current);
+ }
+
+ searchTimer.current = setTimeout(() => {
+ getSearchResult(queryData);
+ }, 500);
+ };
+
+ const getSearchResult = useCallback((queryData) => {
+ if (source.current) {
+ source.current.cancel('prev request is cancelled');
+ }
+
+ source.current = seafileAPI.getSource();
+ seafileAPI.searchFiles(queryData, source.current.token).then(res => {
+ setSearchResults(res.data.total ? formatResultItems(res.data.results) : []);
+ onUpdateSearchStatus(res.data.results.length > 0 ? SearchStatus.RESULTS : SearchStatus.NO_RESULTS);
+ source.current = null;
+ }).catch(err => {
+ onUpdateSearchStatus(SearchStatus.NO_RESULTS);
+ source.current = null;
+ });
+ }, [onUpdateSearchStatus]);
+
+ const formatResultItems = (data) => {
+ let items = [];
+ let length = data.length > 10 ? 10 : data.length;
+ for (let i = 0; i < length; i++) {
+ items[i] = {};
+ items[i]['index'] = [i];
+ items[i]['name'] = data[i].name;
+ items[i]['path'] = data[i].fullpath;
+ items[i]['repo_id'] = data[i].repo_id;
+ items[i]['repo_name'] = data[i].repo_name;
+ items[i]['is_dir'] = data[i].is_dir;
+ items[i]['link_content'] = decodeURI(data[i].fullpath).substring(1);
+ items[i]['content'] = data[i].content_highlight;
+ }
+ return items;
+ };
+
+ const onCloseSearching = useCallback(() => {
+ setInputValue('');
+ setSearchResults([]);
+ onUpdateSearchStatus(SearchStatus.IDLE);
+ onPopoverToggle(false);
+ selectSearchedItem(null);
+ }, [onUpdateSearchStatus, selectSearchedItem, onPopoverToggle]);
+
+ const onSearchedItemClick = (item) => {
+ item['type'] = item.is_dir ? 'dir' : 'file';
+ let repo = new RepoInfo(item);
+ onDirentItemClick(repo, item.path, item);
+ };
+
+ const onSearchedItemDoubleClick = (item) => {
+ if (item.type !== 'dir') return;
+
+ const selectedItemInfo = {
+ repoID: item.repo_id,
+ filePath: item.path,
+ };
+
+ selectSearchedItem(selectedItemInfo);
+ onPopoverToggle(false);
+
+ seafileAPI.getRepoInfo(item.repo_id).then(res => {
+ const repoInfo = new RepoInfo(res.data);
+ const path = item.path.substring(0, item.path.length - 1);
+ selectRepo(repoInfo);
+ selectPath(path);
+ setBrowsingPath(item.path.substring(0, item.path.length - 1));
+ }).catch(err => {
+ const errMessage = Utils.getErrorMsg(err);
+ toaster.danger(errMessage);
+ });
+
+ onUpdateSearchStatus(SearchStatus.BROWSING);
+ };
+
+ const renderSearchResults = () => {
+ switch (searchStatus) {
+ case SearchStatus.IDLE:
+ return null;
+ case SearchStatus.LOADING:
+ return
+
+ );
+ };
+
+ const onScroll = (event) => {
+ event.stopPropagation();
+ };
+
+ return (
+
+
+ );
+};
+
+RepoListWrapper.propTypes = {
+ mode: PropTypes.string,
+ currentPath: PropTypes.string,
+ isShowFile: PropTypes.bool,
+ fileSuffixes: PropTypes.array,
+ isBrowsing: PropTypes.bool,
+ browsingPath: PropTypes.string,
+ selectedItemInfo: PropTypes.object,
+ currentRepoInfo: PropTypes.object,
+ selectedRepo: PropTypes.object,
+ isCurrentRepoShow: PropTypes.bool,
+ isOtherRepoShow: PropTypes.bool,
+ selectedPath: PropTypes.string,
+ repoList: PropTypes.array,
+ onCurrentRepoToggle: PropTypes.func,
+ onOtherRepoToggle: PropTypes.func,
+ handleClickRepo: PropTypes.func,
+ handleClickDirent: PropTypes.func,
+};
+
+RepoListWrapper.defaultProps = {
+ isShowFile: false,
+ fileSuffixes: [],
+};
+
+export default RepoListWrapper;
diff --git a/frontend/src/components/file-chooser/searched-list-item.js b/frontend/src/components/file-chooser/searched-list-item.js
index 30c3e9bb62..4ecfa53f8e 100644
--- a/frontend/src/components/file-chooser/searched-list-item.js
+++ b/frontend/src/components/file-chooser/searched-list-item.js
@@ -40,13 +40,12 @@ class SearchedListItem extends React.Component {
render() {
let { item, currentItem } = this.props;
- let folderIconUrl = item.link_content ? Utils.getFolderIconUrl(false, 192) : Utils.getDefaultLibIconUrl(false);
- let fileIconUrl = item.is_dir ? folderIconUrl : Utils.getFileIconUrl(item.name);
return (
+ {mode === MODE_TYPE_MAP.CURRENT_AND_OTHER_REPOS && (
+ <>
+
+
+
+
+
+ {gettext('Current Library')}
+
+ {(isCurrentRepoShow && currentRepoInfo) &&
+
+
+
+ )}
+ {mode === MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY && (
+
+
+ {gettext('Other Libraries')}
+
+ {isOtherRepoShow &&
+
+
+ )}
+ {mode === MODE_TYPE_MAP.ONLY_ALL_REPOS && (
+
+
+ )}
+ {mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES && (
+
+
+
+
+ {gettext('Libraries')}
+
+
+
+ )}
+ {mode === MODE_TYPE_MAP.RECENTLY_USED && renderRecentlyUsed()}
+ {gettext('No results matching')}
+ );
+ case SearchStatus.BROWSING:
+ case SearchStatus.RESULTS:
+ return (
+
+ onPopoverToggle(!isResultsPopoverOpen)}
+ target={inputRef.current}
+ placement='bottom-start'
+ hideArrow={true}
+ fade={false}
+ trigger="legacy"
+ >
+
+ }
+
+ );
+};
+
+Searcher.propTypes = {
+ searchStatus: PropTypes.string,
+ onUpdateSearchStatus: PropTypes.func,
+ onDirentItemClick: PropTypes.func,
+ selectSearchedItem: PropTypes.func,
+ selectRepo: PropTypes.func,
+ selectPath: PropTypes.func,
+ setBrowsingPath: PropTypes.func,
+};
+
+export default Searcher;
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index 2369e2b7b0..fa35fbe50b 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -307,7 +307,7 @@
}
.custom-modal .modal-body {
- flex: 1;
+ height: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
@@ -325,6 +325,10 @@
padding: 0.5rem;
}
+.custom-modal .modal-body .file-chooser-container {
+ height: 24rem;
+}
+
.custom-modal .repo-list-col {
max-width: 240px;
padding: 1rem;
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 1fce32cf9c..81a0c20f11 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -938,6 +938,8 @@ class LibContentView extends React.Component {
this.deleteDirents(dirNames);
+ this.removeFromRecentlyUsed(repoID, this.state.path);
+
let msg = '';
if (direntPaths.length > 1) {
msg = gettext('Successfully deleted {name} and {n} other items.');
@@ -965,6 +967,14 @@ class LibContentView extends React.Component {
});
};
+ removeFromRecentlyUsed = (repoID, path) => {
+ const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-list')) || [];
+ const updatedRecentlyUsed = recentlyUsed.filter(item =>
+ !(item.repo.repo_id === repoID && item.path === path)
+ );
+ localStorage.setItem('recently-used-list', JSON.stringify(updatedRecentlyUsed));
+ };
+
onAddFolder = (dirPath) => {
let repoID = this.props.repoID;
seafileAPI.createDir(repoID, dirPath).then(() => {
@@ -1237,6 +1247,7 @@ class LibContentView extends React.Component {
this.deleteTreeNode(path);
}
this.deleteDirent(path);
+ this.removeFromRecentlyUsed(this.props.repoID, path);
}
// list operations
+
+
+ {inputValue.length !== 0 && (
+
+ )}
+
+ {searchStatus !== SearchStatus.IDLE &&
+
+ {renderSearchResults()}
+
+