seatable · gzcqqqqqqqq1 · Apr 3, 2026 · Apr 3, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "6.0.107",
   "main": "./lib/index.js",
   "dependencies": {
-    "@seafile/react-image-lightbox": "4.0.2",
-    "@seafile/seafile-calendar": "~0.0.32",
+    "@seafile/react-image-lightbox": "^5.0.4",
+    "@seafile/seafile-calendar": "^1.0.8",
     "@seafile/seafile-editor": "^3.0.24",
     "classnames": "~2.5.*",
     "dayjs": "1.10.7",

diff --git a/src/ImagePreviewerLightbox/index.css b/src/ImagePreviewerLightbox/index.css
@@ -4,18 +4,62 @@
 }
 
 .ril__outer .ril__toolbarItem {
-  height: 50px;
-  color: #fff;
-  display: inline-block;
-  font-size: 120%;
-  line-height: 50px;
   max-width: 100%;
-  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 0;
+  color: #fff;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.ril__outer .ril__toolbarItem button {
+  background-size: 20px;
+  opacity: 1 !important;
+  width: 100%;
+}
+
+.ril__builtinButton:hover,
+.ril__builtinButton:focus {
+  background-color: #666;
+  opacity: 1 !important;
+}
+
+.ril__viewOriginalButton {
+  height: 40px;
+  width: 178px!important;
+  -ms-flex-negative: 0;
+  background: #333;
+  border-radius: 8px;
+  color: #fff;
+  flex-shrink: 0;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal
+}
+
+.mobile-image-footer-choice .ril__builtinButton {
+  opacity: 1 !important;
+}
+
+.ril__builtinButton:hover,
+.ril__builtinButton:focus {
+  background-color: #666 !important;
+  opacity: 1 !important;
+}
+
+.ril__builtinButtonDisabled {
+  cursor: default;
+  opacity: 0.5 !important;
+}
+
+.ril__builtinButtonDisabled:hover {
+  opacity: 0.5 !important;
+}
+
 .ril-caption .ril__builtinButton {
   width: 24px;
 }
diff --git a/src/ImagePreviewerLightbox/index.js b/src/ImagePreviewerLightbox/index.js
@@ -27,8 +27,12 @@ function ImagePreviewerLightbox(props) {
   });
 
   const imagesLength = imageSrcList.length;
-  const URL = imageSrcList[imageIndex];
+  const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex || 0);
+  const URL = imageSrcList[currentImageIndex];
 
+  React.useEffect(() => {
+    setCurrentImageIndex(imageIndex);
+  }, [imageIndex]);
 
   // Handle URL has special symbol %$
   let imageName = '';
@@ -49,17 +53,20 @@ function ImagePreviewerLightbox(props) {
   const imageTitleDOM = props.imageTitle || (
     <span className="d-flex">
       <span className="text-truncate">{imageName}</span>
-      <span className="flex-shrink-0 pl-1">({imageIndex + 1}/{imagesLength})</span>
+      <span className="flex-shrink-0 pl-1">({currentImageIndex + 1}/{imagesLength})</span>
     </span>
   );
 
   return (
     <Lightbox
+      imageItems={imageSrcList}
+      currentIndex={currentImageIndex}
+      setImageIndex={index => setCurrentImageIndex(index)}
       wrapperClassName={classnames('dtable-ui-component', className)}
       imageTitle={imageTitleDOM}
       mainSrc={mainSrc}
-      nextSrc={imageSrcList[(imageIndex + 1) % imagesLength]}
-      prevSrc={imageSrcList[(imageIndex + imagesLength - 1) % imagesLength]}
+      nextSrc={imageSrcList[(currentImageIndex + 1) % imagesLength]}
+      prevSrc={imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength]}
       imagePadding={70}
       viewOriginalImageLabel={getLocale('View_original_image')}
       enableRotate={canRotateImage}
@@ -69,9 +76,14 @@ function ImagePreviewerLightbox(props) {
       onClickMoveUp={props.moveToPrevRowImage}
       onClickMoveDown={props.moveToNextRowImage}
       onViewOriginal={props.onViewOriginal}
-      onRotateImage={canRotateImage ? (deg) => {onRotateImage(imageIndex, deg);} : null}
-      onClickDelete={(!readOnly && deleteImage) ? () => {deleteImage(imageIndex, 'previewer');} : null}
+      onRotateImage={canRotateImage ? (deg) => {onRotateImage(currentImageIndex, deg);} : null}
+      onClickDelete={(!readOnly && deleteImage) ? () => {deleteImage(currentImageIndex, 'previewer');} : null}
       onClickDownload={downloadImage ? () => {downloadImage(URL);} : null}
+      zoomInTip={getLocale('Zoom_in')}
+      zoomOutTip={getLocale('Zoom_out')}
+      rotateTip={getLocale('Rotate_image')}
+      deleteTip={getLocale('Delete_image')}
+      downloadImageTip={getLocale('Download_image')}
     />
   );
 }
