undefined as any }; private static parseInteger(input: number | string, lastPage: number): number { // eslint-disable-next-line radix let inputPage = Number.parseInt(input as string, 10); if (!Number.isNaN(inputPage)) { inputPage = inputPage > lastPage ? lastPage : inputPage; inputPage = inputPage < 1 ? 1 : inputPage; } return inputPage; } private onChange(event: React.FormEvent, lastPage: number): void { const inputPage = Navigation.parseInteger(event.currentTarget.value, lastPage); this.setState({ userInputPage: Number.isNaN(inputPage) ? event.currentTarget.value : inputPage }); } private onKeyDown( event: React.KeyboardEvent, page: number, lastPage: number, onPageInput: (event: React.KeyboardEvent, page: number) => void ): void { const allowedKeys = [ 'Tab', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'ArrowUp', 'ArrowDown' ]; if (event.key === KeyTypes.Enter) { const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage); onPageInput(event, Number.isNaN(inputPage) ? page : inputPage); this.handleNewPage(event, Number.isNaN(inputPage) ? page : inputPage); } else if (!/^\d*$/.test(event.key) && !allowedKeys.includes(event.key)) { event.preventDefault(); } } handleNewPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { const { perPage, onSetPage } = this.props; const startIdx = (newPage - 1) * perPage; const endIdx = newPage * perPage; return onSetPage(_evt, newPage, perPage, startIdx, endIdx); }; componentDidUpdate(lastState: NavigationProps) { if ( this.props.page !== lastState.page && this.props.page <= this.props.lastPage && this.state.userInputPage !== this.props.page ) { this.setState({ userInputPage: this.props.page }); } } render() { const { page, // eslint-disable-next-line @typescript-eslint/no-unused-vars perPage, // eslint-disable-next-line @typescript-eslint/no-unused-vars onSetPage, isDisabled, itemCount, lastPage, firstPage, pagesTitle, pagesTitlePlural, toLastPageAriaLabel, toNextPageAriaLabel, toFirstPageAriaLabel, toPreviousPageAriaLabel, currPageAriaLabel, paginationAriaLabel, ofWord, onNextClick, onPreviousClick, onFirstClick, onLastClick, onPageInput, className, isCompact, ...props } = this.props; const { userInputPage } = this.state; return (
); } } export { Navigation };