From c69cf67c68c0df8972779d87e0181cdcdebfad47 Mon Sep 17 00:00:00 2001 From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com> Date: Fri, 3 Apr 2026 10:06:07 +0800 Subject: [PATCH 1/2] update react image component --- package-lock.json | 29 ++++---------- package.json | 2 +- src/ImagePreviewerLightbox/index.css | 56 +++++++++++++++++++++++++--- src/ImagePreviewerLightbox/index.js | 26 +++++++++---- src/locales/de.json | 5 +++ src/locales/en.json | 5 +++ src/locales/es.json | 5 +++ src/locales/fr.json | 5 +++ src/locales/pt.json | 5 +++ src/locales/ru.json | 5 +++ src/locales/zh-CN.json | 5 +++ 11 files changed, 112 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index 40f6f19f..1fbded72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "dtable-ui-component", "version": "6.0.107", "dependencies": { - "@seafile/react-image-lightbox": "4.0.2", + "@seafile/react-image-lightbox": "^5.0.4", "@seafile/seafile-calendar": "~0.0.32", "@seafile/seafile-editor": "^3.0.24", "classnames": "~2.5.*", @@ -5266,12 +5266,15 @@ "dev": true }, "node_modules/@seafile/react-image-lightbox": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@seafile/react-image-lightbox/-/react-image-lightbox-4.0.2.tgz", - "integrity": "sha512-rQy2X1JDltLE9hLcOQIee6dxW3UwUtWhjgbcOt/aq1BkqWG3mWzGdnHBUmFGfJMvwdbMgEPbDD3yDErBYy6P3w==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@seafile/react-image-lightbox/-/react-image-lightbox-5.0.4.tgz", + "integrity": "sha512-vOOZayfjjMM2UD0O5/4TrHq8KImFf05jmAxErAY9LK/jLP96hVk1UL0mNac27IfQ4LiMsW8Ql32Zxt/EWXn1MQ==", + "license": "MIT", "dependencies": { + "classnames": "^2.3.2", "prop-types": "^15.8.1", - "react-modal": "^3.16.1" + "react-modal": "^3.16.1", + "reactstrap": "^9.2.3" }, "peerDependencies": { "react": "^16.x || ^17.x || ^18.x", @@ -5328,22 +5331,6 @@ "xtend": "4.0.2" } }, - "node_modules/@seafile/seafile-editor/node_modules/@seafile/react-image-lightbox": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/@seafile/react-image-lightbox/-/react-image-lightbox-5.0.4.tgz", - "integrity": "sha512-vOOZayfjjMM2UD0O5/4TrHq8KImFf05jmAxErAY9LK/jLP96hVk1UL0mNac27IfQ4LiMsW8Ql32Zxt/EWXn1MQ==", - "license": "MIT", - "dependencies": { - "classnames": "^2.3.2", - "prop-types": "^15.8.1", - "react-modal": "^3.16.1", - "reactstrap": "^9.2.3" - }, - "peerDependencies": { - "react": "^16.x || ^17.x || ^18.x", - "react-dom": "^16.x || ^17.x || ^18.x" - } - }, "node_modules/@seafile/seafile-editor/node_modules/classnames": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", diff --git a/package.json b/package.json index 9b7e5015..5cf09125 100644 --- a/package.json +++ b/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": "^3.0.24", "classnames": "~2.5.*", diff --git a/src/ImagePreviewerLightbox/index.css b/src/ImagePreviewerLightbox/index.css index 49e867b3..5f176698 100644 --- 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 index 55b37b8f..08512fc4 100644 --- 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 || ( {imageName} - ({imageIndex + 1}/{imagesLength}) + ({currentImageIndex + 1}/{imagesLength}) ); return ( 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 index 4f8253f4..c3b07b18 100644 --- 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 index d91a061e..148a03a8 100644 --- 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 index c726b749..5c6b00dc 100644 --- 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 index ca2cc026..063af647 100644 --- 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 index b9aea184..af49307f 100644 --- 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 index e8b9093e..b50005c9 100644 --- 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 index 96b5387f..2f43d591 100644 --- 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": "清除", From 9d8d57fc301f10bebb0fd57ef1359fcfe93f2af7 Mon Sep 17 00:00:00 2001 From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com> Date: Fri, 3 Apr 2026 16:47:51 +0800 Subject: [PATCH 2/2] update calendar style --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1fbded72..47de9bb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "6.0.107", "dependencies": { "@seafile/react-image-lightbox": "^5.0.4", - "@seafile/seafile-calendar": "~0.0.32", + "@seafile/seafile-calendar": "^1.0.8", "@seafile/seafile-editor": "^3.0.24", "classnames": "~2.5.*", "dayjs": "1.10.7", @@ -5282,9 +5282,9 @@ } }, "node_modules/@seafile/seafile-calendar": { - "version": "0.0.88899", - "resolved": "https://registry.npmjs.org/@seafile/seafile-calendar/-/seafile-calendar-0.0.88899.tgz", - "integrity": "sha512-Uvv0YWvYd7lihFA0PeGH1c4MwCP67MHRSvO3XHxmPDHT0mZOuXCPAMxye0qk/zcQKk4hxm2tpRCElqse2gIscQ==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@seafile/seafile-calendar/-/seafile-calendar-1.0.8.tgz", + "integrity": "sha512-XQb4SbrEHA3V8R6TUHQ8wki7ssTLX4N6kcI6Pwe8tzPg4Sy1MweiD9owHGvsslgvDdGdpwvluQERFILHv7r6Og==", "dependencies": { "babel-runtime": "6.x", "classnames": "2.x", diff --git a/package.json b/package.json index 5cf09125..9099b93c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "main": "./lib/index.js", "dependencies": { "@seafile/react-image-lightbox": "^5.0.4", - "@seafile/seafile-calendar": "~0.0.32", + "@seafile/seafile-calendar": "^1.0.8", "@seafile/seafile-editor": "^3.0.24", "classnames": "~2.5.*", "dayjs": "1.10.7",