Skip to content

Commit d9fe262

Browse files
gzcqqqqqqqq1gzcqqqqqqqq1
committed
update image-lightbox
1 parent e5474cf commit d9fe262

11 files changed

Lines changed: 128 additions & 22 deletions

File tree

‎package-lock.json‎

Lines changed: 23 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "dtable-ui-component",
3-
"version": "6.0.105",
3+
"version": "6.0.106-btuk.3",
44
"main": "./lib/index.js",
55
"dependencies": {
6-
"@seafile/react-image-lightbox": "4.0.2",
6+
"@seafile/react-image-lightbox": "^5.0.4",
77
"@seafile/seafile-calendar": "~0.0.32",
88
"@seafile/seafile-editor": "~2.0.14",
99
"classnames": "~2.5.*",

‎src/ImagePreviewerLightbox/index.css‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,61 @@
44
}
55

66
.ril__outer .ril__toolbarItem {
7-
height: 50px;
8-
color: #fff;
9-
display: inline-block;
10-
font-size: 120%;
11-
line-height: 50px;
127
max-width: 100%;
13-
overflow: hidden;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
1411
padding: 0;
12+
color: #fff;
13+
overflow: hidden;
1514
text-overflow: ellipsis;
1615
white-space: nowrap;
1716
}
1817

18+
.ril__outer .ril__toolbarItem button {
19+
background-size: 20px;
20+
width: 100%;
21+
}
22+
23+
.ril__builtinButton:hover,
24+
.ril__builtinButton:focus {
25+
background-color: #666;
26+
opacity: 1 !important;
27+
}
28+
29+
.ril__viewOriginalButton {
30+
height: 40px;
31+
width: 178px!important;
32+
-ms-flex-negative: 0;
33+
background: #333;
34+
border-radius: 8px;
35+
color: #fff;
36+
flex-shrink: 0;
37+
font-size: 16px;
38+
font-style: normal;
39+
font-weight: 400;
40+
line-height: normal
41+
}
42+
43+
.mobile-image-footer-choice .ril__builtinButton {
44+
opacity: 1 !important;
45+
}
46+
47+
.ril__builtinButton:hover,
48+
.ril__builtinButton:focus {
49+
background-color: #666 !important;
50+
opacity: 1 !important;
51+
}
52+
53+
.ril__builtinButtonDisabled {
54+
cursor: default;
55+
opacity: 0.5 !important;
56+
}
57+
58+
.ril__builtinButtonDisabled:hover {
59+
opacity: 0.5 !important;
60+
}
61+
1962
.ril-caption .ril__builtinButton {
2063
width: 24px;
2164
}

‎src/ImagePreviewerLightbox/index.js‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,12 @@ function ImagePreviewerLightbox(props) {
2727
});
2828

2929
const imagesLength = imageSrcList.length;
30-
const URL = imageSrcList[imageIndex];
30+
const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex || 0);
31+
const URL = imageSrcList[currentImageIndex];
3132

33+
React.useEffect(() => {
34+
setCurrentImageIndex(imageIndex);
35+
}, [imageIndex]);
3236

