diff --git a/src/__tests__/ensure-ref-passed.test.ts b/src/__tests__/ensure-ref-passed.test.ts new file mode 100644 index 000000000..690650c50 --- /dev/null +++ b/src/__tests__/ensure-ref-passed.test.ts @@ -0,0 +1,27 @@ +/** + * @jest-environment jsdom + */ + +import ensureRefPassed from '../helpers/ensure-ref-passed' +import { NoRefError } from '../no-ref-error' +import { InternalItem, ItemRef } from '../types' + +describe('ensureRefPassed helper', () => { + test('entry with element-ref should return entry', () => { + const entry: [ItemRef, InternalItem] = [ + { current: new Image() }, + {} as InternalItem, + ] + + expect(ensureRefPassed(entry)).toBe(entry) + }) + + test('entry with null-ref should throw', () => { + const entry: [ItemRef, InternalItem] = [ + { current: null }, + {} as InternalItem, + ] + + expect(() => ensureRefPassed(entry)).toThrow(NoRefError) + }) +}) diff --git a/src/__tests__/entry-item-ref-is-element.test.ts b/src/__tests__/entry-item-ref-is-element.test.ts new file mode 100644 index 000000000..13c857ac0 --- /dev/null +++ b/src/__tests__/entry-item-ref-is-element.test.ts @@ -0,0 +1,26 @@ +/** + * @jest-environment jsdom + */ + +import entryItemRefIsElement from '../helpers/entry-item-ref-is-element' +import { InternalItem, ItemRef } from '../types' + +describe('entryItemRefIsElement helper', () => { + test('ref with element should return true', () => { + const entry: [ItemRef, InternalItem] = [ + { current: new Image() }, + {} as InternalItem, + ] + + expect(entryItemRefIsElement(entry)).toBe(true) + }) + + test('ref with null should return false', () => { + const entry: [ItemRef, InternalItem] = [ + { current: null }, + {} as InternalItem, + ] + + expect(entryItemRefIsElement(entry)).toBe(false) + }) +}) diff --git a/src/gallery.tsx b/src/gallery.tsx index 2112d33c0..6e5e8f8c8 100644 --- a/src/gallery.tsx +++ b/src/gallery.tsx @@ -19,9 +19,8 @@ import getHashValue from './helpers/get-hash-value' import getBaseUrl from './helpers/get-base-url' import hashIncludesNavigationQueryParams from './helpers/hash-includes-navigation-query-params' import getInitialActiveSlideIndex from './helpers/get-initial-active-slide-index' -import ensureRefPassed, { - entryItemRefIsElement, -} from './helpers/ensure-ref-passed' +import ensureRefPassed from './helpers/ensure-ref-passed' +import entryItemRefIsElement from './helpers/entry-item-ref-is-element' import { Context } from './context' import { GalleryProps, ItemRef, InternalItem, InternalAPI } from './types' import PhotoSwipeLightboxStub from './lightbox-stub' diff --git a/src/helpers/ensure-ref-passed.ts b/src/helpers/ensure-ref-passed.ts index 9f04b2912..f3ffda3d1 100644 --- a/src/helpers/ensure-ref-passed.ts +++ b/src/helpers/ensure-ref-passed.ts @@ -1,10 +1,6 @@ import { NoRefError } from '../no-ref-error' import { EnsuredItemRef, InternalItem, ItemRef } from '../types' - -export const entryItemRefIsElement = ( - entry: [ItemRef, InternalItem], -): entry is [EnsuredItemRef, InternalItem] => - entry[0].current instanceof Element +import entryItemRefIsElement from './entry-item-ref-is-element' const ensureRefPassed = ( entry: [ItemRef, InternalItem], diff --git a/src/helpers/entry-item-ref-is-element.ts b/src/helpers/entry-item-ref-is-element.ts new file mode 100644 index 000000000..9a49659d0 --- /dev/null +++ b/src/helpers/entry-item-ref-is-element.ts @@ -0,0 +1,8 @@ +import { EnsuredItemRef, InternalItem, ItemRef } from '../types' + +const entryItemRefIsElement = ( + entry: [ItemRef, InternalItem], +): entry is [EnsuredItemRef, InternalItem] => + entry[0].current instanceof Element + +export default entryItemRefIsElement diff --git a/src/item.ts b/src/item.ts index 1c6888b06..4ec3beab6 100644 --- a/src/item.ts +++ b/src/item.ts @@ -16,12 +16,6 @@ export const Item = ({ const ref = useRef(null) const { remove, set, handleClick, isRefRegistered } = useApiContext() - useEffect(() => { - return () => { - remove(ref) - } - }, [remove]) - const refCallback = useCallback['ref']>( (node) => { ref.current = node @@ -48,6 +42,12 @@ export const Item = ({ [refCallback, open], ) + useEffect(() => { + return () => { + remove(ref) + } + }, [remove]) + return children(childrenFnProps) }