1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-23 03:13:40 +00:00
seahub/frontend/src/view-file-xmind.js

124 lines
3.1 KiB
JavaScript

import React from 'react';
import ReactDOM from 'react-dom';
import watermark from 'watermark-dom';
import { seafileAPI } from './utils/seafile-api';
import { siteRoot, siteName } from './utils/constants';
import FileInfo from './components/file-view/file-info';
import FileToolbar from './components/file-view/file-toolbar';
import FileViewTip from './components/file-view/file-view-tip';
import CommentPanel from './components/file-view/comment-panel';
import './css/file-view.css';
import './css/image-file-view.css';
const { isStarred, isLocked, lockedByMe,
repoID, filePath, err, enableWatermark, userNickName,
// the following are only for xmind file view
fileName, xmindImageSrc
} = window.app.pageOptions;
class ViewFileXmind extends React.Component {
constructor(props) {
super(props);
this.state = {
isStarred: isStarred,
isLocked: isLocked,
lockedByMe: lockedByMe,
isCommentPanelOpen: false
};
}
toggleCommentPanel = () => {
this.setState({
isCommentPanelOpen: !this.state.isCommentPanelOpen
});
}
toggleStar = () => {
if (this.state.isStarred) {
seafileAPI.unStarItem(repoID, filePath).then((res) => {
this.setState({
isStarred: false
});
});
} else {
seafileAPI.starItem(repoID, filePath).then((res) => {
this.setState({
isStarred: true
});
});
}
}
toggleLockFile = () => {
if (this.state.isLocked) {
seafileAPI.unlockfile(repoID, filePath).then((res) => {
this.setState({
isLocked: false,
lockedByMe: false
});
});
} else {
seafileAPI.lockfile(repoID, filePath).then((res) => {
this.setState({
isLocked: true,
lockedByMe: true
});
});
}
}
render() {
return (
<div className="h-100 d-flex flex-column">
<div className="file-view-header d-flex justify-content-between">
<FileInfo
isStarred={this.state.isStarred}
isLocked={this.state.isLocked}
toggleStar={this.toggleStar}
/>
<FileToolbar
isLocked={this.state.isLocked}
lockedByMe={this.state.lockedByMe}
toggleLockFile={this.toggleLockFile}
toggleCommentPanel={this.toggleCommentPanel}
/>
</div>
<div className="file-view-body flex-auto d-flex">
<FileContent />
{this.state.isCommentPanelOpen &&
<CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
}
</div>
</div>
);
}
}
class FileContent extends React.Component {
render() {
if (err) {
return <FileViewTip />;
}
return (
<div className="file-view-content flex-1 image-file-view">
<img src={`${siteRoot}${xmindImageSrc}`} alt={fileName} id="image-view" />
</div>
);
}
}
if (enableWatermark) {
watermark.init({
watermark_txt: `${siteName} ${userNickName}`,
watermark_alpha: 0.075
});
}
ReactDOM.render (
<ViewFileXmind />,
document.getElementById('wrapper')
);