From 699b409e87c2f1ec6e7186c5195462e9fa1c94d9 Mon Sep 17 00:00:00 2001
From: Guodong Su <stephen.su66@gmail.com>
Date: Sun, 23 Nov 2025 03:49:13 -0500
Subject: [PATCH] feat: update image lightbox

---
 src/Comment/body/comment.js                                | 5 +++++
 src/Comment/footer/input/index.js                          | 5 +++++
 src/FileEditor/files-previewer/pc-previewer/index.js       | 5 +++++
 src/FileFormatter/index.js                                 | 1 +
 src/ImageEditor/images-previewer/index.js                  | 5 +++++
 src/ImageEditor/pc-editor/images-previewer/index.js        | 5 +++++
 src/ImageFormatter/index.js                                | 5 +++++
 src/ImagePreviewerLightbox/index.js                        | 5 ++++-
 src/RowExpandEditor/digital-sign-editor/pc-editor/index.js | 1 +
 src/RowExpandEditor/image-editor/pc-editor/index.js        | 1 +
 src/RowExpandFormatter/image-formatter/index.js            | 5 +++++
 11 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/Comment/body/comment.js b/src/Comment/body/comment.js
index 00727e88..564b4a32 100644
--- a/src/Comment/body/comment.js
+++ b/src/Comment/body/comment.js
@@ -81,6 +81,10 @@ class Comment extends PureComponent {
     });
   };
 
+  setImageIndex = (index) => {
+    this.setState({ largeImageIndex: index });
+  };
+
   isCommentUserExist = (commentItem) => {
     const { collaborators } = this.props;
     return !!collaborators.find(collaborator => collaborator.email === commentItem.author);
@@ -167,6 +171,7 @@ class Comment extends PureComponent {
             closeImagePopup={this.hideLargeImage}
             moveToPrevImage={this.movePrev}
             moveToNextImage={this.moveNext}
+            setImageIndex={this.setImageIndex}
           />
         )}
       </div>
diff --git a/src/Comment/footer/input/index.js b/src/Comment/footer/input/index.js
index 993d31af..2c7e288a 100644
--- a/src/Comment/footer/input/index.js
+++ b/src/Comment/footer/input/index.js
@@ -376,6 +376,10 @@ class Input extends React.Component {
     this.onSelectCollaborator(filteredCollaborators[activeCollaboratorIndex]);
   };
 
+  setImageIndex = (index) => {
+    this.setState({ largeImageIndex: index });
+  };
+
   render() {
     const { api } = this.props;
     const { imageUrlList, largeImageIndex, filteredCollaborators, activeCollaboratorIndex } = this.state;
@@ -421,6 +425,7 @@ class Input extends React.Component {
             closeImagePopup={this.hideLargeImage}
             moveToPrevImage={this.movePrev}
             moveToNextImage={this.moveNext}
+            setImageIndex={this.setImageIndex}
           />
         }
         <FileUploader
diff --git a/src/FileEditor/files-previewer/pc-previewer/index.js b/src/FileEditor/files-previewer/pc-previewer/index.js
index 876829e9..28fec791 100644
--- a/src/FileEditor/files-previewer/pc-previewer/index.js
+++ b/src/FileEditor/files-previewer/pc-previewer/index.js
@@ -165,6 +165,10 @@ class PCFilesPreviewer extends React.Component {
     this.onChangeSelectMultipleFiles(false);
   };
 
+  setImageIndex = (index) => {
+    this.setState({ largeImageIndex: index });
+  };
+
   renderFilesOperation = () => {
     const { value, deleteFiles, getDownLoadFiles } = this.props;
     const { isSelectMultipleFiles, selectedFilesList } = this.state;
@@ -238,6 +242,7 @@ class PCFilesPreviewer extends React.Component {
             deleteImage={this.deleteImage}
             downloadImage={this.downloadImage}
             onRotateImage={this.onRotateImage}
+            setImageIndex={this.setImageIndex}
           />
         }
         <DTableCommonAddTool className="dtable-ui-file-editor-previewer-add-btn" callBack={this.togglePreviewer} footerName={getLocale('Add_files')} />
diff --git a/src/FileFormatter/index.js b/src/FileFormatter/index.js
index e0089a6b..e3d20312 100644
--- a/src/FileFormatter/index.js
+++ b/src/FileFormatter/index.js
@@ -108,6 +108,7 @@ const FileFormatter = ({
           closeImagePopup={hideLargeImage}
           moveToPrevImage={movePrev}
           moveToNextImage={moveNext}
+          setImageIndex={setLargeImageIndex}
         />
       )}
     </div>
diff --git a/src/ImageEditor/images-previewer/index.js b/src/ImageEditor/images-previewer/index.js
index 42ca3e2e..9cfb56e5 100644
--- a/src/ImageEditor/images-previewer/index.js
+++ b/src/ImageEditor/images-previewer/index.js
@@ -71,6 +71,10 @@ class ImagesPreviewer extends React.Component {
     }));
   };
 
+  setImageIndex = (index) => {
+    this.setState({ largeImageIndex: index });
+  };
+
   togglePreviewer = () => {
     this.props.togglePreviewer(FILE_EDITOR_STATUS.ADDITION);
     this.props.resetAdditionImage();
@@ -135,6 +139,7 @@ class ImagesPreviewer extends React.Component {
             deleteImage={this.props.deleteImage ? this.deleteImage : null}
             downloadImage={this.downloadImage}
             onRotateImage={this.props.onRotateImage}
+            setImageIndex={this.setImageIndex}
           />
         )}
         <DTableCommonAddTool callBack={this.togglePreviewer} footerName={getLocale('Add_images')} />
