[view history/snapshot/trash file] rewrote them with react

frontend/src/components/history-trash-file-view/download.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { gettext, siteRoot } from '../../utils/constants';
+
+const { 
+  fileName, repoID, objID, path
+} = window.app.pageOptions;
+
+function Download() {
+  return (
+    <a href={`${siteRoot}repo/${repoID}/${objID}/download/?file_name=${encodeURIComponent(fileName)}&p=${encodeURIComponent(path)}`} className="btn btn-secondary">{gettext('Download')}</a>
+  );
+}
+
+export default Download;

frontend/src/components/history-trash-file-view/file-view-tip.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import Download from './download';
+
+const propTypes = {
+  err: PropTypes.string
+};
+const { canDownloadFile, err } = window.app.pageOptions;
+const UNSUPPORTED = 'File preview unsupported';
+
+class FileViewTip extends React.Component {
+
+  render() {
+    let errorMsg;
+    if (err == UNSUPPORTED || this.props.err == UNSUPPORTED) {
+      errorMsg = <p>{gettext('Online view is not applicable to this file format')}</p>;
+    } else {
+      errorMsg = <p className="error">{err}</p>;
+    }
+
+    return (
+      <div className="file-view-content flex-1 o-auto">
+        <div className="file-view-tip">
+          {errorMsg}
+          {canDownloadFile && <Download />}
+        </div>
+      </div>
+    );  
+  }
+}
+FileViewTip.propTypes = propTypes;
+
+export default FileViewTip;

frontend/src/components/history-trash-file-view/file-view.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import watermark from 'watermark-dom';
+import { gettext, siteName } from '../../utils/constants';
+import Download from './download';
+
+import '../../css/file-view.css';
+
+const propTypes = {
+  content: PropTypes.object.isRequired
+};
+
+const {
+  fromTrash,
+  fileName, commitTime,
+  canDownloadFile,
+  enableWatermark, userNickName
+} = window.app.pageOptions;
+
+
+class FileView extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="h-100 d-flex flex-column">
+        <div className="file-view-header d-flex justify-content-between align-items-center">
+          <div>
+            <h2 className="file-title">{fileName}</h2>
+            <p className="meta-info m-0">{fromTrash ? `${gettext('Current Path: ')}${gettext('Trash')}`: commitTime}</p>
+          </div>
+          {canDownloadFile && <Download />}
+        </div>
+        <div className="file-view-body flex-auto d-flex o-hidden">
+          {this.props.content}
+        </div>
+      </div>
+    );
+  }
+}
+
+if (enableWatermark) {
+  watermark.init({
+    watermark_txt: `${siteName} ${userNickName}`,
+    watermark_alpha: 0.075
+  });
+}
+
+FileView.propTypes = propTypes;
+
+export default FileView;