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

34
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,33 +31,15 @@ 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="cur-view-detail"
style={{ width: 300 }}
>
<Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)}></Header>
<Body>
{Utils.imageCheck(dirent.name) && (
<div className="detail-image">
<img src={src} alt="" />
</div>
)}
<div className="detail-content"> <div className="detail-content">
{dirent.type !== 'file' ? ( {dirent.type !== 'file' ?
<DirDetails <DirDetails
direntDetail={direntDetail} direntDetail={direntDetail}
readOnly={true} readOnly={true}
tagsData={tagsData} tagsData={tagsData}
/> />
) : ( :
<FileDetails <FileDetails
repoID={repoID} repoID={repoID}
dirent={dirent} dirent={dirent}
@@ -71,17 +51,13 @@ const Details = ({ repoID, repoInfo, path, dirent, direntDetail }) => {
tagsData={tagsData} tagsData={tagsData}
onFileTagChanged={() => {}} 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,

25
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,7 +138,20 @@ 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 (
<div className="searched-item-details">
<div className="cur-view-detail" style={{ width: 300 }}>
<Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)}></Header>
<Body>
{Utils.imageCheck(dirent.name) && <div className="detail-image"><img src={src} alt="" /></div>}
<MetadataStatusProvider key={repoID} repoID={repoID} repoInfo={repoInfo}> <MetadataStatusProvider key={repoID} repoID={repoID} repoInfo={repoInfo}>
<MetadataDetailsProvider <MetadataDetailsProvider
repoID={repoID} repoID={repoID}
@@ -151,7 +164,6 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => {
> >
<Details <Details
repoID={repoID} repoID={repoID}
repoInfo={repoInfo}
path={parentDir} path={parentDir}
dirent={dirent} dirent={dirent}
direntDetail={direntDetail} direntDetail={direntDetail}
@@ -159,6 +171,9 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => {
/> />
</MetadataDetailsProvider> </MetadataDetailsProvider>
</MetadataStatusProvider> </MetadataStatusProvider>
</Body>
</div>
</div>
); );
}; };