improvement: throw if no ref, allow single-item without ref

closes #13, #12

src/__tests__/index.test.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react'
 import PhotoSwipe from 'photoswipe'
 import { mount, shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
+import { NoRefError } from '../no-ref-error'
 import { shuffle } from '../helpers'
 import { InternalItem } from '../types'
 import { Gallery, GalleryProps, Item, DefaultLayout, LayoutProps } from '..'
@@ -208,4 +209,47 @@ describe('gallery', () => {
       ...photoswipeArgsMock(null, 0),
     )
   })
+
+  test('should throw when there is no ref and more than one item', () => {
+    /* eslint-disable no-console */
+    const consoleError = console.error
+    console.error = jest.fn()
+    const items = createItems(2)
+    expect(() => {
+      mount(
+        <Gallery>
+          {items.map((item) => (
+            <Item key={item.original} {...item}>
+              {({ open }) => <img onClick={open} src={item.thumbnail} />}
+            </Item>
+          ))}
+        </Gallery>,
+      )
+        .find(Item)
+        .first()
+        .simulate('click')
+    }).toThrow(new NoRefError())
+    console.error = consoleError
+    /* eslint-enable no-console */
+  })
+
+  test('should not throw when there is no ref and only one item', () => {
+    const item: InternalItem = {
+      original: 'https://placekitten.com/1024/768',
+      thumbnail: 'https://placekitten.com/160/120',
+      width: 1024,
+      height: 768,
+    }
+    const wrapper = mount(
+      <Gallery>
+        <Item {...item}>
+          {({ open }) => <img onClick={open} src={item.thumbnail} />}
+        </Item>
+      </Gallery>,
+    )
+    wrapper.find(Item).first().simulate('click')
+    expect(PhotoSwipeMocked).toHaveBeenCalledWith(
+      ...photoswipeArgsMock(null, 0),
+    )
+  })
 })

src/gallery.tsx

@@ -8,7 +8,7 @@ import {
   layoutDefaultProps,
   LayoutProps,
 } from '.'
-import { getElBounds } from './helpers'
+import { getElBounds, sortNodes } from './helpers'
 import { Context } from './context'
 import { ItemRef, InternalItem } from './types'
 
@@ -68,31 +68,36 @@ export const Gallery: FC<GalleryProps> = ({
 
     const normalized: PhotoSwipeItem[] = []
 
-    Array.from(items.current)
-      .sort(([{ current: a }], [{ current: b }]) => {
-        if (a === b) return 0
-        // eslint-disable-next-line no-bitwise
-        if (a.compareDocumentPosition(b) & 2) {
-          return 1
-        }
-        return -1
+    const entries = Array.from(items.current)
+
+    const prepare = (entry: [ItemRef, InternalItem], i: number) => {
+      const [
+        ref,
+        { width, height, title, original, thumbnail, ...rest },
+      ] = entry
+
+      if (targetRef === ref) {
+        index = i
+      }
+
+      normalized.push({
+        ...(title ? { title } : {}),
+        w: Number(width),
+        h: Number(height),
+        src: original,
+        msrc: thumbnail,
+        el: ref.current,
+        ...rest,
       })
-      .forEach(
-        ([ref, { width, height, title, original, thumbnail, ...rest }], i) => {
-          if (targetRef === ref) {
-            index = i
-          }
-          normalized.push({
-            ...(title ? { title } : {}),
-            w: Number(width),
-            h: Number(height),
-            src: original,
-            msrc: thumbnail,
-            el: ref.current,
-            ...rest,
-          })
-        },
-      )
+    }
+
+    if (items.current.size > 1) {
+      entries
+        .sort(([{ current: a }], [{ current: b }]) => sortNodes(a, b))
+        .forEach(prepare)
+    } else {
+      entries.forEach(prepare)
+    }
 
     const layoutEl = defaultLayoutRef.current || layoutRef?.current
 

src/helpers.ts

@@ -1,3 +1,5 @@
+import { NoRefError } from './no-ref-error'
+
 export const getElBounds = (el: HTMLImageElement) => {
   const pageXScroll = window.pageXOffset || document.documentElement.scrollLeft
   const pageYScroll = window.pageYOffset || document.documentElement.scrollTop
@@ -9,6 +11,18 @@ export const getElBounds = (el: HTMLImageElement) => {
   }
 }
 
+export function sortNodes(a?: Element, b?: Element) {
+  if (!(a instanceof Element)) {
+    throw new NoRefError()
+  }
+  if (a === b) return 0
+  // eslint-disable-next-line no-bitwise
+  if (a.compareDocumentPosition(b) & 2) {
+    return 1
+  }
+  return -1
+}
+
 export function shuffle<T>(array: T[]) {
   const result = [...array]
   let currentIndex = result.length

src/index.stories.tsx

@@ -161,16 +161,13 @@ export const withHtml = () => {
   return (
     <Gallery options={{ showAnimationDuration: 0, hideAnimationDuration: 0 }}>
       <Item html={html}>
-        {(
-          { ref, open }, // TODO: only one item, remove ref
-        ) => (
+        {({ open }) => (
           <a
             href="#"
             onClick={(e) => {
               e.preventDefault()
               open()
             }}
-            ref={ref as React.MutableRefObject<HTMLAnchorElement>}
           >
             Open
           </a>

src/no-ref-error.ts

@@ -0,0 +1,6 @@
+export class NoRefError extends Error {
+  message = `No valid \`ref\` provided.
+You shuld use \`ref\` from render prop of Item component.
+Example:
+<Item>{({ ref }) => <div ref={ref}></div>}</Item>\n`
+}