haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-19 18:29:23 +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}
/>
);