fix(custom-content): reset portal if slideData has no content, and on…

… `close` (#837)
dromru · May 14, 2022 · 031dfcf · 031dfcf
1 parent 557200b
commit 031dfcf
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 19 deletions.
diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
@@ -588,6 +588,15 @@ describe('gallery', () => {
             />
           )}
         </Item>
+        <Item html="foo">
+          {({ ref, open }) => (
+            <span
+              role="link"
+              onClick={open}
+              ref={ref as React.MutableRefObject<HTMLSpanElement>}
+            />
+          )}
+        </Item>
       </Gallery>,
     )
 
@@ -597,6 +606,7 @@ describe('gallery', () => {
       expect.objectContaining({
         dataSource: [
           expect.objectContaining({ content: reactElement, type: 'html' }),
+          expect.objectContaining({ html: 'foo' }),
         ],
       }),
     )
@@ -615,14 +625,31 @@ describe('gallery', () => {
     expect(element.innerHTML).toBe('<h1>hi</h1>')
 
     act(() => {
-      dispatch('contentDestroy', {
+      dispatch('contentActivate', {
+        content: {
+          data: { html: 'foo' },
+          element,
+        },
+      })
+    })
+
+    expect(element.innerHTML).toBe('')
+
+    act(() => {
+      dispatch('contentActivate', {
         content: {
           data: { content: reactElement },
           element,
         },
       })
     })
 
+    expect(element.innerHTML).toBe('<h1>hi</h1>')
+
+    act(() => {
+      dispatch('close')
+    })
+
     expect(element.innerHTML).toBe('')
   })
 

diff --git a/src/gallery.tsx b/src/gallery.tsx
@@ -201,13 +201,13 @@ export const Gallery: FC<GalleryProps> = ({
           setContentPortal(
             createPortal(slideContent.data.content, slideContent.element),
           )
+        } else {
+          setContentPortal(null)
         }
       })
 
-      instance.on('contentDestroy', ({ content: slideContent }) => {
-        if (slideContent.data.content) {
-          setContentPortal(null)
-        }
+      instance.on('close', () => {
+        setContentPortal(null)
       })
 
       if (withDownloadButton) {

diff --git a/src/storybook/helpers/items.ts b/src/storybook/helpers/items.ts
@@ -1,12 +1,23 @@
 import { InternalItem } from '../../types'
 
-export const createItem = (index: number): InternalItem => ({
-  original: `https://placekitten.com/1024/768?image=${index}`,
-  thumbnail: `https://placekitten.com/160/120?image=${index}`,
-  width: 1024,
-  height: 768,
-  caption: `kitty #${index}`,
-  alt: `photo of kitty #${index}`,
-})
+export const createItem = (
+  index: number,
+  contentFn: false | ((i?: number) => JSX.Element | string) = false,
+): InternalItem => {
+  if (typeof contentFn === 'function') {
+    const content = contentFn(index)
+    return {
+      caption: `item #${index}`,
+      ...(typeof content === 'string' ? { html: content } : { content }),
+    }
+  }
 
-export const items = Array.from({ length: 3 }, (_, i) => createItem(i + 1))
+  return {
+    original: `https://placekitten.com/1024/768?image=${index}`,
+    thumbnail: `https://placekitten.com/160/120?image=${index}`,
+    width: 1024,
+    height: 768,
+    caption: `kitty #${index}`,
+    alt: `photo of kitty #${index}`,
+  }
+}
diff --git a/src/storybook/without-images.stories.tsx b/src/storybook/without-images.stories.tsx
@@ -3,10 +3,15 @@ import 'photoswipe/dist/photoswipe.css'
 import { Meta, Story } from '@storybook/react'
 import shuffle from '../helpers/shuffle'
 import { Gallery, Item } from '..'
-import { items, createItem } from './helpers/items'
+import { createItem } from './helpers/items'
 
 const storyMeta: Meta = {
   title: 'Dev/Without Images',
+  argTypes: {
+    content: {
+      control: 'boolean',
+    },
+  },
 }
 
 const Button: FC<{ onClick: (e: MouseEvent) => void; children: ReactNode }> = ({
@@ -20,10 +25,33 @@ const Button: FC<{ onClick: (e: MouseEvent) => void; children: ReactNode }> = ({
   )
 }
 
-export const withoutImages: Story = () => {
-  const [links, setLinks] = useState(items)
+const Content: FC<{ children: ReactNode }> = ({ children }) => (
+  <div
+    style={{
+      color: 'white',
+      display: 'flex',
+      placeContent: 'center',
+      flexDirection: 'column',
+      height: '100%',
+      textAlign: 'center',
+    }}
+  >
+    <h1>{children}</h1>
+  </div>
+)
 
-  const addLink = () => setLinks([...links, createItem(links.length + 1)])
+const createContent = (i: number) => <Content>Content #{i}</Content>
+
+const defaultItems = Array.from({ length: 3 }, (_, i) => createItem(i + 1))
+
+export const withoutImages: Story = ({ content }) => {
+  const [links, setLinks] = useState(defaultItems)
+
+  const addLink = () =>
+    setLinks([
+      ...links,
+      createItem(links.length + 1, content ? createContent : false),
+    ])
   const removeLink = () => setLinks(links.slice(1))
   const swapFirstTwoLinks = () =>
     setLinks([links[1], links[0], ...links.slice(2)])
@@ -46,7 +74,7 @@ export const withoutImages: Story = () => {
       </div>
       <ul>
         {links.map((props) => (
-          <Item {...props} key={props.original}>
+          <Item {...props} key={props.original || props.caption}>
             {({ ref, open }) => (
               <li ref={ref as React.MutableRefObject<HTMLLIElement>}>
                 <a