3337
// Handle URL has special symbol %$
3438
let imageName = '';
@@ -49,17 +53,20 @@ function ImagePreviewerLightbox(props) {
4953
const imageTitleDOM = props.imageTitle || (
5054
<span className="d-flex">
5155
<span className="text-truncate">{imageName}</span>
52-
<span className="flex-shrink-0 pl-1">({imageIndex + 1}/{imagesLength})</span>
56+
<span className="flex-shrink-0 pl-1">({currentImageIndex + 1}/{imagesLength})</span>
5357
</span>
5458
);
5559

5660
return (
5761
<Lightbox
62+
imageItems={imageSrcList}
63+
currentIndex={currentImageIndex}
64+
setImageIndex={index => setCurrentImageIndex(index)}
5865
wrapperClassName={classnames('dtable-ui-component', className)}
5966
imageTitle={imageTitleDOM}
6067
mainSrc={mainSrc}
61-
nextSrc={imageSrcList[(imageIndex + 1) % imagesLength]}
62-
prevSrc={imageSrcList[(imageIndex + imagesLength - 1) % imagesLength]}
68+
nextSrc={imageSrcList[(currentImageIndex + 1) % imagesLength]}
69+
prevSrc={imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength]}
6370
imagePadding={70}
6471
viewOriginalImageLabel={getLocale('View_original_image')}
6572
enableRotate={canRotateImage}
@@ -69,9 +76,14 @@ function ImagePreviewerLightbox(props) {
6976
onClickMoveUp={props.moveToPrevRowImage}
7077
onClickMoveDown={props.moveToNextRowImage}
7178
onViewOriginal={props.onViewOriginal}
72-
onRotateImage={canRotateImage ? (deg) => {onRotateImage(imageIndex, deg);} : null}
73-
onClickDelete={(!readOnly && deleteImage) ? () => {deleteImage(imageIndex, 'previewer');} : null}
79+
onRotateImage={canRotateImage ? (deg) => {onRotateImage(currentImageIndex, deg);} : null}
80+
onClickDelete={(!readOnly && deleteImage) ? () => {deleteImage(currentImageIndex, 'previewer');} : null}
7481
onClickDownload={downloadImage ? () => {downloadImage(URL);} : null}
82+
zoomInTip={getLocale('Zoom_in')}
83+
zoomOutTip={getLocale('Zoom_out')}
84+
rotateTip={getLocale('Rotate_image')}
85+
deleteTip={getLocale('Delete_image')}
86+
downloadImageTip={getLocale('Download_image')}
7587
/>
7688
);
7789
}
@@ -89,8 +101,6 @@ ImagePreviewerLightbox.propTypes = {
89101
moveToNextRowImage: PropTypes.func,
90102
onViewOriginal: PropTypes.func,
91103
closeImagePopup: PropTypes.func.isRequired,
92-
moveToPrevImage: PropTypes.func.isRequired,
93-
moveToNextImage: PropTypes.func.isRequired,
94104
downloadImage: PropTypes.func,
95105
deleteImage: PropTypes.func,
96106
onRotateImage: PropTypes.func,

‎src/locales/de.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
"Specific_departments": "Bestimmte Bereiche",
2424
"Deleted_department": "Gelöschter Bereich",
2525
"View_original_image": "View original image",
26+
"Rotate_image": "Rotate image",
27+
"Delete_image": "delete image",
28+
"Download_image": "Download image",
29+
"Zoom_in": "Zoom in",
30+
"Zoom_out": "Zoom out",
2631
"Add_filter": "Filter hinzufügen",
2732
"And": "Und",
2833
"Or": "Oder",

‎src/locales/en.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@
2323
"Specific_departments": "Specific departments",
2424
"Deleted_department": "Deleted department",
2525
"View_original_image": "View original image",
26+
27+
"Rotate_image": "Rotate image",
28+
"Delete_image": "delete image",
29+
"Download_image": "Download image",
30+
"Zoom_in": "Zoom in",
31+
"Zoom_out": "Zoom out",
2632
"Add_filter": "Add filter",
2733
"And": "And",
2834
"Or": "Or",

‎src/locales/es.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
"Specific_departments": "Specific departments",
2424
"Deleted_department": "Deleted department",
2525
"View_original_image": "View original image",
26+
"Rotate_image": "Rotate image",
27+
"Delete_image": "delete image",
28+
"Download_image": "Download image",
29+
"Zoom_in": "Zoom in",
30+
"Zoom_out": "Zoom out",
2631
"Add_filter": "Añadir filtro",
2732
"And": "Y",
2833
"Or": "O",

‎src/locales/fr.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
"Specific_departments": "Départements spécifiques",
2424
"Deleted_department": "Département supprimé",
2525
"View_original_image": "View original image",
26+
"Rotate_image": "Rotate image",
27+
"Delete_image": "delete image",
28+
"Download_image": "Download image",
29+
"Zoom_in": "Zoom in",
30+
"Zoom_out": "Zoom out",
2631
"Add_filter": "Ajouter un filtre",
2732
"And": "Et",
2833
"Or": "Ou",

‎src/locales/pt.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
"Specific_departments": "Specific departments",
2424
"Deleted_department": "Deleted department",
2525
"View_original_image": "View original image",
26+
"Rotate_image": "Rotate image",
27+
"Delete_image": "delete image",
28+
"Download_image": "Download image",
29+
"Zoom_in": "Zoom in",
30+
"Zoom_out": "Zoom out",
2631
"Add_filter": "Adicione o filtro",
2732
"And": "E",
2833
"Or": "Ou",

‎src/locales/ru.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
"Specific_departments": "Указанные отделы",
2424
"Deleted_department": "Удаленный отдел",
2525
"View_original_image": "View original image",
26+
"Rotate_image": "Rotate image",
27+
"Delete_image": "delete image",
28+
"Download_image": "Download image",
29+
"Zoom_in": "Zoom in",
30+
"Zoom_out": "Zoom out",
2631
"Add_filter": "Добавить фильтр",
2732
"And": "И",
2833
"Or": "Или",

0 commit comments

Comments
 (0)