update image-lightbox

package.json

@@ -3,7 +3,7 @@
   "version": "6.0.107",
   "main": "./lib/index.js",
   "dependencies": {
-    "@seafile/react-image-lightbox": "4.0.2",
+    "@seafile/react-image-lightbox": "^5.0.4",
     "@seafile/seafile-calendar": "~0.0.32",
     "@seafile/seafile-editor": "~2.0.14",
     "classnames": "~2.5.*",

src/ImagePreviewerLightbox/index.css

@@ -4,18 +4,61 @@
 }
 
 .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;
+  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;
 }

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,

src/locales/de.json

@@ -23,6 +23,11 @@
   "Specific_departments": "Bestimmte Bereiche",
   "Deleted_department": "Gelöschter Bereich",
   "View_original_image": "View original image",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Add_filter": "Filter hinzufügen",
   "And": "Und",
   "Or": "Oder",

src/locales/en.json

@@ -23,6 +23,12 @@
   "Specific_departments": "Specific departments",
   "Deleted_department": "Deleted department",
   "View_original_image": "View original image",
+
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Add_filter": "Add filter",
   "And": "And",
   "Or": "Or",

src/locales/es.json

@@ -23,6 +23,11 @@
   "Specific_departments": "Specific departments",
   "Deleted_department": "Deleted department",
   "View_original_image": "View original image",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Add_filter": "Añadir filtro",
   "And": "Y",
   "Or": "O",

src/locales/fr.json

@@ -23,6 +23,11 @@
   "Specific_departments": "Départements spécifiques",
   "Deleted_department": "Département supprimé",
   "View_original_image": "View original image",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Add_filter": "Ajouter un filtre",
   "And": "Et",
   "Or": "Ou",

src/locales/pt.json

@@ -23,6 +23,11 @@
   "Specific_departments": "Specific departments",
   "Deleted_department": "Deleted department",
   "View_original_image": "View original image",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Add_filter": "Adicione o filtro",
   "And": "E",
   "Or": "Ou",

src/locales/ru.json

@@ -23,6 +23,11 @@
   "Specific_departments": "Указанные отделы",
   "Deleted_department": "Удаленный отдел",
   "View_original_image": "View original image",
+  "Rotate_image": "Rotate image",
+  "Delete_image": "delete image",
+  "Download_image": "Download image",
+  "Zoom_in": "Zoom in",
+  "Zoom_out": "Zoom out",
   "Add_filter": "Добавить фильтр",
   "And": "И",
   "Or": "Или",

src/locales/zh-CN.json

@@ -23,6 +23,11 @@
   "Specific_departments": "具体部门",
   "Deleted_department": "已删除部门",
   "View_original_image": "View original image",
+  "Rotate_image": "旋转",
+  "Delete_image": "删除",
+  "Download_image": "下载",
+  "Zoom_in": "放大",
+  "Zoom_out": "缩小",
   "Add_filter": "增加过滤条件",
   "And": "并且",
   "Or": "或者",