Feature: pass wrapStyle if you like; added gallery storybook example

rpearce · Dec 18, 2019 · b3b2306 · b3b2306
1 parent 1dbdd24
commit b3b2306
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -118,6 +118,7 @@ You can pass these options to either the default or controlled components.
 | `portalEl` | `Element` | no | `document.body` | [DOM Element](https://developer.mozilla.org/en-US/docs/Web/API/element) to which we will append the zoom modal |
 | `scrollableEl` | `Window` | no | `window` | [DOM Element](https://developer.mozilla.org/en-US/docs/Web/API/element) to which we will listen for scroll events to determine if we should unzoom |
 | `transitionDuration` | `Number` | no | `300` | Transition duration in milliseconds for the component to use on zoom and unzoom |
+| `wrapStyle` | `Object` | no | `null` | Optional style object to pass to the wrapper div. Useful when you want the `<Zoom>` container to be `width: '100%', for example' |
 | `zoomMargin` | `Number` | no | `0` | Offset in pixels the zoomed image should be from the `window`' boundaries |
 
 ## Only the controlled component

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -70,4 +70,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.dc721a106fc5dc8f341f.bundle.js"></script><script src="vendors~main.dc721a106fc5dc8f341f.bundle.js"></script><script src="main.dc721a106fc5dc8f341f.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.48fb8a819d20b2d38dba.bundle.js"></script><script src="vendors~main.48fb8a819d20b2d38dba.bundle.js"></script><script src="main.48fb8a819d20b2d38dba.bundle.js"></script></body></html>
diff --git a/docs/main.48fb8a819d20b2d38dba.bundle.js b/docs/main.48fb8a819d20b2d38dba.bundle.js
diff --git a/docs/main.48fb8a819d20b2d38dba.bundle.js.map b/docs/main.48fb8a819d20b2d38dba.bundle.js.map
diff --git a/docs/main.dc721a106fc5dc8f341f.bundle.js b/docs/main.dc721a106fc5dc8f341f.bundle.js
diff --git a/docs/main.dc721a106fc5dc8f341f.bundle.js.map b/docs/main.dc721a106fc5dc8f341f.bundle.js.map
diff --git a/...ntime~main.dc721a106fc5dc8f341f.bundle.js → ...ntime~main.48fb8a819d20b2d38dba.bundle.js b/...ntime~main.dc721a106fc5dc8f341f.bundle.js → ...ntime~main.48fb8a819d20b2d38dba.bundle.js
diff --git a/docs/runtime~main.48fb8a819d20b2d38dba.bundle.js.map b/docs/runtime~main.48fb8a819d20b2d38dba.bundle.js.map
diff --git a/docs/runtime~main.dc721a106fc5dc8f341f.bundle.js.map b/docs/runtime~main.dc721a106fc5dc8f341f.bundle.js.map
diff --git a/...ndors~main.dc721a106fc5dc8f341f.bundle.js → ...ndors~main.48fb8a819d20b2d38dba.bundle.js b/...ndors~main.dc721a106fc5dc8f341f.bundle.js → ...ndors~main.48fb8a819d20b2d38dba.bundle.js
diff --git a/...s~main.dc721a106fc5dc8f341f.bundle.js.map → ...s~main.48fb8a819d20b2d38dba.bundle.js.map b/...s~main.dc721a106fc5dc8f341f.bundle.js.map → ...s~main.48fb8a819d20b2d38dba.bundle.js.map
diff --git a/source/Controlled.js b/source/Controlled.js
@@ -24,6 +24,7 @@ const Controlled = ({
   openText,
   scrollableEl,
   transitionDuration,
+  wrapStyle,
   zoomMargin
 }) => {
   const [isChildLoaded, setIsChildLoaded] = useState(false)
@@ -57,7 +58,7 @@ const Controlled = ({
 
   return (
     <StrictMode>
-      <div className={className} ref={wrapRef}>
+      <div className={className} ref={wrapRef} style={wrapStyle}>
         {children}
         <button
           aria-label={openText}
@@ -99,6 +100,7 @@ Controlled.propTypes = {
   scrollableEl: oneOfType([object, instanceOf(Element), instanceOf(Window)])
     .isRequired,
   transitionDuration: number.isRequired,
+  wrapStyle: object,
   zoomMargin: number.isRequired
 }
 
@@ -112,6 +114,7 @@ Controlled.defaultProps = {
   portalEl: document.body,
   scrollableEl: window,
   transitionDuration: 300,
+  wrapStyle: null,
   zoomMargin: 0
 }
 

diff --git a/source/Uncontrolled.js b/source/Uncontrolled.js
@@ -13,6 +13,7 @@ const Uncontrolled = ({
   openText,
   scrollableEl,
   transitionDuration,
+  wrapStyle,
   zoomMargin
 }) => {
   const [isActive, setIsActive] = useState(false)
@@ -49,7 +50,7 @@ const Uncontrolled = ({
 
   return (
     <StrictMode>
-      <div className={className} ref={wrapRef}>
+      <div className={className} ref={wrapRef} style={wrapStyle}>
         {children}
         <button
           aria-label={openText}
@@ -88,6 +89,7 @@ Uncontrolled.propTypes = {
   scrollableEl: oneOfType([object, instanceOf(Element), instanceOf(Window)])
     .isRequired,
   transitionDuration: number.isRequired,
+  wrapStyle: object,
   zoomMargin: number.isRequired
 }
 
@@ -99,6 +101,7 @@ Uncontrolled.defaultProps = {
   portalEl: document.body,
   scrollableEl: window,
   transitionDuration: 300,
+  wrapStyle: null,
   zoomMargin: 0
 }
 

diff --git a/stories.js b/stories.js
@@ -183,8 +183,64 @@ stories.add('with blue circle', () => (
   </ImgStory>
 ))
 
-//stories.add('with <img /> gallery', () => {
-//})
+stories.add('with image gallery using divs & background images', () => {
+  const images = [
+    imgThatWanakaTree,
+    imgNzBeach,
+    imgHobbiton,
+    imgHobbiton,
+    imgThatWanakaTree,
+    imgNzBeach,
+    imgNzBeach,
+    imgHobbiton,
+    imgThatWanakaTree
+  ]
+
+  return (
+    <div>
+      <h1>Image gallery using divs & background images</h1>
+      <p>
+        While this is simply an example of using div elements and
+        background-image to accomplish an image gallery, you could easily listen
+        for arrow left/right when an item is zoomed and use the controlled
+        component to make yourself an animated image gallery that zooms &
+        unzooms items appropriately.
+      </p>
+      <ul
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          listStyle: 'none',
+          margin: 0,
+          padding: 0
+        }}
+      >
+        {images.concat(images, images, images).map((img, i) => (
+          <li
+            key={i}
+            style={{ margin: '0 1rem 1rem 0', width: 'calc(33% - 1rem)' }}
+          >
+            <Zoom wrapStyle={{ width: '100%' }}>
+              <div
+                aria-label={img.alt}
+                role="img"
+                style={{
+                  backgroundColor: '#c2c2c2',
+                  backgroundImage: `url(${img.src})`,
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  height: '0',
+                  paddingBottom: '66%',
+                  width: 'calc(100%)'
+                }}
+              />
+            </Zoom>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+})
 
 stories.add('with controlled; zooms when image loads', () => {
   const [isZoomed, setIsZoomed] = useState(false)