feat: update image lightbox

Author: stephensu66

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>

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

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')} />

src/FileFormatter/index.js

@@ -108,6 +108,7 @@ const FileFormatter = ({
           closeImagePopup={hideLargeImage}
           moveToPrevImage={movePrev}
           moveToNextImage={moveNext}
+          setImageIndex={setLargeImageIndex}
         />
       )}
     </div>

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')} />

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')} />

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}

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}

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>

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}
           />
         }
       </>