1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-09 21:24:22 +00:00
seahub/frontend/src/App.js

188 lines
5.1 KiB
JavaScript
Raw Normal View History

2018-05-02 06:09:58 +00:00
import React from 'react';
import SeafileEditor from '@seafile/seafile-editor';
2018-05-02 06:09:58 +00:00
import 'whatwg-fetch';
import { SeafileAPI } from 'seafile-js';
import cookie from 'react-cookies'
2018-05-02 06:09:58 +00:00
let repoID = window.app.pageOptions.repoID;
let filePath = window.app.pageOptions.filePath;
let fileName = window.app.pageOptions.fileName;
let siteRoot = window.app.config.siteRoot;
let domain = window.app.pageOptions.domain;
let protocol = window.app.pageOptions.protocol;
let dirPath = '/';
const serviceUrl = window.app.config.serviceUrl;
const seafileCollabServer = window.app.config.seafileCollabServer;
const userInfo = window.app.userInfo;
// init seafileAPI
let seafileAPI = new SeafileAPI();
let xcsrfHeaders = cookie.load('csrftoken');
seafileAPI.initForSeahubUsage({ xcsrfHeaders });
2018-05-02 06:09:58 +00:00
function getImageFileNameWithTimestamp() {
var d = Date.now();
return "image-" + d.toString() + ".png";
}
class EditorUtilities {
constructor () {
this.repoID = repoID;
this.filePath = filePath;
this.serviceUrl = serviceUrl;
}
2018-05-02 06:09:58 +00:00
saveContent(content) {
return (
seafileAPI.getUpdateLink(repoID, dirPath).then((res) => {
const uploadLink = res.data;
return seafileAPI.updateFile(uploadLink, filePath, fileName, content)
2018-05-02 06:09:58 +00:00
})
)
}
unStarFile () {
return (
seafileAPI.unStarFile(repoID, this.filePath)
)
2018-05-02 06:09:58 +00:00
}
starFile() {
return (
seafileAPI.starFile(this.repoID, this.filePath)
)
}
getParentDectionaryUrl() {
let parentPath = this.filePath.substring(0, this.filePath.lastIndexOf('/'));
return this.serviceUrl + "/#common/lib/" + this.repoID + parentPath;
}
2018-05-02 06:09:58 +00:00
_getImageURL(fileName) {
const url = `${protocol}://${domain}${siteRoot}lib/${repoID}/file/images/${fileName}?raw=1`;
return url;
}
uploadImage = (imageFile) => {
return (
seafileAPI.getUploadLink(repoID, dirPath).then((res) => {
let uploadLinkComponent = res.data;
const uploadLink = uploadLinkComponent + "?ret-json=1";
2018-05-02 06:09:58 +00:00
const name = getImageFileNameWithTimestamp();
const blob = imageFile.slice(0, -1, 'image/png');
const newFile = new File([blob], name, {type: 'image/png'});
const formData = new FormData();
formData.append("parent_dir", "/");
formData.append("relative_path", "images");
formData.append("file", newFile);
return {uploadLink, formData}
}).then(({ uploadLink, formData}) => {
return seafileAPI.uploadImage(uploadLink, formData)
}).then ((res) => {
let resArr = res.data[0];
let filename = resArr.name;
2018-05-02 06:09:58 +00:00
return this._getImageURL(filename);
})
)
}
2018-05-02 06:09:58 +00:00
getFileURL(fileNode) {
var url;
if (fileNode.isImage()) {
2018-06-07 07:01:41 +00:00
url = protocol + '://' + domain + siteRoot + "lib/" + repoID + "/file" + encodeURIComponent(fileNode.path()) + "?raw=1";
2018-05-02 06:09:58 +00:00
} else {
2018-06-07 07:01:41 +00:00
url = protocol + '://' + domain + siteRoot + "lib/" + repoID + "/file" + encodeURIComponent(fileNode.path());
2018-05-02 06:09:58 +00:00
}
return url;
}
isInternalFileLink(url) {
var re = new RegExp(this.serviceUrl + "/lib/[0-9a-f-]{36}/file.*");
2018-05-02 06:09:58 +00:00
return re.test(url);
}
getFiles() {
return seafileAPI.listDir(repoID, dirPath, { recursive: true} ).then((response) => {
var files = response.data.map((item) => {
return {
name: item.name,
type: item.type === 'dir' ? 'dir' : 'file',
parent_path: item.parent_dir
}
2018-05-02 06:09:58 +00:00
})
return files;
})
2018-05-02 06:09:58 +00:00
}
}
const editorUtilities = new EditorUtilities();
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
markdownContent: "",
loading: true,
2018-06-07 07:01:41 +00:00
mode: "editor",
fileInfo: {
repoID: repoID,
name: fileName,
path: filePath,
mtime: null,
size: 0,
starred: false,
},
collabServer: seafileCollabServer ? seafileCollabServer : null,
2018-05-02 06:09:58 +00:00
};
}
componentDidMount() {
seafileAPI.getFileInfo(repoID, filePath).then((res) => {
let { mtime, size, starred } = res.data;
this.setState((prevState, props) => ({
fileInfo: {
...prevState.fileInfo,
mtime,
size,
starred
}
}));
seafileAPI.getFileDownloadLink(repoID, filePath).then((res) => {
const downLoadUrl = res.data;
seafileAPI.getFileContent(downLoadUrl).then((res) => {
this.setState({
markdownContent: res.data,
loading: false
})
2018-05-02 06:09:58 +00:00
})
});
2018-05-02 06:09:58 +00:00
})
}
render() {
if (this.state.loading) {
return (
<div className="empty-loading-page">
<div className="lds-ripple page-centered"><div></div><div></div></div>
</div>
)
2018-06-07 07:01:41 +00:00
} else if (this.state.mode === "editor") {
2018-05-02 06:09:58 +00:00
return (
<SeafileEditor
fileInfo={this.state.fileInfo}
2018-05-02 06:09:58 +00:00
markdownContent={this.state.markdownContent}
editorUtilities={editorUtilities}
userInfo={this.state.collabServer ? userInfo : null}
collabServer={this.state.collabServer}
2018-05-02 06:09:58 +00:00
/>
);
2018-06-07 07:01:41 +00:00
}
2018-05-02 06:09:58 +00:00
}
}
export default App;