diff --git a/src/gallery-custom.tsx b/src/gallery-custom.tsx index 883d070cb..7ee982f4e 100644 --- a/src/gallery-custom.tsx +++ b/src/gallery-custom.tsx @@ -1,31 +1,15 @@ import PhotoSwipe from 'photoswipe' import { Options as PhotoswipeUiDefaultOptions } from 'photoswipe/dist/photoswipe-ui-default' import React, { useRef, useCallback, FC } from 'react' -import PropTypes, { InferProps } from 'prop-types' +import PropTypes from 'prop-types' import { getElBounds, sortNodes } from './helpers' import { Context } from './context' import { ItemRef, InternalItem } from './types' -const propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]).isRequired, - options: PropTypes.object, - layoutRef: PropTypes.shape({ - current: PropTypes.instanceOf( - typeof Element === 'undefined' ? class Element {} : Element, - ), - }).isRequired, - ui: PropTypes.any.isRequired, -} - interface PhotoSwipeItem extends PhotoSwipe.Item { el: HTMLElement } -type Props = InferProps - type PhotoSwipeUI = | (new ( pswp: PhotoSwipe, @@ -33,13 +17,26 @@ type PhotoSwipeUI = ) => PhotoSwipe.UI) | boolean -export interface CustomGalleryProps - extends Omit { +export interface CustomGalleryProps { + /** + * Ref to your layout element + */ layoutRef: React.MutableRefObject + + /** + * PhotoSwipe UI class + */ ui: PhotoSwipeUI + + /** + * PhotoSwipe options + */ options?: PhotoSwipe.Options & PhotoswipeUiDefaultOptions } +/** + * Gallery component with ability to use specific UI and Layout + */ export const CustomGallery: FC = ({ children, ui, @@ -116,8 +113,17 @@ export const CustomGallery: FC = ({ ) } -// @ts-ignore -CustomGallery.propTypes = propTypes +CustomGallery.propTypes = { + children: PropTypes.any, + options: PropTypes.object, + // @ts-ignore + layoutRef: PropTypes.shape({ + current: PropTypes.instanceOf( + typeof Element === 'undefined' ? class Element {} : Element, + ), + }).isRequired, + ui: PropTypes.any.isRequired, +} CustomGallery.defaultProps = { options: {}, diff --git a/src/gallery-default.tsx b/src/gallery-default.tsx index 8d912de85..7ba897d4d 100644 --- a/src/gallery-default.tsx +++ b/src/gallery-default.tsx @@ -1,23 +1,18 @@ import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default' import React, { useRef, FC } from 'react' -import PropTypes, { InferProps } from 'prop-types' +import PropTypes 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 - -export interface GalleryProps extends Omit { +export interface GalleryProps extends LayoutProps { + /** + * PhotoSwipe options + */ options?: PhotoSwipe.Options & PhotoswipeUIDefault.Options } +/** + * Gallery component with default Layout and UI + */ export const Gallery: FC = ({ children, options, @@ -36,5 +31,7 @@ export const Gallery: FC = ({ ) } -// @ts-ignore -Gallery.propTypes = propTypes +Gallery.propTypes = { + options: PropTypes.object, + ...layoutPropTypes, +} diff --git a/src/item.ts b/src/item.ts index 3f584a2ab..a8499be8a 100644 --- a/src/item.ts +++ b/src/item.ts @@ -1,23 +1,62 @@ import { useRef, useCallback, useContext, useEffect, FC } from 'react' -import PropTypes, { InferProps } from 'prop-types' +import PropTypes from 'prop-types' import { ItemRef } from './types' import { Context } from './context' -const propTypes = { - original: PropTypes.string, - thumbnail: PropTypes.string, - width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - title: PropTypes.string, - html: PropTypes.string, - children: PropTypes.func.isRequired, +interface ChildrenFnProps { + /** + * Required `ref` object to any html node of item + */ + ref: ItemRef + + /** + * Function that opens the gallery at the current item's index + */ + open: () => void } -export interface ItemProps - extends Omit, 'children'> { - children: (props: { ref: ItemRef; open: () => void }) => JSX.Element +export interface ItemProps { + /** + * Render prop for exposing Gallery API + */ + children: (props: ChildrenFnProps) => JSX.Element + + /** + * Url of original image + */ + original?: string + + /** + * Url of thumbnail + */ + thumbnail?: string + + /** + * Width of original image + */ + width?: string | number + + /** + * Height of original image + */ + height?: string | number + + /** + * Title for Default UI + */ + title?: string + + /** + * Html content, if you need to use it as modal + */ + html?: string } +/** + * Gallery item + * + * Should be a children of Gallery or CustomGallery component + */ export const Item: FC = ({ children, ...restProps }) => { const ref: ItemRef = useRef() const { remove, set, handleClick } = useContext(Context) @@ -31,4 +70,12 @@ export const Item: FC = ({ children, ...restProps }) => { return children({ ref, open }) } -Item.propTypes = propTypes +Item.propTypes = { + original: PropTypes.string, + thumbnail: PropTypes.string, + width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + title: PropTypes.string, + html: PropTypes.string, + children: PropTypes.func.isRequired, +} diff --git a/src/photoswipe-layout.tsx b/src/photoswipe-layout.tsx index 73cc574cb..09456e562 100644 --- a/src/photoswipe-layout.tsx +++ b/src/photoswipe-layout.tsx @@ -26,17 +26,73 @@ export const layoutDefaultProps = { } export type LayoutProps = { + /** + * `.pswp__button--close` caption + * + * Default: 'Close (Esc)' + */ closeButtonCaption?: string + + /** + * `.pswp__button--share` caption + * + * Default: 'Share' + */ shareButtonCaption?: string + + /** + * .pswp__button--fs caption + * + * Default: 'Toggle fullscreen' + */ toggleFullscreenButtonCaption?: string + + /** + * .pswp__button--zoom caption + * + * Default: 'Zoom in/out' + */ zoomButtonCaption?: string + + /** + * .pswp__button--arrow--left caption + * + * Default: 'Previous (arrow left)' + */ prevButtonCaption?: string + + /** + * .pswp__button--arrow--right caption + * + * Default: 'Next (arrow right)' + */ nextButtonCaption?: string + + /** + * Show .pswp__button--share + * + * Default: true + */ shareButton?: boolean + + /** + * Show .pswp__button--fs + * + * Default: true + */ fullscreenButton?: boolean + + /** + * Show .pswp__button--zoom + * + * Default: true + */ zoomButton?: boolean } +/** + * Default PhotoSwipe layout + */ export const DefaultLayout = React.forwardRef( ( {