diff --git a/src/ImageEditor/pc-editor/images-previewer/index.js b/src/ImageEditor/pc-editor/images-previewer/index.js
index e8c67c10..2c5f5280 100644
--- a/src/ImageEditor/pc-editor/images-previewer/index.js
+++ b/src/ImageEditor/pc-editor/images-previewer/index.js
@@ -70,6 +70,10 @@ class ImagesPreviewer extends React.Component {
     }));
   };
 
+  setImageIndex = (index) => {
+    this.setState({ largeImageIndex: index });
+  };
+
   togglePreviewer = () => {
     this.props.togglePreviewer(FILE_EDITOR_STATUS.ADDITION);
     this.props.resetAdditionImage();
@@ -134,6 +138,7 @@ class ImagesPreviewer extends React.Component {
             deleteImage={this.props.deleteImage ? this.deleteImage : null}
             downloadImage={this.downloadImage}
             onRotateImage={this.props.onRotateImage}
+            setImageIndex={this.setImageIndex}
           />
         )}
         <DTableCommonAddTool callBack={this.togglePreviewer} footerName={getLocale('Add_images')} />
diff --git a/src/ImageFormatter/index.js b/src/ImageFormatter/index.js
index 3d6f1bfc..e30a7e04 100644
--- a/src/ImageFormatter/index.js
+++ b/src/ImageFormatter/index.js
@@ -55,6 +55,10 @@ class ImageFormatter extends React.Component {
     }));
   };
 
+  setImageIndex = (index) => {
+    this.setState({ previewImageIndex: index });
+  };
+
   downloadImage = (imageItemUrl) => {
     if (!this.props.downloadImage) return;
     this.props.downloadImage(imageItemUrl);
@@ -97,6 +101,7 @@ class ImageFormatter extends React.Component {
             imageItems={value}
             className={lightboxClassName}
             imageIndex={previewImageIndex}
+            setImageIndex={this.setImageIndex}
             closeImagePopup={this.closeImagePopup}
             moveToPrevImage={this.movePrev}
             moveToNextImage={this.moveNext}
diff --git a/src/ImagePreviewerLightbox/index.js b/src/ImagePreviewerLightbox/index.js
index 55b37b8f..393b4efa 100644
--- a/src/ImagePreviewerLightbox/index.js
+++ b/src/ImagePreviewerLightbox/index.js
@@ -11,7 +11,7 @@ import './index.css';
 function ImagePreviewerLightbox(props) {
   const {
     imageItems, imageIndex, readOnly, className, server, workspaceID, dtableUuid,
-    deleteImage, downloadImage, onRotateImage,
+    deleteImage, downloadImage, onRotateImage, setImageIndex
   } = props;
   const imageSrcList = imageItems.map((src) => {
     if (server && dtableUuid && isCustomAssetUrl(src)) {
@@ -55,6 +55,9 @@ function ImagePreviewerLightbox(props) {
 
   return (
     <Lightbox
+      imageItems={imageSrcList}            
+      currentIndex={imageIndex}
+      setImageIndex={setImageIndex}
       wrapperClassName={classnames('dtable-ui-component', className)}
       imageTitle={imageTitleDOM}
       mainSrc={mainSrc}
diff --git a/src/RowExpandEditor/digital-sign-editor/pc-editor/index.js b/src/RowExpandEditor/digital-sign-editor/pc-editor/index.js
index bcbcea07..c5c7a85c 100644
--- a/src/RowExpandEditor/digital-sign-editor/pc-editor/index.js
+++ b/src/RowExpandEditor/digital-sign-editor/pc-editor/index.js
@@ -180,6 +180,7 @@ class RowExpandPCDigitalSignEditor extends React.Component {
             deleteImage={(index) => {
               this.deleteImage(index); this.hideLargeImage();
             }}
+            setImageIndex={this.setLargeImageIndex}
           />
         }
       </div>
diff --git a/src/RowExpandEditor/image-editor/pc-editor/index.js b/src/RowExpandEditor/image-editor/pc-editor/index.js
index 27b30537..ee20e0da 100644
--- a/src/RowExpandEditor/image-editor/pc-editor/index.js
+++ b/src/RowExpandEditor/image-editor/pc-editor/index.js
@@ -158,6 +158,7 @@ class RowExpandPCImageEditor extends React.Component {
             closeImagePopup={this.hideLargeImage}
             moveToPrevImage={this.moveToPrevImage}
             moveToNextImage={this.moveToNextImage}
+            setImageIndex={this.setLargeImageIndex}
           />
         }
       </>
diff --git a/src/RowExpandFormatter/image-formatter/index.js b/src/RowExpandFormatter/image-formatter/index.js
index 9be9b8fd..7270d151 100644
--- a/src/RowExpandFormatter/image-formatter/index.js
+++ b/src/RowExpandFormatter/image-formatter/index.js
@@ -63,6 +63,10 @@ export default class RowExpandImageFormatter extends React.Component {
     }));
   };
 
+  setImageIndex = (index) => {
+    this.setState({ previewImageIndex: index });
+  };
+
   render() {
     const { value, server, containerClassName, readOnly, column } = this.props;
     const { isPreviewImage, previewImageIndex } = this.state;
@@ -91,6 +95,7 @@ export default class RowExpandImageFormatter extends React.Component {
           <ImagePreviewerLightbox
             imageItems={value}
             imageIndex={previewImageIndex}
+            setImageIndex={this.setImageIndex}
             closeImagePopup={this.closeImagePopup}
             moveToPrevImage={this.movePrev}
             moveToNextImage={this.moveNext}