refactor: slightly change API, disable strictNullChecks

dromru · Apr 22, 2020 · 554ea30 · 554ea30
1 parent ebc40f4
commit 554ea30
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -7,31 +7,38 @@ import 'photoswipe/dist/default-skin/default-skin.css'
 
 const items = [
   {
-    large: 'https://placekitten.com/1024/768?image=1',
-    thumb: 'https://placekitten.com/80/60?image=1',
-    w: 1024,
-    h: 768,
+    original: 'https://placekitten.com/1024/768?image=1',
+    thumbnail: 'https://placekitten.com/80/60?image=1',
+    width: 1024,
+    height: 768,
   },
   {
-    large: 'https://placekitten.com/1024/768?image=2',
-    thumb: 'https://placekitten.com/80/60?image=2',
-    w: 1024,
-    h: 768,
+    original: 'https://placekitten.com/1024/768?image=2',
+    thumbnail: 'https://placekitten.com/80/60?image=2',
+    width: 1024,
+    height: 768,
   },
   {
-    large: 'https://placekitten.com/1024/768?image=3',
-    thumb: 'https://placekitten.com/80/60?image=3',
-    w: 1024,
-    h: 768,
+    original: 'https://placekitten.com/1024/768?image=3',
+    thumbnail: 'https://placekitten.com/80/60?image=3',
+    width: 1024,
+    height: 768,
   },
 ]
 
 const MyGallery = () => (
   <Gallery>
-    {items.map(({ large, thumb, w, h }, i) => (
-      <Item width={w} height={h} full={large} thumb={thumb} key={large} title={`Kitten ${i}`}>
-        {({ open, thumbRef }) => (
-          <img onClick={open} src={src} ref={thumbRef} />
+    {items.map(({ original, thumbnail, width, height }, index) => (
+      <Item
+        key={original}
+        original={original}
+        thumbnail={thumbnail}
+        width={width}
+        height={height}
+        title={`Kitten ${i}`}
+      >
+        {({ open, thumbnailRef }) => (
+          <img onClick={open} src={thumbnail} ref={thumbnailRef} />
         )}
       </Item>
     ))}

diff --git a/src/gallery.tsx b/src/gallery.tsx
@@ -48,7 +48,7 @@ type PhotoSwipeUI =
 
 export interface GalleryProps
   extends Omit<Props & LayoutProps, 'layoutRef' | 'ui' | 'options'> {
-  layoutRef?: React.RefObject<HTMLElement>
+  layoutRef?: React.MutableRefObject<HTMLElement>
   ui?: PhotoSwipeUI
   options?: PhotoSwipe.Options & PhotoswipeUIDefault.Options
 }
@@ -69,7 +69,7 @@ export const Gallery: FC<GalleryProps> = ({
     let i = 0
     for (const [
       r,
-      { thumbRef, width, height, title, full, thumb },
+      { thumbnailRef, width, height, title, original, thumbnail },
     ] of items.current) {
       if (r === ref) {
         index = i
@@ -78,15 +78,15 @@ export const Gallery: FC<GalleryProps> = ({
         ...(title ? { title } : {}),
         w: Number(width),
         h: Number(height),
-        src: full,
-        msrc: thumb || undefined,
-        thumbEl: thumbRef.current || undefined,
+        src: original,
+        msrc: thumbnail,
+        thumbEl: thumbnailRef.current,
       })
       i++
     }
     const layoutEl = defaultLayoutRef.current || layoutRef?.current
     if (layoutEl) {
-      new PhotoSwipe(layoutEl, ui as PhotoSwipeUI, normalized, {
+      new PhotoSwipe(layoutEl, ui, normalized, {
         ...options,
         index,
         getThumbBoundsFn: (thumbIndex) => {
@@ -112,10 +112,7 @@ export const Gallery: FC<GalleryProps> = ({
     <Context.Provider value={{ remove, update, handleClick }}>
       {children}
       {layoutRef ? null : (
-        <DefaultLayout
-          {...restProps}
-          ref={defaultLayoutRef as React.RefObject<HTMLDivElement>}
-        />
+        <DefaultLayout {...restProps} ref={defaultLayoutRef} />
       )}
     </Context.Provider>
   )

diff --git a/src/item.ts b/src/item.ts
@@ -1,39 +1,43 @@
 import { useRef, useCallback, useContext, useLayoutEffect, FC } from 'react'
 import PropTypes, { InferProps } from 'prop-types'
-import { ItemRef, ThumbRef } from './types'
+import { ItemRef, ThumbnailRef } from './types'
 import { Context } from './context'
 
 const propTypes = {
-  full: PropTypes.string.isRequired,
-  thumb: PropTypes.string,
+  original: PropTypes.string.isRequired,
+  thumbnail: PropTypes.string,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   title: PropTypes.string,
   children: PropTypes.func.isRequired,
 }
 
-const defaultProps = {
-  thumb: null,
-  title: null,
+export interface ItemProps
+  extends Omit<InferProps<typeof propTypes>, 'children'> {
+  children: (props: {
+    open: () => void
+    thumbnailRef: ThumbnailRef
+  }) => JSX.Element
 }
 
-export type ItemProps = InferProps<typeof propTypes>
-
 export const Item: FC<ItemProps> = ({ children, ...restProps }) => {
   const ref: ItemRef = useRef()
-  const thumbRef: ThumbRef = useRef(null)
+  const thumbnailRef: ThumbnailRef = useRef()
   const { remove, update, handleClick } = useContext(Context)
   const open = useCallback(() => handleClick(ref), [])
 
   useLayoutEffect(() => {
     remove(ref)
-    update(ref, { thumbRef, ...restProps })
+    update(ref, { thumbnailRef, ...restProps })
     return () => remove(ref)
   })
 
-  return children({ open, thumbRef })
+  return children({ open, thumbnailRef })
 }
 
 Item.propTypes = propTypes
 
-Item.defaultProps = defaultProps
+Item.defaultProps = {
+  thumbnail: null,
+  title: null,
+}
diff --git a/src/photoswipe-layout.tsx b/src/photoswipe-layout.tsx
@@ -37,7 +37,7 @@ export type LayoutProps = {
   zoomButton?: boolean
 }
 
-export const DefaultLayout = React.forwardRef<HTMLDivElement, LayoutProps>(
+export const DefaultLayout = React.forwardRef<HTMLElement, LayoutProps>(
   (
     {
       closeButtonCaption,
@@ -59,7 +59,7 @@ export const DefaultLayout = React.forwardRef<HTMLDivElement, LayoutProps>(
       role="dialog"
       aria-hidden="true"
       {...rest}
-      ref={ref}
+      ref={ref as React.MutableRefObject<HTMLDivElement>}
     >
       <div className="pswp__bg" />
       <div className="pswp__scroll-wrap">

diff --git a/src/types.ts b/src/types.ts
@@ -2,9 +2,11 @@ import { ItemProps } from './item'
 
 export type ItemRef = React.RefObject<undefined>
 
-export type ThumbRef = React.RefObject<HTMLImageElement>
+export type ThumbnailRef = React.MutableRefObject<HTMLImageElement>
 
-export type InternalItem = Omit<ItemProps, 'children'> & { thumbRef: ThumbRef }
+export type InternalItem = Omit<ItemProps, 'children'> & {
+  thumbnailRef: ThumbnailRef
+}
 
 export interface InternalAPI {
   remove: (ref: ItemRef) => void

diff --git a/stories/index.stories.tsx b/stories/index.stories.tsx
@@ -8,7 +8,7 @@ export default { title: 'Gallery', decorators: [withKnobs] }
 
 const N = 3
 
-function shuffle(array: any[]) {
+function shuffle<T>(array: T[]) {
   let currentIndex = array.length
   let temp: any
   let randomIndex: number
@@ -26,33 +26,45 @@ function shuffle(array: any[]) {
 }
 
 interface ImageItem {
-  large: string
-  thumb: string
-  w: number
-  h: number
+  original: string
+  thumbnail: string
+  width: number
+  height: number
   title: string
 }
 
 const createItem = (index: number): ImageItem => ({
-  large: `https://placekitten.com/1024/768?image=${index}`,
-  thumb: `https://placekitten.com/160/120?image=${index}`,
-  w: 1024,
-  h: 768,
+  original: `https://placekitten.com/1024/768?image=${index}`,
+  thumbnail: `https://placekitten.com/160/120?image=${index}`,
+  width: 1024,
+  height: 768,
   title: `kitty #${index}`,
 })
 
 const items = Array.from({ length: N }, (_, i) => createItem(i + 1))
 
-const ImageItem: FC<ImageItem> = ({ large, thumb, w, h, title }) => {
+const ImageItem: FC<ImageItem> = ({
+  original,
+  thumbnail,
+  width,
+  height,
+  title,
+}) => {
   const [fullTitle, setFullTitle] = useState(title)
   return (
-    <Item width={w} height={h} full={large} thumb={thumb} title={fullTitle}>
-      {({ open, thumbRef }) => (
+    <Item
+      original={original}
+      thumbnail={thumbnail}
+      width={width}
+      height={height}
+      title={fullTitle}
+    >
+      {({ open, thumbnailRef }) => (
         <div style={{ display: 'inline-block', margin: 5 }}>
           <img
             onClick={open}
-            src={thumb}
-            ref={thumbRef}
+            src={thumbnail}
+            ref={thumbnailRef}
             style={{ display: 'block', cursor: 'pointer', marginBottom: 5 }}
           />
           <input
@@ -85,7 +97,7 @@ export const playground = () => {
   return (
     <Gallery>
       {photos.map((props) => (
-        <ImageItem {...props} key={props.thumb} />
+        <ImageItem {...props} key={props.original} />
       ))}
     </Gallery>
   )
@@ -97,13 +109,13 @@ export const sharedLayout = () => {
     <>
       <Gallery layoutRef={layoutRef}>
         {shuffle(items).map((props) => (
-          <ImageItem {...props} key={props.thumb} />
+          <ImageItem {...props} key={props.original} />
         ))}
       </Gallery>
       <br />
       <Gallery layoutRef={layoutRef}>
         {shuffle(items).map((props) => (
-          <ImageItem {...props} key={props.thumb} />
+          <ImageItem {...props} key={props.original} />
         ))}
       </Gallery>
       <DefaultLayout

diff --git a/tsconfig.json b/tsconfig.json
@@ -6,6 +6,7 @@
     "jsx": "react",
     "declaration": true,
     "strict": true,
+    "strictNullChecks": false,
     "skipLibCheck": true,
     "sourceMap": true,
     "allowJs": false,
@@ -15,4 +16,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]
-}
+}