[improvement] use component ImageDialog for 'show image with popup' (#3229)

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -9,12 +9,10 @@ import Copy from '../../components/dialog/copy-dirent-dialog';
 import Move from '../../components/dialog/move-dirent-dialog';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
+import ImageDialog from '../../components/dialog/image-dialog';
 import { siteRoot, gettext, thumbnailSizeForOriginal } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
-import Lightbox from 'react-image-lightbox';
-import 'react-image-lightbox/style.css';
-
 const propTypes = {
   currentPath: PropTypes.string.isRequired,
   repoPermission: PropTypes.bool.isRequired,
@@ -137,11 +135,11 @@ class DirColumnNav extends React.Component {
   }
 
   onCopyToggle = () => {
-    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow})
+    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
   }
 
   onMoveToggle = () => {
-    this.setState({isMoveDialogShow: !this.state.isMoveDialogShow})
+    this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
   }
 
   onAddFolderNode = (dirPath) => {
@@ -191,7 +189,7 @@ class DirColumnNav extends React.Component {
     });
     let imageNames = items.map((item) => {
       return item.object.name;
-    })
+    });
     this.setState({
       isNodeImagePopupOpen: true,
       imageNodeItems: this.prepareImageItems(node),
@@ -254,18 +252,6 @@ class DirColumnNav extends React.Component {
   render() {
     let flex = this.props.navRate ? '0 0 ' + this.props.navRate * 100 + '%' : '0 0 25%';
     const select = this.props.inResizing ? 'none' : '';
-
-    const imageNodeItems = this.state.imageNodeItems;
-    const imageIndex = this.state.imageIndex;
-    const imageItemsLength = imageNodeItems.length; 
-    const imageCaption = imageItemsLength && (
-      <Fragment>
-        <span>{gettext('%curr% of %total%').replace('%curr%', imageIndex + 1).replace('%total%', imageItemsLength)}</span>
-        <br />
-        <a href={imageNodeItems[imageIndex].url} target="_blank">{gettext('Open in New Tab')}</a>
-      </Fragment>
-    );
-
     return (
       <Fragment>
         <div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}}>
@@ -355,23 +341,15 @@ class DirColumnNav extends React.Component {
           </ModalPortal>
         )}
         {this.state.isNodeImagePopupOpen && (
-            <Lightbox
-              mainSrc={imageNodeItems[imageIndex].src}
-              imageCaption={imageCaption}
-              imageTitle={imageNodeItems[imageIndex].name}
-              nextSrc={imageNodeItems[(imageIndex + 1) % imageItemsLength].src}
-              prevSrc={imageNodeItems[(imageIndex + imageItemsLength - 1) % imageItemsLength].src}
-              onCloseRequest={this.closeNodeImagePopup}
-              onMovePrevRequest={this.moveToPrevImage}
-              onMoveNextRequest={this.moveToNextImage}
-              imagePadding={70}
-              imageLoadErrorMessage={gettext('The image could not be loaded.')}
-              prevLabel={gettext('Previous (Left arrow key)')}
-              nextLabel={gettext('Next (Right arrow key)')}
-              closeLabel={gettext('Close (Esc)')}
-              zoomInLabel={gettext('Zoom in')}
-              zoomOutLabel={gettext('Zoom out')}
+          <ModalPortal>
+            <ImageDialog
+              imageItems={this.state.imageNodeItems}
+              imageIndex={this.state.imageIndex}
+              closeImagePopup={this.closeNodeImagePopup}
+              moveToPrevImage={this.moveToPrevImage}
+              moveToNextImage={this.moveToNextImage}
             />
+          </ModalPortal>
         )}
       </Fragment>
     );

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -6,9 +6,7 @@ import Loading from '../loading';
 import DirentListItem from './dirent-list-item';
 import ModalPortal from '../modal-portal';
 import CreateFile from '../../components/dialog/create-file-dialog';
-
-import Lightbox from 'react-image-lightbox';
-import 'react-image-lightbox/style.css';
+import ImageDialog from '../../components/dialog/image-dialog';
 
 import '../../css/tip-for-new-md.css';
 import toaster from '../toast';
@@ -71,7 +69,7 @@ class DirentListView extends React.Component {
     if (thead) {
       thead.addEventListener('contextmenu', (e) => {
         e.stopPropagation();
-      })
+      });
     }
   }
 
