[view file via shared dir] rewrote it with react (#3235)

frontend/src/components/shared-file-view/shared-file-view.js

@@ -15,7 +15,7 @@ const propTypes = {
 };
 
 let loginUser = window.app.pageOptions.name;
-const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, sharedBy, siteName, enableWatermark, download } = window.shared.pageOptions;
+const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, sharedBy, siteName, enableWatermark, download, zipped } = window.shared.pageOptions;
 
 class SharedFileView extends React.Component {
 
@@ -52,6 +52,25 @@ class SharedFileView extends React.Component {
     }
   }
 
+  renderPath = () => {
+    return (
+      <React.Fragment>
+        {zipped.map((item, index) => {
+          if (index != zipped.length - 1) {
+            return (
+              <React.Fragment key={index}>
+                <a href={`${siteRoot}d/${sharedToken}/?p=${encodeURIComponent(item.path)}`}>{item.name}</a>
+                <span> / </span>
+              </React.Fragment>
+            );
+          }
+        })
+        }
+        {zipped[zipped.length - 1].name}
+      </React.Fragment>
+    );
+  }
+
   render() {
     return (
       <div className="shared-file-view-md">
@@ -67,19 +86,20 @@ class SharedFileView extends React.Component {
           <div className="shared-file-view-head">
             <div className="float-left">
               <h2 className="ellipsis" title={fileName}>{fileName}</h2>
-              <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
+              {zipped ?
+                <p className="m-0">{gettext('Current path: ')}{this.renderPath()}</p> :
+                <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
+              }
             </div>
             {download &&
               <div className="float-right">
                 {(loginUser && loginUser !== sharedBy) &&
-                  <Button color="secondary" id="save" className="shared-file-op-btn"
+                  <Button color="secondary" id="save"
                     onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
                   </Button>
                 }{' '}
                 {!trafficOverLimit &&
-                  <Button color="success" className="shared-file-op-btn">
-                    <a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
-                  </Button>
+                <a href="?dl=1" className="btn btn-success">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
                 }
               </div>
             }

frontend/src/css/shared-file-view.css

@@ -28,11 +28,6 @@
   justify-content: space-between;
 }
 
-.shared-file-view-head a {
-  color: #fff;
-  text-decoration: none;
-}
-
 .shared-file-view-head h2 {
   color: #222;
   font-size: 1.4em;
@@ -44,10 +39,6 @@
   margin: 0;
 }
 
-.shared-file-view-head .shared-file-op-btn {
-  padding: 7px;
-}
-
 .shared-file-view-body {
   height: calc(100% - 60px);
   padding: 30px 0 15px;

frontend/src/shared-file-view-image.js

@@ -2,10 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
+import { gettext } from './utils/constants';
 
 import './css/image-file-view.css';
 
-const { fileName, rawPath, err } = window.shared.pageOptions;
+const { fileName, rawPath, err, prevImgPath, nextImgPath } = window.shared.pageOptions;
+
+const prevImgURL = `?p=${encodeURIComponent(prevImgPath)}`;
+const nextImgURL = `?p=${encodeURIComponent(nextImgPath)}`;
 
 class SharedFileViewImage extends React.Component {
   render() {
@@ -14,6 +18,18 @@ class SharedFileViewImage extends React.Component {
 }
 
 class FileContent extends React.Component {
+
+  componentDidMount() {
+    document.addEventListener('keydown', (e) => {
+      if (prevImgPath && e.keyCode == 37) { // press '<-'
+        location.href = prevImgURL;
+      }
+      if (nextImgPath && e.keyCode == 39) { // press '->'
+        location.href = nextImgURL;
+      }
+    });
+  }
+
   render() {
     if (err) {
       return <SharedFileViewTip />;
@@ -22,6 +38,12 @@ class FileContent extends React.Component {
     return (
       <div className="shared-file-view-body d-flex text-center">
         <div className="image-file-view flex-1">
+          {prevImgPath && (
+            <a href={prevImgURL} id="img-prev" title={gettext('you can also press ← ')}><span className="fas fa-chevron-left"></span></a>
+          )}
+          {nextImgPath && (
+            <a href={nextImgURL} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
+          )}
           <img src={rawPath} alt={fileName} id="image-view" />
         </div>
       </div>