53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
|
|
import classes from './index.module.scss'
|
|
|
|
const defaultLabels = {
|
|
plural: 'Docs',
|
|
singular: 'Doc',
|
|
}
|
|
|
|
const defaultCollectionLabels = {
|
|
products: {
|
|
plural: 'Products',
|
|
singular: 'Product',
|
|
},
|
|
}
|
|
|
|
export const PageRange: React.FC<{
|
|
className?: string
|
|
collection?: string
|
|
collectionLabels?: {
|
|
plural?: string
|
|
singular?: string
|
|
}
|
|
currentPage?: number
|
|
limit?: number
|
|
totalDocs?: number
|
|
}> = (props) => {
|
|
const {
|
|
className,
|
|
collection,
|
|
collectionLabels: collectionLabelsFromProps,
|
|
currentPage,
|
|
limit,
|
|
totalDocs,
|
|
} = props
|
|
|
|
const indexStart = (currentPage ? currentPage - 1 : 1) * (limit || 1) + 1
|
|
let indexEnd = (currentPage || 1) * (limit || 1)
|
|
if (totalDocs && indexEnd > totalDocs) indexEnd = totalDocs
|
|
|
|
const { plural, singular } =
|
|
collectionLabelsFromProps || defaultCollectionLabels[collection || ''] || defaultLabels || {}
|
|
|
|
return (
|
|
<div className={[className, classes.pageRange].filter(Boolean).join(' ')}>
|
|
{(typeof totalDocs === 'undefined' || totalDocs === 0) && 'Search produced no results.'}
|
|
{typeof totalDocs !== 'undefined' &&
|
|
totalDocs > 0 &&
|
|
`Showing ${indexStart} - ${indexEnd} of ${totalDocs} ${totalDocs > 1 ? plural : singular}`}
|
|
</div>
|
|
)
|
|
}
|