import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Pagination/pagination'; import { css } from '@patternfly/react-styles'; import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon'; import { Button, ButtonVariant } from '../Button'; import { TextInput } from '../TextInput'; import { OnSetPage } from './Pagination'; import { pluralize, PickOptional } from '../../helpers'; import { KeyTypes } from '../../helpers/constants'; export interface NavigationProps extends React.HTMLProps { /** Additional classes for the pagination navigation container. */ className?: string; /** Accessible label for the input displaying the current page. */ currPageAriaLabel?: string; /** The number of first page where pagination starts. */ firstPage?: number; /** Flag indicating if the pagination is compact. */ isCompact?: boolean; /** Flag indicating if the pagination is disabled. */ isDisabled?: boolean; /** Total number of items. */ itemCount?: number; /** The number of the last page. */ lastPage?: number; /** Label for the English word "of". */ ofWord?: string; /** The number of the current page. */ page: number; /** The title of a page displayed beside the page number. */ pagesTitle?: string; /** The title of a page displayed beside the page number (the plural form). */ pagesTitlePlural?: string; /** Accessible label for the pagination component. */ paginationAriaLabel?: string; /** Number of items per page. */ perPage?: number; /** Accessible label for the button which moves to the first page. */ toFirstPageAriaLabel?: string; /** Accessible label for the button which moves to the last page. */ toLastPageAriaLabel?: string; /** Accessible label for the button which moves to the next page. */ toNextPageAriaLabel?: string; /** Accessible label for the button which moves to the previous page. */ toPreviousPageAriaLabel?: string; /** Function called when user clicks to navigate to first page. */ onFirstClick?: (event: React.SyntheticEvent, page: number) => void; /** Function called when user clicks to navigate to last page. */ onLastClick?: (event: React.SyntheticEvent, page: number) => void; /** Function called when user clicks to navigate to next page. */ onNextClick?: (event: React.SyntheticEvent, page: number) => void; /** Function called when user clicks to navigate to previous page. */ onPreviousClick?: (event: React.SyntheticEvent, page: number) => void; /** Function called when user inputs page number. */ onPageInput?: (event: React.KeyboardEvent, page: number) => void; /** Function called when page is changed. */ onSetPage: OnSetPage; } export interface NavigationState { userInputPage?: number | string; } class Navigation extends React.Component { static displayName = 'Navigation'; constructor(props: NavigationProps) { super(props); this.state = { userInputPage: this.props.page }; } static defaultProps: PickOptional = { className: '', isDisabled: false, isCompact: false, lastPage: 0, firstPage: 0, pagesTitle: '', pagesTitlePlural: '', toLastPageAriaLabel: 'Go to last page', toNextPageAriaLabel: 'Go to next page', toFirstPageAriaLabel: 'Go to first page', toPreviousPageAriaLabel: 'Go to previous page', currPageAriaLabel: 'Current page', paginationAriaLabel: 'Pagination', ofWord: 'of', onNextClick: () => undefined as any, onPreviousClick: () => undefined as any, onFirstClick: () => undefined as any, onLastClick: () => undefined as any, onPageInput: () =>