@@ -138,45 +136,42 @@ class DirentListView extends React.Component {
   }
 
   // for image popup
-  prepareImageItems = () => {
-    let items = this.props.direntList.filter((item) => {
-      return Utils.imageCheck(item.name);
-    });
-
+  prepareImageItem = (item) => {
     const useThumbnail = !this.repoEncrypted;
-    let prepareItem = (item) => {
-      const name = item.name;
+    const name = item.name;
 
-      const fileExt = name.substr(name.lastIndexOf('.') + 1).toLowerCase();
-      const isGIF = fileExt == 'gif';
+    const fileExt = name.substr(name.lastIndexOf('.') + 1).toLowerCase();
+    const isGIF = fileExt == 'gif';
 
-      const path = Utils.encodePath(Utils.joinPath(this.props.path, name));
-      const repoID = this.props.repoID;
-      let src;
-      if (useThumbnail && !isGIF) {
-        src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`;
-      } else {
-        src = `${siteRoot}repo/${repoID}/raw${path}`;
-      }
+    const path = Utils.encodePath(Utils.joinPath(this.props.path, name));
+    const repoID = this.props.repoID;
+    let src;
+    if (useThumbnail && !isGIF) {
+      src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`;
+    } else {
+      src = `${siteRoot}repo/${repoID}/raw${path}`;
+    }
 
-      return {
-        'name': name,
-        'url': `${siteRoot}lib/${repoID}/file${path}`,
-        'src': src
-      };
+    return {
+      'name': name,
+      'url': `${siteRoot}lib/${repoID}/file${path}`,
+      'src': src
     };
-
-    return items.map((item) => { return prepareItem(item); });
   }
 
-  showImagePopup = (dirent) => {
+  showImagePopup = (curItem) => {
     let items = this.props.direntList.filter((item) => {
       return Utils.imageCheck(item.name);
     });
+
+    const imageItems = items.map((item) => {
+      return this.prepareImageItem(item);
+    });
+
     this.setState({
       isImagePopupOpen: true,
-      imageItems: this.prepareImageItems(),
-      imageIndex: items.indexOf(dirent)
+      imageItems: imageItems,
+      imageIndex: items.indexOf(curItem)
     });
   }
 
@@ -256,18 +251,6 @@ class DirentListView extends React.Component {
     const sortByTime = sortBy == 'time';
     const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
 
-    // for image popup
-    const imageItems = this.state.imageItems;
-    const imageIndex = this.state.imageIndex;
-    const imageItemsLength = imageItems.length;
-    const imageCaption = imageItemsLength && (
-      <Fragment>
-        <span>{gettext('%curr% of %total%').replace('%curr%', imageIndex + 1).replace('%total%', imageItemsLength)}</span>
-        <br />
-        <a href={imageItems[imageIndex].url} target="_blank">{gettext('Open in New Tab')}</a>
-      </Fragment>
-    );
-
     return (
       <Fragment>
         <table>
@@ -326,23 +309,15 @@ class DirentListView extends React.Component {
         </table>
 
         {this.state.isImagePopupOpen && (
-          <Lightbox
-            mainSrc={imageItems[imageIndex].src}
-            imageTitle={imageItems[imageIndex].name}
-            imageCaption={imageCaption}
-            nextSrc={imageItems[(imageIndex + 1) % imageItemsLength].src}
-            prevSrc={imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength].src}
-            onCloseRequest={this.closeImagePopup}
-            onMovePrevRequest={this.moveToPrevImage}
-            onMoveNextRequest={this.moveToNextImage}
-            imagePadding={70}
-            imageLoadErrorMessage={gettext('The image could not be loaded.')}
-            prevLabel={gettext('Previous (Left arrow key)')}
-            nextLabel={gettext('Next (Right arrow key)')}
-            closeLabel={gettext('Close (Esc)')}
-            zoomInLabel={gettext('Zoom in')}
-            zoomOutLabel={gettext('Zoom out')}
-          />
+          <ModalPortal>
+            <ImageDialog
+              imageItems={this.state.imageItems}
+              imageIndex={this.state.imageIndex}
+              closeImagePopup={this.closeImagePopup}
+              moveToPrevImage={this.moveToPrevImage}
+              moveToNextImage={this.moveToNextImage}
+            />
+          </ModalPortal>
         )}
       </Fragment>
     );