IO-2086 Use new grid gallery and lightbox for performance.
This commit is contained in:
Patrick Fic
@@ -7,17 +7,18 @@
|
||||
"@apollo/client": "^3.6.9",
|
||||
"@asseinfo/react-kanban": "^2.2.0",
|
||||
"@craco/craco": "^6.4.5",
|
||||
"@fingerprintjs/fingerprintjs": "^3.3.3",
|
||||
"@fingerprintjs/fingerprintjs": "^3.3.6",
|
||||
"@jsreport/browser-client": "^3.1.0",
|
||||
"@sentry/react": "^7.7.0",
|
||||
"@sentry/tracing": "^7.7.0",
|
||||
"@splitsoftware/splitio-react": "^1.6.0",
|
||||
"@stripe/react-stripe-js": "^1.9.0",
|
||||
"@stripe/stripe-js": "^1.32.0",
|
||||
"@tanem/react-nprogress": "^5.0.8",
|
||||
"antd": "^4.22.3",
|
||||
"@sentry/react": "^7.17.3",
|
||||
"@sentry/tracing": "^7.17.3",
|
||||
"@splitsoftware/splitio-react": "^1.8.0",
|
||||
"@stripe/react-stripe-js": "^1.14.1",
|
||||
"@stripe/stripe-js": "^1.42.1",
|
||||
"@tanem/react-nprogress": "^5.0.16",
|
||||
"antd": "^4.23.6",
|
||||
"apollo-link-logger": "^2.0.0",
|
||||
"axios": "^0.27.2",
|
||||
"breaking-react-grid-gallery": "npm:react-grid-gallery@1.0.0",
|
||||
"craco-less": "^1.20.0",
|
||||
"dinero.js": "^1.9.1",
|
||||
"dotenv": "^16.0.1",
|
||||
@@ -28,15 +29,15 @@
|
||||
"graphql": "^16.5.0",
|
||||
"i18next": "^21.8.14",
|
||||
"i18next-browser-languagedetector": "^6.1.4",
|
||||
"jsoneditor": "^9.9.0",
|
||||
"jsoneditor": "^9.9.2",
|
||||
"jsreport-browser-client-dist": "^1.3.0",
|
||||
"libphonenumber-js": "^1.10.9",
|
||||
"libphonenumber-js": "^1.10.14",
|
||||
"logrocket": "^3.0.1",
|
||||
"markerjs2": "^2.22.0",
|
||||
"markerjs2": "^2.28.0",
|
||||
"moment-business-days": "^1.2.0",
|
||||
"moment-timezone": "^0.5.34",
|
||||
"normalize-url": "^7.0.3",
|
||||
"phone": "^3.1.23",
|
||||
"moment-timezone": "^0.5.38",
|
||||
"normalize-url": "^7.2.0",
|
||||
"phone": "^3.1.29",
|
||||
"preval.macro": "^5.0.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"query-string": "^7.1.1",
|
||||
@@ -51,7 +52,8 @@
|
||||
"react-grid-gallery": "^0.5.5",
|
||||
"react-grid-layout": "^1.3.4",
|
||||
"react-i18next": "^11.18.1",
|
||||
"react-icons": "^4.4.0",
|
||||
"react-icons": "^4.6.0",
|
||||
"react-image-lightbox": "^5.1.4",
|
||||
"react-number-format": "^4.9.3",
|
||||
"react-redux": "^7.2.8",
|
||||
"react-resizable": "^3.0.4",
|
||||
@@ -60,29 +62,29 @@
|
||||
"react-sticky": "^6.0.3",
|
||||
"react-sublime-video": "^0.2.5",
|
||||
"react-virtualized": "^9.22.3",
|
||||
"recharts": "^2.1.12",
|
||||
"recharts": "^2.1.16",
|
||||
"redux": "^4.2.0",
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-saga": "^1.1.3",
|
||||
"redux-saga": "^1.2.1",
|
||||
"redux-state-sync": "^3.1.4",
|
||||
"reselect": "^4.1.6",
|
||||
"sass": "^1.54.0",
|
||||
"socket.io-client": "^4.5.1",
|
||||
"styled-components": "^5.3.5",
|
||||
"sass": "^1.55.0",
|
||||
"socket.io-client": "^4.5.3",
|
||||
"styled-components": "^5.3.6",
|
||||
"subscriptions-transport-ws": "^0.11.0",
|
||||
"web-vitals": "^2.1.4",
|
||||
"workbox-background-sync": "^6.5.3",
|
||||
"workbox-broadcast-update": "^6.5.3",
|
||||
"workbox-cacheable-response": "^6.5.3",
|
||||
"workbox-core": "^6.5.3",
|
||||
"workbox-expiration": "^6.5.3",
|
||||
"workbox-google-analytics": "^6.5.3",
|
||||
"workbox-navigation-preload": "^6.5.3",
|
||||
"workbox-precaching": "^6.5.3",
|
||||
"workbox-range-requests": "^6.5.3",
|
||||
"workbox-routing": "^6.5.3",
|
||||
"workbox-strategies": "^6.5.3",
|
||||
"workbox-streams": "^6.5.3",
|
||||
"workbox-background-sync": "^6.5.4",
|
||||
"workbox-broadcast-update": "^6.5.4",
|
||||
"workbox-cacheable-response": "^6.5.4",
|
||||
"workbox-core": "^6.5.4",
|
||||
"workbox-expiration": "^6.5.4",
|
||||
"workbox-google-analytics": "^6.5.4",
|
||||
"workbox-navigation-preload": "^6.5.4",
|
||||
"workbox-precaching": "^6.5.4",
|
||||
"workbox-range-requests": "^6.5.4",
|
||||
"workbox-routing": "^6.5.4",
|
||||
"workbox-strategies": "^6.5.4",
|
||||
"workbox-streams": "^6.5.4",
|
||||
"yauzl": "^2.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
@@ -119,12 +121,12 @@
|
||||
"react-error-overlay": "6.0.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sentry/webpack-plugin": "^1.19.0",
|
||||
"@sentry/webpack-plugin": "^1.20.0",
|
||||
"@testing-library/cypress": "^8.0.3",
|
||||
"cypress": "^10.3.1",
|
||||
"cypress": "^10.11.0",
|
||||
"eslint-plugin-cypress": "^2.12.1",
|
||||
"react-error-overlay": "6.0.11",
|
||||
"redux-logger": "^3.0.6",
|
||||
"source-map-explorer": "^2.5.2"
|
||||
"source-map-explorer": "^2.5.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { SyncOutlined, FileExcelFilled } from "@ant-design/icons";
|
||||
import { Alert, Button, Card, Space } from "antd";
|
||||
import React, { useEffect } from "react";
|
||||
import Gallery from "react-grid-gallery";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -18,6 +17,9 @@ import JobsDocumentsLocalDeleteButton from "./jobs-documents-local-gallery.delet
|
||||
import JobsLocalGalleryDownloadButton from "./jobs-documents-local-gallery.download";
|
||||
import JobsDocumentsLocalGalleryReassign from "./jobs-documents-local-gallery.reassign.component";
|
||||
import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-gallery.selectall.component";
|
||||
import { Gallery } from "breaking-react-grid-gallery";
|
||||
import Lightbox from "react-image-lightbox";
|
||||
import "react-image-lightbox/style.css";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
@@ -48,6 +50,8 @@ export function JobsDocumentsLocalGallery({
|
||||
invoice_number,
|
||||
vendorid,
|
||||
}) {
|
||||
const [index, setIndex] = useState(-1);
|
||||
|
||||
const { t } = useTranslation();
|
||||
useEffect(() => {
|
||||
if (job) {
|
||||
@@ -58,9 +62,10 @@ export function JobsDocumentsLocalGallery({
|
||||
}
|
||||
}
|
||||
}, [job, invoice_number, getJobMedia, getBillMedia]);
|
||||
let optimized;
|
||||
const jobMedia =
|
||||
allMedia && allMedia[job.id]
|
||||
//let optimized;
|
||||
|
||||
const jobMedia = useMemo(() => {
|
||||
return allMedia && allMedia[job.id]
|
||||
? allMedia[job.id].reduce(
|
||||
(acc, val) => {
|
||||
if (
|
||||
@@ -70,9 +75,14 @@ export function JobsDocumentsLocalGallery({
|
||||
) {
|
||||
acc.images.push({
|
||||
...val,
|
||||
src: val.thumbnail, //Accomodate react grid gallery changes
|
||||
height: val.thumbnailHeight,
|
||||
width: val.thumbnailWidth,
|
||||
original: val.src,
|
||||
...(val.optimized && { src: val.optimized, fullsize: val.src }),
|
||||
});
|
||||
if (val.optimized) optimized = true;
|
||||
if (val.optimized) {
|
||||
} //optimized = true;
|
||||
} else {
|
||||
acc.other.push({
|
||||
...val,
|
||||
@@ -84,7 +94,22 @@ export function JobsDocumentsLocalGallery({
|
||||
{ images: [], other: [] }
|
||||
)
|
||||
: { images: [], other: [] };
|
||||
}, [allMedia, job.id]);
|
||||
|
||||
console.log(
|
||||
"🚀 ~ file: jobs-documents-local-gallery.container.jsx ~ line 67 ~ jobMedia",
|
||||
jobMedia
|
||||
);
|
||||
|
||||
const currentImage = jobMedia.images[index];
|
||||
const nextIndex = (index + 1) % jobMedia.images.length;
|
||||
const nextImage = jobMedia.images[nextIndex] || currentImage;
|
||||
const prevIndex =
|
||||
(index + jobMedia.images.length - 1) % jobMedia.images.length;
|
||||
const prevImage = jobMedia.images[prevIndex] || currentImage;
|
||||
const handleClose = () => setIndex(-1);
|
||||
const handleMovePrev = () => setIndex(prevIndex);
|
||||
const handleMoveNext = () => setIndex(nextIndex);
|
||||
return (
|
||||
<div>
|
||||
<Space wrap>
|
||||
@@ -118,7 +143,7 @@ export function JobsDocumentsLocalGallery({
|
||||
/>
|
||||
</Card>
|
||||
<Card title={t("jobs.labels.documents-images")}>
|
||||
<Gallery
|
||||
{/* <Gallery
|
||||
images={jobMedia.images}
|
||||
backdropClosesModal={true}
|
||||
onSelectImage={(index, image) => {
|
||||
@@ -144,7 +169,27 @@ export function JobsDocumentsLocalGallery({
|
||||
"toolbar=0,location=0,menubar=0"
|
||||
);
|
||||
}}
|
||||
/> */}
|
||||
<Gallery
|
||||
images={jobMedia.images}
|
||||
onClick={(index) => setIndex(index)}
|
||||
enableImageSelection={false}
|
||||
/>
|
||||
{!!currentImage && (
|
||||
/* @ts-ignore */
|
||||
<Lightbox
|
||||
mainSrc={currentImage.original}
|
||||
imageTitle={currentImage.caption}
|
||||
mainSrcThumbnail={currentImage.src}
|
||||
nextSrc={nextImage.original}
|
||||
nextSrcThumbnail={nextImage.src}
|
||||
prevSrc={prevImage.original}
|
||||
prevSrcThumbnail={prevImage.src}
|
||||
onCloseRequest={handleClose}
|
||||
onMovePrevRequest={handleMovePrev}
|
||||
onMoveNextRequest={handleMoveNext}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
<Card title={t("jobs.labels.documents-other")}>
|
||||
<Gallery
|
||||
|
||||
3076
client/yarn.lock
3076
client/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user