update lightbox and figure components

mongodb · Jan 4, 2024 · 787b871 · 787b871
1 parent 84c1b88
commit 787b871
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 37 deletions.
diff --git a/src/components/Figure/Lightbox.js b/src/components/Figure/Lightbox.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import Modal from '@leafygreen-ui/modal';
 import styled from '@emotion/styled';
@@ -51,16 +51,19 @@ const LightboxWrapper = styled('div')`
 const Lightbox = ({ nodeData, ...rest }) => {
   const [open, setOpen] = useState(false);
   const figureWidth = nodeData.options?.figwidth || 'auto';
+  const openModal = useCallback(() => {
+    setOpen(!open);
+  }, [open]);
   return (
     <React.Fragment>
       <LightboxWrapper figwidth={figureWidth}>
-        <div onClick={() => setOpen((curr) => !curr)} role="button" tabIndex="-1">
+        <div onClick={openModal} role="button" tabIndex="-1">
           <Image nodeData={nodeData} />
           <LightboxCaption>{CAPTION_TEXT}</LightboxCaption>
         </div>
         <CaptionLegend {...rest} nodeData={nodeData} />
       </LightboxWrapper>
-      <StyledModal size="medium" open={open} setOpen={setOpen}>
+      <StyledModal size="medium" open={open} setOpen={openModal}>
         <Image nodeData={nodeData} />
       </StyledModal>
     </React.Fragment>

diff --git a/src/components/Figure/index.js b/src/components/Figure/index.js
@@ -10,23 +10,13 @@ import CaptionLegend from './CaptionLegend';
 export default class Figure extends Component {
   constructor(props) {
     super(props);
+    const figWidth = parseInt(getNestedValue(['nodeData', 'options', 'figwidth'], props), 10);
+    const imgWidth = parseInt(getNestedValue(['nodeData', 'options', 'width'], props), 10);
     this.state = {
-      isLightboxSize: false,
+      isLightboxSize: !figWidth || figWidth / imgWidth < 0.9,
     };
   }
 
-  imgShouldHaveLightbox = (img) => {
-    const naturalArea = img.naturalWidth * img.naturalHeight;
-    const clientArea = img.clientWidth * img.clientHeight;
-    return clientArea < naturalArea * 0.9;
-  };
-
-  handleImageLoaded = (imgRef) => {
-    this.setState({
-      isLightboxSize: this.imgShouldHaveLightbox(imgRef),
-    });
-  };
-
   render() {
     const { nodeData, ...rest } = this.props;
     const { isLightboxSize } = this.state;
@@ -44,7 +34,7 @@ export default class Figure extends Component {
         `}
         style={{ width: getNestedValue(['options', 'figwidth'], nodeData) || 'auto' }}
       >
-        <Image nodeData={nodeData} handleImageLoaded={this.handleImageLoaded} />
+        <Image nodeData={nodeData} />
         <CaptionLegend {...rest} nodeData={nodeData} />
       </div>
     );

diff --git a/tests/unit/__snapshots__/Figure.test.js.snap b/tests/unit/__snapshots__/Figure.test.js.snap
@@ -19,11 +19,39 @@ exports[`renders border correctly when specified as an option 1`] = `
     class="figure emotion-0"
     style="width: 700px;"
   >
-    <img
-      alt="/images/firstcluster.png"
-      class="   emotion-1"
-      src="/images/firstcluster.png"
-    />
+    <div
+      class="gatsby-image-wrapper   "
+      data-gatsby-image-wrapper=""
+      style="position: relative; overflow: hidden;"
+    >
+      <div
+        aria-hidden="true"
+        style="padding-top: 56.25%;"
+      />
+      <div
+        aria-hidden="true"
+        data-placeholder-image=""
+        style="height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;"
+      />
+      <img
+        alt="/images/firstcluster.png"
+        class="emotion-1"
+        data-gatsby-image-ssr=""
+        data-main-image=""
+        data-src="/images/firstcluster.png"
+        data-srcset="/images/firstcluster.png 320w,/images/firstcluster.png 654w,/images/firstcluster.png 768w,/images/firstcluster.png 1024w,/images/firstcluster.png 1366w,/images/firstcluster.png 1600w,/images/firstcluster.png 1920w,/images/firstcluster.png 2048w,/images/firstcluster.png 2560w,/images/firstcluster.png 3440w,/images/firstcluster.png 3840w,/images/firstcluster.png 4096w"
+        decoding="async"
+        loading="lazy"
+        sizes="100vw"
+        style="height: 100%; left: 0px; position: absolute; top: 0px; transform: translateZ(0); transition: opacity 250ms linear; width: 100%; will-change: opacity; object-fit: contain; opacity: 0;"
+      />
+      <noscript />
+      <script
+        type="module"
+      >
+        const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
+      </script>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -44,11 +72,39 @@ exports[`renders correctly 1`] = `
     class="figure emotion-0"
     style="width: 700px;"
   >
