From 4fa320a46b4822395567b857e8bc4beebc1a790d Mon Sep 17 00:00:00 2001 From: Tien Date: Wed, 30 Aug 2023 14:03:31 -0700 Subject: [PATCH 1/6] feat(PaginationItem): Expose the gallery-pagination-item component --- README.md | 40 +++++++++++++++++-- .../components/gallery-pagination-item.jsx | 22 ++++++++-- src/lib/components/gallery-pagination.jsx | 39 ++++++++++++++---- src/lib/index.js | 1 + src/main.jsx | 14 +++++++ 5 files changed, 103 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 41107d4..d6990b5 100644 --- a/README.md +++ b/README.md @@ -228,14 +228,18 @@ This render prop is a nice alternative to simply passing childern to the ``) of pagination items. Must be used within a ``. +*Note: The use of renderPaginationItem is deprecated. [<GalleryPaginationItem>](#gallerypaginationitem) and `children` render props should be used here. This is still availiable to prevent breaking changes.* + #### Props: | Prop | Type | Description | | -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------- | | className | String | | -| renderPaginationItem | Function | A render prop, returning the JSX to render for each pagination item. [More information](#renderpaginationitem) below. | +| children | JSX | Pass children or use `` component to render pagination item buttons. This also is a render prop that will return some values to use [More information](#renderpaginationitem) below. | +| renderPaginationItem *(deprecated)* | Function | A render prop, returning the JSX to render for each pagination item. [More information](#renderpaginationitem) below. | -#### `renderPaginationItem` +#### `renderPaginationItem`, +#### `children` render props This render prop wraps its return value in a list item (`
  • `) and a `
    • @@ -34,5 +47,8 @@ GalleryPaginationItem.propTypes = { index: PropTypes.number.isRequired, active: PropTypes.bool.isRequired, className: PropTypes.string, + buttonClassName: PropTypes.string, + buttonProps: PropTypes.object, children: PropTypes.node, + onClick: PropTypes.func, } diff --git a/src/lib/components/gallery-pagination.jsx b/src/lib/components/gallery-pagination.jsx index 14475ff..834f23e 100644 --- a/src/lib/components/gallery-pagination.jsx +++ b/src/lib/components/gallery-pagination.jsx @@ -10,17 +10,41 @@ import { GalleryPaginationItem } from "./gallery-pagination-item" // utils import classnames from "../utils/classnames" -export const GalleryPagination = ({ renderPaginationItem, className, ...props }) => { +/*** + * + * Pagination Item + * --- + * Children Render Props example + * @returns {index, active, activeIndex, item} + * @deprecated renderPaginationItem + * + * @param {number} index - The index of the current pagination item being iterated over. + * @param {boolean} active - Whether the current pagination item being iterated over corresponds to the active gallery item. + * @param {number} activeIndex - The index of the currently active gallery item. + * @param {object} item - The current pagination item being iterated over, as defined by the Array fed to the `` component's `items` prop. + * + */ + +export const GalleryPagination = ({ + renderPaginationItem, + className, + children = renderPaginationItem, + ...props +}) => { const { activeIndex, galleryItems } = useGallery() return (
      - {galleryItems.map((item, i) => { - const active = activeIndex === i - return ( - - {renderPaginationItem({ item, i, activeIndex, active })} + {galleryItems.map((item, index) => { + const active = activeIndex === index + + // This conditional is to support legacy implimentations of this library. + return renderPaginationItem ? ( + + {renderPaginationItem({ item, i: index, activeIndex, active })} + ) : ( + children({ index, active, activeIndex, item }) ) })}
    @@ -28,6 +52,7 @@ export const GalleryPagination = ({ renderPaginationItem, className, ...props }) } GalleryPagination.propTypes = { - renderPaginationItem: PropTypes.func.isRequired, + renderPaginationItem: PropTypes.func, className: PropTypes.string, + children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired, } diff --git a/src/lib/index.js b/src/lib/index.js index 7110467..031ac1b 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1,6 +1,7 @@ export { Gallery } from "./components/gallery-context" export { GalleryMain } from "./components/gallery-main" export { GalleryPagination } from "./components/gallery-pagination" +export { GalleryPaginationItem } from "./components/gallery-pagination-item" export { GalleryNav } from "./components/gallery-nav" export { GalleryItem } from "./components/gallery-item" export { useGallery } from "./hooks/use-gallery" diff --git a/src/main.jsx b/src/main.jsx index 8f37bc0..b528068 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -6,6 +6,7 @@ import { GalleryItem, GalleryNav, GalleryPagination, + GalleryPaginationItem, useGallery, } from "./lib" @@ -61,7 +62,20 @@ function App() { ⬅️ ➡️ + {/* Legacy Pagination Example + * {i + 1}} /> + */} {i + 1}} /> + + + {({ index, active }) => { + return ( + + {index + 1} + + ) + }} +     ) From 1a520dc1dad38ed09c8d2346d7813b09b9b3ae76 Mon Sep 17 00:00:00 2001 From: Tien Date: Mon, 16 Oct 2023 17:33:21 -0700 Subject: [PATCH 2/6] refactor: Use explicit render prop --- README.md | 27 ++++------- .../components/gallery-pagination-item.jsx | 8 +--- src/lib/components/gallery-pagination.jsx | 48 ++++++++----------- src/main.jsx | 21 +++----- 4 files changed, 40 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index d6990b5..37bb357 100644 --- a/README.md +++ b/README.md @@ -228,18 +228,14 @@ This render prop is a nice alternative to simply passing childern to the ``) of pagination items. Must be used within a ``. -*Note: The use of renderPaginationItem is deprecated. [<GalleryPaginationItem>](#gallerypaginationitem) and `children` render props should be used here. This is still availiable to prevent breaking changes.* - #### Props: | Prop | Type | Description | | -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------- | | className | String | | -| children | JSX | Pass children or use `` component to render pagination item buttons. This also is a render prop that will return some values to use [More information](#renderpaginationitem) below. | -| renderPaginationItem *(deprecated)* | Function | A render prop, returning the JSX to render for each pagination item. [More information](#renderpaginationitem) below. | +| renderPaginationItem | Function | A render prop, returning the JSX to render for each pagination item. [More information](#renderpaginationitem) below. | -#### `renderPaginationItem`, -#### `children` render props +#### `renderPaginationItem` This render prop wraps its return value in a list item (`
  • `) and a `