Skip to content

Commit

Permalink
#1133 | Update lightbox version and show a single image on click in m…
Browse files Browse the repository at this point in the history 
…odal without carousel
  • Loading branch information
@himeshr
himeshr committed Apr 4, 2024
1 parent b9e748f commit 25fecf4
Show file tree
Hide file tree
Showing 5 changed files with 27 additions and 123 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
"react-error-boundary": "^3.1.3",
"react-i18next": "^11.3.3",
"react-idle-timer": "^5.7.2",
"react-image-video-lightbox": "^2.0.2",
"react-image-video-lightbox": "3.0.1",
"react-markdown": "^4.3.1",
"react-moment": "^0.9.7",
"react-multiselect-checkboxes": "^0.1.1",
Expand Down
9 changes: 7 additions & 2 deletions src/dataEntryApp/components/MediaObservations.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import React from "react";
import ReactImageVideoLightbox from "react-image-video-lightbox";

const MediaObservations = ({ mediaDataList, currentMediaItemIndex, onClose }) => {
const MediaObservations = ({
mediaDataList,
currentMediaItemIndex,
onClose,
showResourceCount
}) => {
React.useEffect(() => {
const LightboxContainer = document.querySelector("div.mediaObservationContainer");
LightboxContainer.firstChild.style.zIndex = 1;
Expand All @@ -12,7 +17,7 @@ const MediaObservations = ({ mediaDataList, currentMediaItemIndex, onClose }) =>
<ReactImageVideoLightbox
data={mediaDataList}
startIndex={currentMediaItemIndex}
showResourceCount={true}
showResourceCount={showResourceCount}
onCloseCallback={() => onClose()}
/>
</div>
Expand Down
9 changes: 4 additions & 5 deletions src/dataEntryApp/components/MediaUploader.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Fragment, useEffect, useState } from "react";
import { get, isEmpty, includes, lowerCase, isArrayLikeObject } from "lodash";
import { get, isEmpty, includes, lowerCase, isArrayLikeObject, omit } from "lodash";
import { Box, Button, Grid, makeStyles, Typography } from "@material-ui/core";
import FormControl from "@material-ui/core/FormControl";
import http from "../../common/utils/httpClient";
Expand Down Expand Up @@ -167,10 +167,9 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
if (localObsValue === fileName) setLocalObsValue(); //Remove previous value
}
preview[fileName] && URL.revokeObjectURL(preview[fileName]);
setPreview(oldPreview => ({
...oldPreview,
[fileName]: null
}));
setPreview(oldPreview => {
return omit(oldPreview, fileName);
});
};

const mediaPreviewMap = fileToPreview => ({
Expand Down
20 changes: 6 additions & 14 deletions src/dataEntryApp/components/Observations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { subjectService } from "../services/SubjectService";
import { useTranslation } from "react-i18next";
import ErrorIcon from "@material-ui/icons/Error";
import PropTypes from "prop-types";
import { filter, find, get, includes, isEmpty, isNil, lowerCase, map } from "lodash";
import { find, get, includes, isEmpty, isNil, lowerCase, map } from "lodash";
import clsx from "clsx";
import Colors from "dataEntryApp/Colors";
import { Link } from "react-router-dom";
Expand Down Expand Up @@ -130,7 +130,7 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
const classes = useStyles();

const [showMedia, setShowMedia] = React.useState(false);
const [currentMediaItemIndex, setCurrentMediaItemIndex] = React.useState(0);
const [currentMediaItem, setCurrentMediaItem] = React.useState(null);
const [mediaDataList, setMediaDataList] = React.useState([]);

if (isNil(observations)) {
Expand Down Expand Up @@ -191,11 +191,6 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
);
};

const openMediaInNewTab = mediaUrl => {
const mediaData = mediaDataList.find(x => !_.isNil(x.url) && x.url.startsWith(mediaUrl));
window.open(mediaData.url);
};

const mediaPreviewMap = unsignedMediaUrl => ({
[Concept.dataType.Image]: (
<img
Expand Down Expand Up @@ -310,11 +305,7 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
};

const showMediaOverlay = unsignedMediaUrl => {
setCurrentMediaItemIndex(
filter(mediaDataList, mediaData => mediaData.type === "photo").findIndex(
img => img.url === unsignedMediaUrl
)
);
setCurrentMediaItem(find(mediaDataList, img => img.url === unsignedMediaUrl));
setShowMedia(true);
};

Expand Down Expand Up @@ -481,8 +472,9 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
</Table>
{showMedia && (
<MediaObservations
mediaDataList={filter(mediaDataList, mediaData => mediaData.type === "photo")}
currentMediaItemIndex={currentMediaItemIndex}
mediaDataList={[currentMediaItem]}
currentMediaItemIndex={0}
showResourceCount={false}
onClose={() => setShowMedia(false)}
/>
)}
Expand Down
110 changes: 9 additions & 101 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2091,7 +2091,7 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.0.0-beta.42", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6":
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6":
version "7.12.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
Expand Down Expand Up @@ -2462,39 +2462,6 @@
"@types/yargs" "^15.0.0"
chalk "^4.0.0"

"@material-ui/[email protected]":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-1.3.1.tgz#8b4e6db9ed4536e8ccbea0eeff3da0d524e6af2c"
integrity sha512-h5pVkHgYrKExTdll4Y2Kmvkd5Hr4MxqEQLhRxzGTaXJ8RjOuRd+plfRk5r5ZauAdrIkKEsNcEt75VlEFX9aSGw==
dependencies:
"@babel/runtime" "^7.0.0-beta.42"
"@types/jss" "^9.5.3"
"@types/react-transition-group" "^2.0.8"
brcast "^3.0.1"
classnames "^2.2.5"
csstype "^2.5.2"
debounce "^1.1.0"
deepmerge "^2.0.1"
dom-helpers "^3.2.1"
hoist-non-react-statics "^2.5.0"
jss "^9.3.3"
jss-camel-case "^6.0.0"
jss-default-unit "^8.0.2"
jss-global "^3.0.0"
jss-nested "^6.0.1"
jss-props-sort "^6.0.0"
jss-vendor-prefixer "^7.0.0"
keycode "^2.1.9"
normalize-scroll-left "^0.1.2"
prop-types "^15.6.0"
react-event-listener "^0.6.0"
react-jss "^8.1.0"
react-popper "^0.10.0"
react-transition-group "^2.2.1"
recompose "^0.27.0"
scroll "^2.0.3"
warning "^4.0.1"

"@material-ui/[email protected]":
version "4.12.4"
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
Expand Down Expand Up @@ -2546,13 +2513,6 @@
recompose "^0.28.0"
warning "^4.0.1"

"@material-ui/[email protected]":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-1.1.0.tgz#4d025df7b0ba6ace8d6710079ed76013a4d26595"
integrity sha512-Z4Xo/EYXuVqCIOjLw7AeBJPtJZsgy9dMAdqu6uYr7gxAefFA8L/QukLv/XE5ByxKYvRhzFG/AjA2OKXwKqfXBQ==
dependencies:
recompose "^0.26.0 || ^0.27.0"

"@material-ui/[email protected]":
version "4.11.3"
resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.3.tgz#b0693709f9b161ce9ccde276a770d968484ecff1"
Expand Down Expand Up @@ -8642,7 +8602,7 @@ fbjs-css-vars@^1.0.0:
resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==

fbjs@^0.8.1, fbjs@^0.8.16:
fbjs@^0.8.1:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
Expand Down Expand Up @@ -9463,14 +9423,6 @@ global@^4.3.2, global@^4.4.0:
min-document "^2.19.0"
process "^0.11.10"

global@~4.3.0:
version "4.3.2"
resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
integrity sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=
dependencies:
min-document "^2.19.0"
process "~0.5.1"

globals@^11.1.0, globals@^11.7.0:
version "11.12.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
Expand Down Expand Up @@ -15114,11 +15066,6 @@ process@^0.11.10:
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=

process@~0.5.1:
version "0.5.2"
resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
integrity sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=

progress@^2.0.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
Expand Down Expand Up @@ -15419,13 +15366,6 @@ [email protected], raf@^3.1.0, raf@^3.3.0, raf@^3.4.0:
dependencies:
performance-now "^2.1.0"

rafl@~1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/rafl/-/rafl-1.2.2.tgz#fe930f758211020d47e38815f5196a8be4150740"
integrity sha1-/pMPdYIRAg1H44gV9Rlqi+QVB0A=
dependencies:
global "~4.3.0"

ramda@^0.21.0:
version "0.21.0"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
Expand Down Expand Up @@ -15714,16 +15654,6 @@ react-docgen@^5.0.0:
node-dir "^0.1.10"
strip-indent "^3.0.0"

[email protected]:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6"
integrity sha512-1Gin+wghF/7gl4Cqcvr1DxFX2Osz7ugxSwl6gBqCMpdrxHjIFUS7GYxrFftZ9Ln44FHw0JxCFD9YtZsrbR5/4A==
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"

react-dom@^16.8.3:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
Expand Down Expand Up @@ -15791,7 +15721,7 @@ react-error-overlay@^6.0.7:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==

react-event-listener@^0.6.0, react-event-listener@^0.6.2:
react-event-listener@^0.6.2:
version "0.6.6"
resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a"
integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==
Expand Down Expand Up @@ -15845,15 +15775,10 @@ react-idle-timer@^5.7.2:
resolved "https://registry.yarnpkg.com/react-idle-timer/-/react-idle-timer-5.7.2.tgz#f506db28a86645dd1b87987116501703e512142b"
integrity sha512-+BaPfc7XEUU5JFkwZCx6fO1bLVK+RBlFH+iY4X34urvIzZiZINP6v2orePx3E6pAztJGE7t4DzvL7if2SL/0GQ==

react-image-video-lightbox@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/react-image-video-lightbox/-/react-image-video-lightbox-2.0.2.tgz#4d1ca090b0c49274388f766140baeb0bd2b5fa85"
integrity sha512-JywstWyMfSt6w3M3/Cn1JUt9pyXg4AXnxEYM/xmdh5ehE21kxFNNRHOYYhkk7SwDSQ6yLKXCZrCCCrNWdclwDw==
dependencies:
"@material-ui/core" "1.3.1"
"@material-ui/icons" "1.1.0"
react "16.4.1"
react-dom "16.4.1"
[email protected]:
version "3.0.1"
resolved "https://registry.yarnpkg.com/react-image-video-lightbox/-/react-image-video-lightbox-3.0.1.tgz#3728ceec2065268ef3638211cd41e53a451ca2f6"
integrity sha512-M1scr8HLtYqUaBD/C2FVNFPW9s3DMLG7CRusbfUW2GE/HJjQGIoj4dfYsHxMskmjV60yNgMsHMovXnRdGuekhQ==

react-input-autosize@^2.2.1, react-input-autosize@^2.2.2:
version "2.2.2"
Expand Down Expand Up @@ -15971,7 +15896,7 @@ react-popper-tooltip@^3.1.1:
"@popperjs/core" "^2.5.4"
react-popper "^2.2.4"

react-popper@^0.10.0, react-popper@^0.10.4:
react-popper@^0.10.4:
version "0.10.4"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa"
integrity sha1-rypBXqIike3VBGeNev2opu4ylao=
Expand Down Expand Up @@ -16273,16 +16198,6 @@ react-window@^1.8.5:
"@babel/runtime" "^7.0.0"
memoize-one ">=3.1.1 <6"

[email protected]:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
integrity sha512-3GEs0giKp6E0Oh/Y9ZC60CmYgUPnp7voH9fbjWsvXtYFb4EWtgQub0ADSq0sJR0BbHc4FThLLtzlcFaFXIorwg==
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"

react@^16.8.3:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
Expand Down Expand Up @@ -16416,7 +16331,7 @@ rechoir@^0.6.2:
dependencies:
resolve "^1.1.6"

"recompose@^0.26.0 || ^0.27.0", recompose@^0.27.0:
"recompose@^0.26.0 || ^0.27.0":
version "0.27.1"
resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.27.1.tgz#1a49e931f183634516633bbb4f4edbfd3f38a7ba"
integrity sha512-p7xsyi/rfNjHfdP7vPU02uSFa+Q1eHhjKrvO+3+kRP4Ortj+MxEmpmd+UQtBGM2D2iNAjzNI5rCyBKp9Ob5McA==
Expand Down Expand Up @@ -17162,13 +17077,6 @@ schema-utils@^3.0.0:
ajv "^6.12.5"
ajv-keywords "^3.5.2"

scroll@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/scroll/-/scroll-2.0.3.tgz#0951b785544205fd17753bc3d294738ba16fc2ab"
integrity sha512-3ncZzf8gUW739h3LeS68nSssO60O+GGjT3SxzgofQmT8PIoyHzebql9HHPJopZX8iT6TKOdwaWFMqL6LzUN3DQ==
dependencies:
rafl "~1.2.1"

section-iterator@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a"
Expand Down

0 comments on commit 25fecf4

Please sign in to comment.