-    <img
-      alt="/images/firstcluster.png"
-      class="   emotion-1"
-      src="/images/firstcluster.png"
-    />
+    <div
+      class="gatsby-image-wrapper   "
+      data-gatsby-image-wrapper=""
+      style="position: relative; overflow: hidden;"
+    >
+      <div
+        aria-hidden="true"
+        style="padding-top: 56.25%;"
+      />
+      <div
+        aria-hidden="true"
+        data-placeholder-image=""
+        style="height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;"
+      />
+      <img
+        alt="/images/firstcluster.png"
+        class="emotion-1"
+        data-gatsby-image-ssr=""
+        data-main-image=""
+        data-src="/images/firstcluster.png"
+        data-srcset="/images/firstcluster.png 320w,/images/firstcluster.png 654w,/images/firstcluster.png 768w,/images/firstcluster.png 1024w,/images/firstcluster.png 1366w,/images/firstcluster.png 1600w,/images/firstcluster.png 1920w,/images/firstcluster.png 2048w,/images/firstcluster.png 2560w,/images/firstcluster.png 3440w,/images/firstcluster.png 3840w,/images/firstcluster.png 4096w"
+        decoding="async"
+        loading="lazy"
+        sizes="100vw"
+        style="height: 100%; left: 0px; position: absolute; top: 0px; transform: translateZ(0); transition: opacity 250ms linear; width: 100%; will-change: opacity; object-fit: contain; opacity: 0;"
+      />
+      <noscript />
+      <script
+        type="module"
+      >
+        const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
+      </script>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -83,11 +139,39 @@ exports[`renders lightbox correctly when specified as an option 1`] = `
       role="button"
       tabindex="-1"
     >
-      <img
-        alt="/images/firstcluster.png"
-        class="   emotion-2"
-        src="/images/firstcluster.png"
-      />
+      <div
+        class="gatsby-image-wrapper   "
+        data-gatsby-image-wrapper=""
+        style="position: relative; overflow: hidden;"
+      >
+        <div
+          aria-hidden="true"
+          style="padding-top: 56.25%;"
+        />
+        <div
+          aria-hidden="true"
+          data-placeholder-image=""
+          style="height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;"
+        />
+        <img
+          alt="/images/firstcluster.png"
+          class="emotion-2"
+          data-gatsby-image-ssr=""
+          data-main-image=""
+          data-src="/images/firstcluster.png"
+          data-srcset="/images/firstcluster.png 320w,/images/firstcluster.png 654w,/images/firstcluster.png 768w,/images/firstcluster.png 1024w,/images/firstcluster.png 1366w,/images/firstcluster.png 1600w,/images/firstcluster.png 1920w,/images/firstcluster.png 2048w,/images/firstcluster.png 2560w,/images/firstcluster.png 3440w,/images/firstcluster.png 3840w,/images/firstcluster.png 4096w"
+          decoding="async"
+          loading="lazy"
+          sizes="100vw"
+          style="height: 100%; left: 0px; position: absolute; top: 0px; transform: translateZ(0); transition: opacity 250ms linear; width: 100%; will-change: opacity; object-fit: contain; opacity: 0;"
+        />
+        <noscript />
+        <script
+          type="module"
+        >
+          const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
+        </script>
+      </div>
       <div
         class="emotion-3 emotion-4"
       >

diff --git a/tests/unit/__snapshots__/Lightbox.test.js.snap b/tests/unit/__snapshots__/Lightbox.test.js.snap
@@ -30,11 +30,39 @@ exports[`Lightbox renders correctly 1`] = `
       role="button"
       tabindex="-1"
     >
-      <img
-        alt="/images/firstcluster.png"
-        class="   emotion-2"
-        src="/images/firstcluster.png"
-      />
+      <div
+        class="gatsby-image-wrapper   "
+        data-gatsby-image-wrapper=""
+        style="position: relative; overflow: hidden;"
+      >
+        <div
+          aria-hidden="true"
+          style="padding-top: 56.25%;"
+        />
+        <div
+          aria-hidden="true"
+          data-placeholder-image=""
+          style="height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;"
+        />
+        <img
+          alt="/images/firstcluster.png"
+          class="emotion-2"
+          data-gatsby-image-ssr=""
+          data-main-image=""
+          data-src="/images/firstcluster.png"
+          data-srcset="/images/firstcluster.png 320w,/images/firstcluster.png 654w,/images/firstcluster.png 768w,/images/firstcluster.png 1024w,/images/firstcluster.png 1366w,/images/firstcluster.png 1600w,/images/firstcluster.png 1920w,/images/firstcluster.png 2048w,/images/firstcluster.png 2560w,/images/firstcluster.png 3440w,/images/firstcluster.png 3840w,/images/firstcluster.png 4096w"
+          decoding="async"
+          loading="lazy"
+          sizes="100vw"
+          style="height: 100%; left: 0px; position: absolute; top: 0px; transform: translateZ(0); transition: opacity 250ms linear; width: 100%; will-change: opacity; object-fit: contain; opacity: 0;"
+        />
+        <noscript />
+        <script
+          type="module"
+        >
+          const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
+        </script>
+      </div>
       <div
         class="emotion-3 emotion-4"
       >