@@ -89,8 +101,6 @@ ImagePreviewerLightbox.propTypes = {
   moveToNextRowImage: PropTypes.func,
   onViewOriginal: PropTypes.func,
   closeImagePopup: PropTypes.func.isRequired,
-  moveToPrevImage: PropTypes.func.isRequired,
-  moveToNextImage: PropTypes.func.isRequired,
   downloadImage: PropTypes.func,
   deleteImage: PropTypes.func,
   onRotateImage: PropTypes.func,

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -9,6 +9,11 @@
   "Search_collaborator": "Mitarbeiter suchen",
   "No_collaborators_available": "Es sind keine Mitarbeiter verfügbar.",
   "Done": "Erledigt",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Wählen Sie einen Mitarbeiter",
   "Please_select": "Auswählen",
   "Clear": "Leeren",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -9,6 +9,11 @@
   "Search_collaborator": "Search collaborator",
   "No_collaborators_available": "No collaborators available.",
   "Done": "Done",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",
   "Please_select": "Please select",
   "Clear": "Clear",

diff --git a/src/locales/es.json b/src/locales/es.json
@@ -9,6 +9,11 @@
   "Search_collaborator": "Search collaborator",
   "No_collaborators_available": "No hay colaboradores disponibles.",
   "Done": "Hecho",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",
   "Please_select": "Seleccione",
   "Clear": "Limpiar",

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -9,6 +9,11 @@
   "Search_collaborator": "Rechercher des collaborateurs",
   "No_collaborators_available": "Aucun collaborateur n'est disponible.",
   "Done": "Fait",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choisissez un collaborateur",
   "Please_select": "Sélectionner",
   "Clear": "Effacer",

diff --git a/src/locales/pt.json b/src/locales/pt.json
@@ -9,6 +9,11 @@
   "Search_collaborator": "Encontre um colaborador",
   "No_collaborators_available": "Nenhum colaborador disponível.",
   "Done": "Feita",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",
   "Please_select": "Por favor, selecione",
   "Clear": "Clara",

diff --git a/src/locales/ru.json b/src/locales/ru.json
@@ -9,6 +9,11 @@
   "Search_collaborator": "Поиск сотрудника",
   "No_collaborators_available": "Нет сотрудников.",
   "Done": "Выполнено",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",
   "Please_select": "Please select",
   "Clear": "Очистить",

diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
@@ -9,6 +9,11 @@
   "Search_collaborator": "搜索协作人",
   "No_collaborators_available": "没有找到协作人",
   "Done": "完成",
+  "Rotate_image": "旋转",
+  "Delete_image": "删除",
+  "Download_image": "下载",
+  "Zoom_in": "放大",
+  "Zoom_out": "缩小",
   "Choose_a_collaborator": "选择一个协作人",
   "Please_select": "请选择",
   "Clear": "清除",