2024-08-06 17:30:11 +08:00
|
|
|
import React from 'react';
|
2024-08-02 22:31:46 +08:00
|
|
|
import PropTypes from 'prop-types';
|
2024-09-05 14:56:52 +08:00
|
|
|
import { siteRoot, thumbnailSizeForGrid } from '../../../utils/constants';
|
2024-08-02 22:31:46 +08:00
|
|
|
import { seafileAPI } from '../../../utils/seafile-api';
|
|
|
|
|
import { Utils } from '../../../utils/utils';
|
|
|
|
|
import toaster from '../../toast';
|
|
|
|
|
import Dirent from '../../../models/dirent';
|
2024-08-07 14:01:01 +08:00
|
|
|
import { Detail, Header, Body } from '../detail';
|
2024-08-02 22:31:46 +08:00
|
|
|
import DirDetails from './dir-details';
|
|
|
|
|
import FileDetails from './file-details';
|
2024-09-14 16:31:32 +08:00
|
|
|
import ObjectUtils from '../../../metadata/utils/object-utils';
|
2024-08-02 22:31:46 +08:00
|
|
|
|
|
|
|
|
import './index.css';
|
|
|
|
|
|
2024-08-06 17:30:11 +08:00
|
|
|
class DirentDetails extends React.Component {
|
2024-08-02 22:31:46 +08:00
|
|
|
|
2024-08-06 17:30:11 +08:00
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
direntDetail: '',
|
|
|
|
|
dirent: null,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
updateDetail = (repoID, dirent, direntPath) => {
|
2024-08-02 22:31:46 +08:00
|
|
|
const apiName = dirent.type === 'file' ? 'getFileInfo' : 'getDirInfo';
|
|
|
|
|
seafileAPI[apiName](repoID, direntPath).then(res => {
|
2024-09-05 14:56:52 +08:00
|
|
|
this.setState(({
|
|
|
|
|
direntDetail: res.data,
|
|
|
|
|
dirent,
|
|
|
|
|
}));
|
2024-08-02 22:31:46 +08:00
|
|
|
}).catch(error => {
|
|
|
|
|
const errMessage = Utils.getErrorMsg(error);
|
|
|
|
|
toaster.danger(errMessage);
|
|
|
|
|
});
|
2024-08-06 17:30:11 +08:00
|
|
|
};
|
2024-08-02 22:31:46 +08:00
|
|
|
|
2024-08-06 17:30:11 +08:00
|
|
|
loadDetail = (repoID, dirent, path) => {
|
2024-08-02 22:31:46 +08:00
|
|
|
if (dirent) {
|
|
|
|
|
const direntPath = Utils.joinPath(path, dirent.name);
|
2024-08-06 17:30:11 +08:00
|
|
|
this.updateDetail(repoID, dirent, direntPath);
|
2024-08-02 22:31:46 +08:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const dirPath = Utils.getDirName(path);
|
|
|
|
|
seafileAPI.listDir(repoID, dirPath).then(res => {
|
|
|
|
|
const direntList = res.data.dirent_list;
|
2024-08-06 17:30:11 +08:00
|
|
|
let folderDirent = direntList.find(item => item.parent_dir + item.name === path) || null;
|
|
|
|
|
if (folderDirent) {
|
|
|
|
|
folderDirent = new Dirent(folderDirent);
|
2024-08-02 22:31:46 +08:00
|
|
|
}
|
2024-08-06 17:30:11 +08:00
|
|
|
this.updateDetail(repoID, folderDirent, path);
|
2024-08-02 22:31:46 +08:00
|
|
|
}).catch(error => {
|
|
|
|
|
const errMessage = Utils.getErrorMsg(error);
|
|
|
|
|
toaster.danger(errMessage);
|
|
|
|
|
});
|
2024-08-06 17:30:11 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
this.loadDetail(this.props.repoID, this.props.dirent, this.props.path);
|
|
|
|
|
}
|
2024-08-02 22:31:46 +08:00
|
|
|
|
2024-08-06 17:30:11 +08:00
|
|
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
|
|
|
const { dirent, path, repoID, currentRepoInfo, repoTags, fileTags } = this.props;
|
|
|
|
|
if (!ObjectUtils.isSameObject(currentRepoInfo, nextProps.currentRepoInfo) ||
|
2024-09-05 14:56:52 +08:00
|
|
|
!ObjectUtils.isSameObject(dirent, nextProps.dirent) ||
|
|
|
|
|
JSON.stringify(repoTags || []) !== JSON.stringify(nextProps.repoTags || []) ||
|
|
|
|
|
JSON.stringify(fileTags || []) !== JSON.stringify(nextProps.fileTags || []) ||
|
|
|
|
|
path !== nextProps.path ||
|
|
|
|
|
repoID !== nextProps.repoID
|
|
|
|
|
) {
|
2024-08-06 17:30:11 +08:00
|
|
|
this.setState({ dirent: null }, () => {
|
|
|
|
|
this.loadDetail(nextProps.repoID, nextProps.dirent, nextProps.path);
|
|
|
|
|
});
|
|
|
|
|
}
|
2024-08-02 22:31:46 +08:00
|
|
|
}
|
2024-08-06 17:30:11 +08:00
|
|
|
|
2024-08-08 16:10:53 +08:00
|
|
|
renderImage = () => {
|
|
|
|
|
const { dirent } = this.state;
|
2024-08-06 17:30:11 +08:00
|
|
|
if (!dirent) return null;
|
|
|
|
|
const isImg = Utils.imageCheck(dirent.name);
|
2024-08-08 16:10:53 +08:00
|
|
|
if (!isImg) return null;
|
2024-10-29 14:01:07 +08:00
|
|
|
const { repoID, path, currentRepoInfo } = this.props;
|
|
|
|
|
let src = '';
|
|
|
|
|
if (currentRepoInfo.encrypted) {
|
|
|
|
|
src = `${siteRoot}repo/${repoID}/raw` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
|
|
|
|
|
} else {
|
|
|
|
|
src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForGrid}` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
|
|
|
|
|
}
|
2024-08-08 16:10:53 +08:00
|
|
|
return (
|
2024-10-29 14:01:07 +08:00
|
|
|
<div className="detail-image">
|
|
|
|
|
<img src={src} alt="" />
|
2024-08-08 16:10:53 +08:00
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render() {
|
2024-08-15 17:38:42 +08:00
|
|
|
const { dirent, direntDetail } = this.state;
|
2024-08-08 16:10:53 +08:00
|
|
|
const { repoID, path, fileTags } = this.props;
|
|
|
|
|
const direntName = dirent?.name || '';
|
|
|
|
|
const smallIconUrl = Utils.getDirentIcon(dirent);
|
2024-08-06 17:30:11 +08:00
|
|
|
|
|
|
|
|
return (
|
2024-08-07 14:01:01 +08:00
|
|
|
<Detail>
|
2024-08-06 17:30:11 +08:00
|
|
|
<Header title={direntName} icon={smallIconUrl} onClose={this.props.onClose} />
|
2024-08-07 14:01:01 +08:00
|
|
|
<Body>
|
2024-08-08 16:10:53 +08:00
|
|
|
{this.renderImage()}
|
|
|
|
|
{dirent && direntDetail && (
|
2024-08-06 17:30:11 +08:00
|
|
|
<div className="detail-content">
|
2024-09-13 20:28:20 +08:00
|
|
|
{dirent.type !== 'file' ?
|
2024-08-06 17:30:11 +08:00
|
|
|
<DirDetails
|
|
|
|
|
repoID={repoID}
|
|
|
|
|
repoInfo={this.props.currentRepoInfo}
|
|
|
|
|
dirent={dirent}
|
|
|
|
|
direntDetail={direntDetail}
|
2024-09-14 17:10:20 +08:00
|
|
|
path={this.props.dirent ? Utils.joinPath(path, dirent.name) : path}
|
2024-08-06 17:30:11 +08:00
|
|
|
/>
|
2024-09-13 20:28:20 +08:00
|
|
|
:
|
2024-08-06 17:30:11 +08:00
|
|
|
<FileDetails
|
|
|
|
|
repoID={repoID}
|
|
|
|
|
repoInfo={this.props.currentRepoInfo}
|
|
|
|
|
dirent={dirent}
|
|
|
|
|
path={path}
|
|
|
|
|
direntDetail={direntDetail}
|
|
|
|
|
repoTags={this.props.repoTags}
|
|
|
|
|
fileTagList={dirent ? dirent.file_tags : fileTags}
|
|
|
|
|
onFileTagChanged={this.props.onFileTagChanged}
|
|
|
|
|
/>
|
2024-09-13 20:28:20 +08:00
|
|
|
}
|
2024-08-06 17:30:11 +08:00
|
|
|
</div>
|
|
|
|
|
)}
|
2024-08-07 14:01:01 +08:00
|
|
|
</Body>
|
|
|
|
|
</Detail>
|
2024-08-06 17:30:11 +08:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-08-02 22:31:46 +08:00
|
|
|
|
|
|
|
|
DirentDetails.propTypes = {
|
|
|
|
|
repoID: PropTypes.string.isRequired,
|
|
|
|
|
dirent: PropTypes.object,
|
|
|
|
|
path: PropTypes.string.isRequired,
|
|
|
|
|
currentRepoInfo: PropTypes.object.isRequired,
|
2024-08-06 17:30:11 +08:00
|
|
|
onClose: PropTypes.func.isRequired,
|
2024-08-02 22:31:46 +08:00
|
|
|
onFileTagChanged: PropTypes.func.isRequired,
|
|
|
|
|
repoTags: PropTypes.array,
|
|
|
|
|
fileTags: PropTypes.array,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default DirentDetails;
|
