2024-09-03 10:46:53 +08:00
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
import classnames from 'classnames';
|
|
|
|
|
import { seafileAPI } from '../../../utils/seafile-api';
|
|
|
|
|
import { Utils } from '../../../utils/utils';
|
|
|
|
|
import toaster from '../../toast';
|
|
|
|
|
import { Header, Body } from '../detail';
|
|
|
|
|
import FileDetails from './file-details';
|
|
|
|
|
import { MetadataContext } from '../../../metadata';
|
|
|
|
|
|
|
|
|
|
import './index.css';
|
|
|
|
|
|
2024-10-12 20:32:39 +08:00
|
|
|
const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {} }) => {
|
2024-09-05 13:35:58 +08:00
|
|
|
const { headerComponent } = component;
|
2024-09-03 10:46:53 +08:00
|
|
|
const [direntDetail, setDirentDetail] = useState('');
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// init context
|
|
|
|
|
const context = new MetadataContext();
|
|
|
|
|
window.sfMetadataContext = context;
|
|
|
|
|
window.sfMetadataContext.init({ repoID, repoInfo });
|
|
|
|
|
seafileAPI.getFileInfo(repoID, path).then(res => {
|
|
|
|
|
setDirentDetail(res.data);
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
const errMessage = Utils.getErrorMsg(error);
|
|
|
|
|
toaster.danger(errMessage);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return () => {
|
2024-10-21 17:38:17 +08:00
|
|
|
if (window.sfMetadataContext) {
|
|
|
|
|
window.sfMetadataContext.destroy();
|
|
|
|
|
delete window['sfMetadataContext'];
|
|
|
|
|
}
|
2024-09-03 10:46:53 +08:00
|
|
|
};
|
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className={classnames('cur-view-detail', className, {
|
|
|
|
|
'cur-view-detail-small': width < 400,
|
|
|
|
|
'cur-view-detail-large': width > 400
|
|
|
|
|
})}
|
|
|
|
|
style={{ width }}
|
|
|
|
|
>
|
2024-11-25 20:19:44 +08:00
|
|
|
<Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={onClose} component={headerComponent} />
|
2024-09-03 10:46:53 +08:00
|
|
|
<Body>
|
|
|
|
|
{dirent && direntDetail && (
|
|
|
|
|
<div className="detail-content">
|
|
|
|
|
<FileDetails
|
|
|
|
|
repoID={repoID}
|
|
|
|
|
repoInfo={repoInfo}
|
|
|
|
|
path={path}
|
|
|
|
|
direntDetail={direntDetail}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</Body>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
EmbeddedFileDetails.propTypes = {
|
|
|
|
|
repoID: PropTypes.string.isRequired,
|
|
|
|
|
dirent: PropTypes.object,
|
|
|
|
|
path: PropTypes.string.isRequired,
|
|
|
|
|
repoInfo: PropTypes.object.isRequired,
|
2024-09-05 13:35:58 +08:00
|
|
|
component: PropTypes.object,
|
2024-09-03 10:46:53 +08:00
|
|
|
onClose: PropTypes.func.isRequired,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default EmbeddedFileDetails;
|
