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

change searched item loading (#7913)

Browse Source
This commit is contained in:
Michael An
2025-06-10 09:55:55 +08:00
committed by GitHub
parent 34d4e8917c
commit 8cc63be9fd
2 changed files with 61 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/components/search/details/details.js
View File

@@ -1,10 +1,8 @@
import { useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Body, Header } from '../../dirent-detail/detail';
import { siteRoot, thumbnailSizeForGrid } from '../../../utils/constants';
import { Utils } from '../../../utils/utils'; import { Utils } from '../../../utils/utils';
import FileDetails from '../../dirent-detail/dirent-details/file-details'; import FileDetails from '../../dirent-detail/dirent-details/file-details';
import DirDetails from '../../dirent-detail/dirent-details/dir-details'; import DirDetails from '../../dirent-detail/dirent-details/dir-details';
import { useEffect, useState } from 'react';
import { useMetadataStatus } from '../../../hooks'; import { useMetadataStatus } from '../../../hooks';
import tagsAPI from '../../../tag/api'; import tagsAPI from '../../../tag/api';
import { PER_LOAD_NUMBER } from '../../../metadata/constants'; import { PER_LOAD_NUMBER } from '../../../metadata/constants';
@@ -13,7 +11,7 @@ import { TAGS_DEFAULT_SORT } from '../../../tag/constants/sort';
import TagsData from '../../../tag/model/tagsData'; import TagsData from '../../../tag/model/tagsData';
import toaster from '../../toast'; import toaster from '../../toast';
const Details = ({ repoID, repoInfo, path, dirent, direntDetail }) => { const Details = ({ repoID, path, dirent, direntDetail }) => {
const [tagsData, setTagsData] = useState(null); const [tagsData, setTagsData] = useState(null);
const { enableMetadata, enableTags } = useMetadataStatus(); const { enableMetadata, enableTags } = useMetadataStatus();
@@ -33,55 +31,33 @@ const Details = ({ repoID, repoInfo, path, dirent, direntDetail }) => {
} }
}, [repoID, enableMetadata, enableTags]); }, [repoID, enableMetadata, enableTags]);
let src = '';
if (repoInfo.encrypted) {
src = `${siteRoot}repo/${repoID}/raw` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
} else {
src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForGrid}` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`) + '?mtime=' + direntDetail.mtime;
}
return ( return (
<div className="searched-item-details"> <div className="detail-content">
<div {dirent.type !== 'file' ?
className="cur-view-detail" <DirDetails
style={{ width: 300 }} direntDetail={direntDetail}
> readOnly={true}
<Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)}></Header> tagsData={tagsData}
<Body> />
{Utils.imageCheck(dirent.name) && ( :
<div className="detail-image"> <FileDetails
<img src={src} alt="" /> repoID={repoID}
</div> dirent={dirent}
)} path={path}
<div className="detail-content"> direntDetail={direntDetail}
{dirent.type !== 'file' ? ( repoTags={[]}
<DirDetails fileTagList={dirent ? dirent.file_tags : []}
direntDetail={direntDetail} readOnly={true}
readOnly={true} tagsData={tagsData}
tagsData={tagsData} onFileTagChanged={() => {}}
/> />
) : ( }
<FileDetails
repoID={repoID}
dirent={dirent}
path={path}
direntDetail={direntDetail}
repoTags={[]}
fileTagList={dirent ? dirent.file_tags : []}
readOnly={true}
tagsData={tagsData}
onFileTagChanged={() => {}}
/>
)}
</div>
</Body>
</div>
</div> </div>
); );
}; };
Details.propTypes = { Details.propTypes = {
repoID: PropTypes.string.isRequired, repoID: PropTypes.string.isRequired,
repoInfo: PropTypes.object.isRequired,
path: PropTypes.string.isRequired, path: PropTypes.string.isRequired,
dirent: PropTypes.object.isRequired, dirent: PropTypes.object.isRequired,
direntDetail: PropTypes.object.isRequired, direntDetail: PropTypes.object.isRequired,

63
frontend/src/components/search/details/index.js
View File

@@ -2,14 +2,14 @@ import { useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Utils } from '../../../utils/utils'; import { Utils } from '../../../utils/utils';
import { seafileAPI } from '../../../utils/seafile-api'; import { seafileAPI } from '../../../utils/seafile-api';
import toaster from '../../toast';
import { MetadataDetailsProvider } from '../../../metadata';
import { Repo } from '../../../models'; import { Repo } from '../../../models';
import { MetadataStatusProvider } from '../../../hooks'; import toaster from '../../toast';
import Details from './details'; import Details from './details';
import { MetadataDetailsProvider } from '../../../metadata';
import { MetadataStatusProvider } from '../../../hooks';
import LibDetail from '../../dirent-detail/lib-details'; import LibDetail from '../../dirent-detail/lib-details';
import { Body, Header } from '../../dirent-detail/detail'; import { Body, Header } from '../../dirent-detail/detail';
import { gettext, mediaUrl } from '../../../utils/constants'; import { gettext, mediaUrl, siteRoot, thumbnailSizeForGrid } from '../../../utils/constants';
import './index.css'; import './index.css';
@@ -138,27 +138,42 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => {
let parentDir = path !== '/' && path.endsWith('/') ? path.slice(0, -1) : path; // deal with folder path comes from search results, eg: /folder/ let parentDir = path !== '/' && path.endsWith('/') ? path.slice(0, -1) : path; // deal with folder path comes from search results, eg: /folder/
parentDir = Utils.getDirName(parentDir); parentDir = Utils.getDirName(parentDir);
let src = '';
if (repoInfo.encrypted) {
src = `${siteRoot}repo/${repoID}/raw` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
} else {
src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForGrid}` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`) + '?mtime=' + direntDetail.mtime;
}
return ( return (
<MetadataStatusProvider key={repoID} repoID={repoID} repoInfo={repoInfo}> <div className="searched-item-details">
<MetadataDetailsProvider <div className="cur-view-detail" style={{ width: 300 }}>
repoID={repoID} <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)}></Header>
repoInfo={repoInfo} <Body>
path={path !== '/' && path.endsWith('/') ? path.slice(0, -1) : path} {Utils.imageCheck(dirent.name) && <div className="detail-image"><img src={src} alt="" /></div>}
dirent={dirent} <MetadataStatusProvider key={repoID} repoID={repoID} repoInfo={repoInfo}>
direntDetail={direntDetail} <MetadataDetailsProvider
direntType={dirent?.type !== 'file' ? 'dir' : 'file'} repoID={repoID}
onErrMessage={(message) => setErrMessage(message)} repoInfo={repoInfo}
> path={path !== '/' && path.endsWith('/') ? path.slice(0, -1) : path}
<Details dirent={dirent}
repoID={repoID} direntDetail={direntDetail}
repoInfo={repoInfo} direntType={dirent?.type !== 'file' ? 'dir' : 'file'}
path={parentDir} onErrMessage={(message) => setErrMessage(message)}
dirent={dirent} >
direntDetail={direntDetail} <Details
errMessage={errMessage} repoID={repoID}
/> path={parentDir}
</MetadataDetailsProvider> dirent={dirent}
</MetadataStatusProvider> direntDetail={direntDetail}
errMessage={errMessage}
/>
</MetadataDetailsProvider>
</MetadataStatusProvider>
</Body>
</div>
</div>
); );
}; };