62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import * as React from 'react';
|
|
import {Pagination} from '@shopify/hydrogen';
|
|
|
|
/**
|
|
* <PaginatedResourceSection> encapsulates the previous and next pagination behaviors throughout your application.
|
|
*/
|
|
export function PaginatedResourceSection<NodesType>({
|
|
connection,
|
|
children,
|
|
ariaLabel,
|
|
resourcesClassName,
|
|
}: {
|
|
connection: React.ComponentProps<typeof Pagination<NodesType>>['connection'];
|
|
children: React.FunctionComponent<{node: NodesType; index: number}>;
|
|
ariaLabel?: string;
|
|
resourcesClassName?: string;
|
|
}) {
|
|
return (
|
|
<Pagination connection={connection}>
|
|
{({nodes, isLoading, PreviousLink, NextLink}) => {
|
|
const resourcesMarkup = nodes.map((node, index) =>
|
|
children({node, index}),
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<PreviousLink>
|
|
{isLoading ? (
|
|
'Loading...'
|
|
) : (
|
|
<span>
|
|
<span aria-hidden="true">↑</span> Load previous
|
|
</span>
|
|
)}
|
|
</PreviousLink>
|
|
{resourcesClassName ? (
|
|
<div
|
|
aria-label={ariaLabel}
|
|
className={resourcesClassName}
|
|
role={ariaLabel ? 'region' : undefined}
|
|
>
|
|
{resourcesMarkup}
|
|
</div>
|
|
) : (
|
|
resourcesMarkup
|
|
)}
|
|
<NextLink>
|
|
{isLoading ? (
|
|
'Loading...'
|
|
) : (
|
|
<span>
|
|
Load more <span aria-hidden="true">↓</span>
|
|
</span>
|
|
)}
|
|
</NextLink>
|
|
</div>
|
|
);
|
|
}}
|
|
</Pagination>
|
|
);
|
|
}
|