src/ListView/components/Table/Bottom.tsx
import React from 'react'
import { Flex, Text } from '@chakra-ui/react'
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'react-feather'
import type { BaseAnalytic } from '../../../integration/analytics'
import { pushAnalytics } from '../../../integration/analytics/utils'
import { EventNameEnum, WidgetTypeEnum } from '../../../integration/analytics'
import { TableIconButton } from './styles'
type BottonProps = {
analytics?: BaseAnalytic
resourceName: string
pageIndex: number
canPreviousPage: boolean
canNextPage: boolean
pageOptions: Array<number>
pageCount: number
gotoPage: Function
nextPage: Function
previousPage: Function
}
const Bottom = (props: BottonProps): JSX.Element => {
const {
resourceName,
pageIndex,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
} = props
return (
<Flex
borderTopWidth="1px"
overflowX="hidden"
overflowY="hidden"
p={4}
bg="white"
roundedBottomLeft={4}
roundedBottomRight={4}
justifyContent="space-between"
flexDirection="row"
>
<Flex flexDirection="row">
<TableIconButton
mr={2}
onClick={() => {
pushAnalytics({
eventName: EventNameEnum.BUTTON_CLICK,
widgetName: 'table_pagination_goto_first_page',
widgetType: WidgetTypeEnum.PAGINATION,
value: undefined,
resource: resourceName,
viewType: 'list_view',
...props,
})
gotoPage(0)
}}
isDisabled={!canPreviousPage}
icon={<ChevronsLeft size={20} />}
/>
<TableIconButton
mr={2}
isDisabled={!canPreviousPage}
onClick={() => {
previousPage()
pushAnalytics({
eventName: EventNameEnum.BUTTON_CLICK,
widgetName: 'table_pagination_goto_previous_page',
widgetType: WidgetTypeEnum.PAGINATION,
value: pageIndex - 1,
resource: resourceName,
viewType: 'list_view',
...props,
})
}}
icon={<ChevronLeft size={20} />}
/>
</Flex>
<Flex justifyContent="center" alignItems="center">
<Text mr={4}>
Страница{' '}
<strong>
{pageIndex + 1} из {pageOptions.length}
</strong>{' '}
</Text>
</Flex>
<Flex flexDirection="row">
<TableIconButton
ml={2}
isDisabled={!canNextPage}
onClick={() => {
pushAnalytics({
eventName: EventNameEnum.BUTTON_CLICK,
widgetName: 'table_pagination_goto_next_page',
widgetType: WidgetTypeEnum.PAGINATION,
value: pageIndex + 1,
resource: resourceName,
viewType: 'list_view',
...props,
})
nextPage()
}}
icon={<ChevronRight size={20} />}
/>
<TableIconButton
ml={2}
onClick={() => {
const lastPage = pageCount ? pageCount - 1 : 1
pushAnalytics({
eventName: EventNameEnum.BUTTON_CLICK,
widgetName: 'table_pagination_goto_last_page',
widgetType: WidgetTypeEnum.PAGINATION,
value: lastPage,
resource: resourceName,
viewType: 'list_view',
...props,
})
gotoPage(lastPage)
}}
isDisabled={!canNextPage}
icon={<ChevronsRight size={20} />}
/>
</Flex>
</Flex>
)
}
export { Bottom }