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

fix selected item match error in recently used list (#7524)

Browse Source 
Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
2025-02-26 16:08:22 +08:00
committed by GitHub
parent 33c4c76608
commit d4b2e75b7e
4 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/file-chooser/recently-used-list-item.js
View File

@@ -1,4 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import { Utils } from '../../utils/utils';
const RecentlyUsedListItem = ({ item, isSelected, onItemClick }) => {
@@ -9,12 +10,12 @@ const RecentlyUsedListItem = ({ item, isSelected, onItemClick }) => {
const title = Utils.getFileName(item.path) || item.repo.repo_name;
const handleItemClick = () => {
onItemClick(item.repo, item.path);
onItemClick(item);
};
return (
<li>
<div className={`${isSelected ? 'item-active' : ''} item-info recently-used`} onClick={handleItemClick}>
<div className={classNames('item-info recently-used', { 'item-active': isSelected })} onClick={handleItemClick}>
<div className="item-left-icon">
<i className="tree-node-icon">
<span className="icon sf3-font sf3-font-folder tree-node-icon"></span>

15
frontend/src/components/file-chooser/recently-used-list-view.js
View File

@@ -1,12 +1,13 @@
import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import RecentlyUsedListItem from './recently-used-list-item';
import { RECENTLY_USED_LIST_KEY } from '../../constants';
const RecentlyUsedListView = ({ currentRepoInfo, repoList, onDirentItemClick }) => {
const [selectedItem, setSelectedItem] = useState(null);
const recentlyUsedList = useMemo(() => {
const list = JSON.parse(localStorage.getItem('recently-used-list')) || [];
const list = JSON.parse(localStorage.getItem(RECENTLY_USED_LIST_KEY)) || [];
const allRepos = [...repoList, currentRepoInfo];
// list: [{repo_id: 'xxx', path: 'xxx'}, ...], replace repo_id with repo object
@@ -21,19 +22,21 @@ const RecentlyUsedListView = ({ currentRepoInfo, repoList, onDirentItemClick })
.filter(item => item !== null);
}, [currentRepoInfo, repoList]);
const onItemClick = (repo, path) => {
setSelectedItem(path);
onDirentItemClick(repo, path);
const onItemClick = (item) => {
setSelectedItem(item);
onDirentItemClick(item.repo, item.path);
};
const isItemSelected = (item) => selectedItem && selectedItem.path === item.path && selectedItem.repo.repo_id === item.repo.repo_id;
return (
<ul className="list-view-content file-chooser-item" >
<ul className="list-view-content file-chooser-item">
{recentlyUsedList.length > 0 && recentlyUsedList.map((item, index) => {
return (
<RecentlyUsedListItem
key={index}
item={item}
isSelected={selectedItem === item.path}
isSelected={isItemSelected(item)}
onItemClick={onItemClick}
/>
);

2
frontend/src/constants/index.js
View File

@@ -51,3 +51,5 @@ export const CAPTURE_INFO_SHOW_KEY = 'sf_capture_info_show';
export const TREE_PANEL_STATE_KEY = 'sf_dir_view_tree_panel_open';
export const TREE_PANEL_SECTION_STATE_KEY = 'sf_dir_view_tree_panel_section_state';
export const RECENTLY_USED_LIST_KEY = 'recently_used_list';

10
frontend/src/pages/lib-content-view/lib-content-view.js
View File

@@ -20,7 +20,7 @@ import FileUploader from '../../components/file-uploader/file-uploader';
import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
import { EVENT_BUS_TYPE } from '../../components/common/event-bus-type';
import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY, TREE_PANEL_STATE_KEY } from '../../constants';
import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY, TREE_PANEL_STATE_KEY, RECENTLY_USED_LIST_KEY } from '../../constants';
import { MetadataStatusProvider } from '../../hooks';
import { MetadataProvider, CollaboratorsProvider } from '../../metadata/hooks';
import { TagsProvider } from '../../tag/hooks';
@@ -739,7 +739,7 @@ class LibContentView extends React.Component {
};
updateRecentlyUsedList = (repo, destPath) => {
const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-list')) || [];
const recentlyUsed = JSON.parse(localStorage.getItem(RECENTLY_USED_LIST_KEY)) || [];
const updatedRecentlyUsed = [{ repo_id: repo.repo_id, path: destPath }, ...recentlyUsed];
const filteredRecentlyUsed = updatedRecentlyUsed.filter((item, index, self) =>
@@ -752,7 +752,7 @@ class LibContentView extends React.Component {
filteredRecentlyUsed.pop(); // Limit to 10 recent directories
}
localStorage.setItem('recently-used-list', JSON.stringify(filteredRecentlyUsed));
localStorage.setItem(RECENTLY_USED_LIST_KEY, JSON.stringify(filteredRecentlyUsed));
};
// toolbar operations
@@ -955,11 +955,11 @@ class LibContentView extends React.Component {
};
removeFromRecentlyUsed = (repoID, path) => {
const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-list')) || [];
const recentlyUsed = JSON.parse(localStorage.getItem(RECENTLY_USED_LIST_KEY)) || [];
const updatedRecentlyUsed = recentlyUsed.filter(item =>
!(item.repo_id === repoID && item.path === path)
);
localStorage.setItem('recently-used-list', JSON.stringify(updatedRecentlyUsed));
localStorage.setItem(RECENTLY_USED_LIST_KEY, JSON.stringify(updatedRecentlyUsed));
};
onAddFolder = (dirPath, options = {}) => {