82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Flex, IconButton, Icon, Text, IconButtonProps } from '@chakra-ui/react';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { TbChevronLeft, TbChevronRight, TbChevronsLeft, TbChevronsRight } from 'react-icons/tb';
|
|
|
|
export interface IProps {
|
|
currentIndex: number
|
|
maxIndex: number
|
|
setIndex(index: number): void
|
|
setPrevious():void
|
|
setNext():void
|
|
}
|
|
|
|
const Paginator: React.FC<IProps> = (props) => {
|
|
|
|
const { currentIndex, maxIndex, setIndex, setPrevious, setNext } = props
|
|
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<Flex w="full" mt={4} pr={8} justify="flex-end" wrap="wrap">
|
|
<IconButton
|
|
aria-label={t('table.first_page')}
|
|
title={t('table.first_page') ?? ''}
|
|
icon={<Icon as={TbChevronsLeft} />}
|
|
mr={1}
|
|
display={{ base: 'none', md: 'inline-flex' }}
|
|
onClick={() => setIndex(0)}
|
|
disabled={currentIndex == 0}
|
|
/>
|
|
<IconButton
|
|
aria-label={t('table.previous_page')}
|
|
title={t('table.previous_page') ?? ''}
|
|
icon={<Icon as={TbChevronLeft} />}
|
|
mr={1}
|
|
onClick={() => setPrevious()}
|
|
disabled={currentIndex == 0}
|
|
/>
|
|
{
|
|
Array.from(Array(maxIndex).keys()).map((pageIndex) => {
|
|
const title = t('table.page', { page: pageIndex + 1 });
|
|
const disabled = currentIndex === pageIndex;
|
|
const style: Partial<IconButtonProps> = disabled ? { colorScheme: 'blue' } : {};
|
|
return (
|
|
<IconButton
|
|
aria-label={title}
|
|
title={title}
|
|
key={pageIndex}
|
|
icon={<Text>{pageIndex + 1}</Text>}
|
|
mr={1}
|
|
onClick={() => setIndex(pageIndex)}
|
|
disabled={disabled}
|
|
{...style}
|
|
/>
|
|
);
|
|
})
|
|
}
|
|
<IconButton
|
|
aria-label={t('table.next_page')}
|
|
title={t('table.next_page') ?? ''}
|
|
icon={<Icon as={TbChevronRight} />}
|
|
mr={{ base: 0, md: 1 }}
|
|
onClick={() => setNext()}
|
|
disabled={currentIndex + 1 == maxIndex}
|
|
/>
|
|
<IconButton
|
|
aria-label={t('table.last_page')}
|
|
title={t('table.last_page') ?? ''}
|
|
icon={<Icon as={TbChevronsRight} />}
|
|
display={{ base: 'none', md: 'inline-flex' }}
|
|
onClick={() => setIndex(maxIndex - 1)}
|
|
disabled={currentIndex + 1 == maxIndex}
|
|
/>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default Paginator;
|