improvement: separate Gallery and CustomGallery

closes #16
dromru · Apr 24, 2020 · edd4bed · edd4bed
1 parent 6dd48e9
commit edd4bed
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -47,19 +47,20 @@ const MyGallery = () => (
 ```
 
 ```javascript
-import { Gallery, Item, DefaultLayout } from 'react-photoswipe-gallery'
+import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
+import { CustomGallery, Item, DefaultLayout } from 'react-photoswipe-gallery'
 
 const MyGallery = () => {
   const layoutRef = useRef()
 
   return (
-    <Gallery layoutRef={layoutRef}>
+    <CustomGallery layoutRef={layoutRef} ui={PhotoswipeUIDefault}>
       {/*...*/}
-    </Gallery>
+    </CustomGallery>
 
-    <Gallery layoutRef={layoutRef}>
+    <CustomGallery layoutRef={layoutRef} ui={PhotoswipeUIDefault}>
       {/*...*/}
-    </Gallery>
+    </CustomGallery>
 
     <DefaultLayout
       shareButton={false}

diff --git a/src/__tests__/__snapshots__/index.test.tsx.snap b/src/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,24 +2,26 @@
 
 exports[`gallery should render with external layout 1`] = `
 <Fragment>
-  <TestGallery
-    items={
-      Array [
-        Object {
-          "height": 768,
-          "original": "https://placekitten.com/1024/768?image=0",
-          "thumbnail": "https://placekitten.com/160/120?image=0",
-          "title": "kitty #0",
-          "width": 1024,
-        },
-      ]
-    }
+  <Component
     layoutRef={
       Object {
         "current": undefined,
       }
     }
-  />
+    options={Object {}}
+    ui={[Function]}
+  >
+    <Component
+      height={768}
+      key="https://placekitten.com/1024/768?image=0"
+      original="https://placekitten.com/1024/768?image=0"
+      thumbnail="https://placekitten.com/160/120?image=0"
+      title="kitty #0"
+      width={1024}
+    >
+      <Component />
+    </Component>
+  </Component>
   <ForwardRef
     closeButtonCaption="Close (Esc)"
     fullscreenButton={true}

diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
@@ -1,11 +1,19 @@
 import React, { useRef, useState } from 'react'
 import PhotoSwipe from 'photoswipe'
+import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
 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 '..'
+import {
+  Gallery,
+  CustomGallery,
+  GalleryProps,
+  Item,
+  DefaultLayout,
+  LayoutProps,
+} from '..'
 
 const PhotoSwipeMocked = PhotoSwipe as jest.MockedClass<typeof PhotoSwipe>
 
@@ -127,7 +135,26 @@ const TestGalleryWithLayout: React.FC<
   const layoutRef = useRef()
   return (
     <>
-      <TestGallery items={items} layoutRef={layoutRef} />
+      <CustomGallery layoutRef={layoutRef} ui={PhotoswipeUIDefault}>
+        {items.map(({ original, thumbnail, width, height, title }, i) => (
+          <Item
+            key={original}
+            original={original}
+            thumbnail={thumbnail}
+            width={width}
+            height={height}
+            title={title}
+          >
+            {({ ref, open }) => (
+              <img
+                onClick={open}
+                src={thumbnail}
+                ref={ref as React.MutableRefObject<HTMLImageElement>}
+              />
+            )}
+          </Item>
+        ))}
+      </CustomGallery>
       <DefaultLayout ref={layoutRef} {...rest} />
     </>
   )

diff --git a/src/gallery.tsx → src/gallery-custom.tsx b/src/gallery.tsx → src/gallery-custom.tsx
@@ -1,13 +1,7 @@
 import PhotoSwipe from 'photoswipe'
-import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
+import { Options as PhotoswipeUiDefaultOptions } from 'photoswipe/dist/photoswipe-ui-default'
 import React, { useRef, useCallback, FC } from 'react'
 import PropTypes, { InferProps } from 'prop-types'
-import {
-  DefaultLayout,
-  layoutPropTypes,
-  layoutDefaultProps,
-  LayoutProps,
-} from '.'
 import { getElBounds, sortNodes } from './helpers'
 import { Context } from './context'
 import { ItemRef, InternalItem } from './types'
@@ -17,20 +11,13 @@ const propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]).isRequired,
+  options: PropTypes.object,
   layoutRef: PropTypes.shape({
     current: PropTypes.instanceOf(
       typeof Element === 'undefined' ? class Element {} : Element,
     ),
-  }),
-  ui: PropTypes.any,
-  options: PropTypes.object,
-  ...layoutPropTypes,
-}
-
-const defaultProps = {
-  ui: PhotoswipeUIDefault,
-  options: {},
-  ...layoutDefaultProps,
+  }).isRequired,
+  ui: PropTypes.any.isRequired,
 }
 
 interface PhotoSwipeItem extends PhotoSwipe.Item {
@@ -46,21 +33,19 @@ type PhotoSwipeUI =
     ) => PhotoSwipe.UI<PhotoSwipe.Options>)
   | boolean
 
-export interface GalleryProps
-  extends Omit<Props & LayoutProps, 'layoutRef' | 'ui' | 'options'> {
-  layoutRef?: React.MutableRefObject<HTMLElement>
-  ui?: PhotoSwipeUI
-  options?: PhotoSwipe.Options & PhotoswipeUIDefault.Options
+export interface CustomGalleryProps
+  extends Omit<Props, 'layoutRef' | 'ui' | 'options'> {
+  layoutRef: React.MutableRefObject<HTMLElement>
+  ui: PhotoSwipeUI
+  options?: PhotoSwipe.Options & PhotoswipeUiDefaultOptions
 }
 
-export const Gallery: FC<GalleryProps> = ({
+export const CustomGallery: FC<CustomGalleryProps> = ({
   children,
   ui,
   options,
   layoutRef,
-  ...restProps
 }) => {
-  const defaultLayoutRef = useRef<HTMLElement>()
   const items = useRef(new Map<ItemRef, InternalItem>())
 
   const handleClick = useCallback((targetRef: ItemRef) => {
@@ -99,11 +84,11 @@ export const Gallery: FC<GalleryProps> = ({
       entries.forEach(prepare)
     }
 
-    const layoutEl = defaultLayoutRef.current || layoutRef?.current
+    const layoutEl = layoutRef.current
 
     if (layoutEl) {
       new PhotoSwipe(layoutEl, ui, normalized, {
-        ...options,
+        ...(options || {}),
         index,
         getThumbBoundsFn: (thumbIndex) => {
           const { el } = normalized[thumbIndex]
@@ -127,14 +112,13 @@ export const Gallery: FC<GalleryProps> = ({
   return (
     <Context.Provider value={{ remove, set, handleClick }}>
       {children}
-      {layoutRef ? null : (
-        <DefaultLayout {...restProps} ref={defaultLayoutRef} />
-      )}
     </Context.Provider>
   )
 }
 
 // @ts-ignore
-Gallery.propTypes = propTypes
+CustomGallery.propTypes = propTypes
 
-Gallery.defaultProps = defaultProps
+CustomGallery.defaultProps = {
+  options: {},
+}
diff --git a/src/gallery-default.tsx b/src/gallery-default.tsx
@@ -0,0 +1,40 @@
+import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
+import React, { useRef, FC } from 'react'
+import PropTypes, { InferProps } from 'prop-types'
+import { CustomGallery, DefaultLayout, layoutPropTypes, LayoutProps } from '.'
+
+const propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+  options: PropTypes.object,
+  ...layoutPropTypes,
+}
+
+type Props = InferProps<typeof propTypes>
+
+export interface GalleryProps extends Omit<Props & LayoutProps, 'options'> {
+  options?: PhotoSwipe.Options & PhotoswipeUIDefault.Options
+}
+
+export const Gallery: FC<GalleryProps> = ({
+  children,
+  options,
+  ...restProps
+}) => {
+  const defaultLayoutRef = useRef<HTMLElement>()
+  return (
+    <CustomGallery
+      layoutRef={defaultLayoutRef}
+      ui={PhotoswipeUIDefault}
+      options={options}
+    >
+      {children}
+      <DefaultLayout {...restProps} ref={defaultLayoutRef} />
+    </CustomGallery>
+  )
+}
+
+// @ts-ignore
+Gallery.propTypes = propTypes
diff --git a/src/index.stories.tsx b/src/index.stories.tsx
@@ -1,8 +1,9 @@
 import React, { useState, useRef, FC } from 'react'
+import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
 import { withKnobs, button } from '@storybook/addon-knobs'
 import { shuffle } from './helpers'
 import { InternalItem } from './types'
-import { Gallery, Item, DefaultLayout } from '.'
+import { Gallery, CustomGallery, Item, DefaultLayout } from '.'
 import 'photoswipe/dist/photoswipe.css'
 import 'photoswipe/dist/default-skin/default-skin.css'
 
@@ -83,17 +84,17 @@ export const sharedLayout = () => {
   return (
     <>
       <h1>First Gallery</h1>
-      <Gallery layoutRef={layoutRef}>
+      <CustomGallery ui={PhotoswipeUIDefault} layoutRef={layoutRef}>
         {shuffle(items).map((props) => (
           <ImageItem {...props} key={props.original} />
         ))}
-      </Gallery>
+      </CustomGallery>
       <h1>Second Gallery</h1>
-      <Gallery layoutRef={layoutRef}>
+      <CustomGallery ui={PhotoswipeUIDefault} layoutRef={layoutRef}>
         {shuffle(items).map((props) => (
           <ImageItem {...props} key={props.original} />
         ))}
-      </Gallery>
+      </CustomGallery>
       <DefaultLayout
         shareButton={false}
         fullscreenButton={false}

diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,5 @@
 export * from './photoswipe-layout'
-export * from './gallery'
+export * from './gallery-custom'
+export * from './gallery-default'
 export * from './item'
 export * from './types'