diff --git a/rollup.config.js b/rollup.config.js index a380d93e94..810c153ebc 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -21,6 +21,7 @@ const ALIAS_ENTRIES = [ { find: '../virtualscroller/VirtualScroller', replacement: 'primereact/virtualscroller' }, { find: '../button/Button', replacement: 'primereact/button' }, { find: '../inputtext/InputText', replacement: 'primereact/inputtext' }, + { find: '../inputnumber/InputNumber', replacement: 'primereact/inputnumber' }, { find: '../paginator/Paginator', replacement: 'primereact/paginator' }, { find: '../messages/Messages', replacement: 'primereact/messages' }, { find: '../progressbar/ProgressBar', replacement: 'primereact/progressbar' }, diff --git a/src/components/paginator/JumpToPageInput.js b/src/components/paginator/JumpToPageInput.js new file mode 100644 index 0000000000..b451cb05a2 --- /dev/null +++ b/src/components/paginator/JumpToPageInput.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { InputNumber } from '../inputnumber/InputNumber'; + +export class JumpToPageInput extends Component { + + static defaultProps = { + value: null, + page: null, + pageCount: null, + disabled: false + } + + static propTypes = { + value: PropTypes.number, + page: PropTypes.number, + pageCount: PropTypes.number, + disabled: PropTypes.bool, + } + + constructor(props) { + super(props) + + this.onChange = this.onChange.bind(this); + } + + onChange(event) { + if (this.props.onChange) { + this.props.onChange({ + event: event.originalEvent, + value: event.value + }); + } + } + + render() { + return ( + + ) + } + +} diff --git a/src/components/paginator/Paginator.d.ts b/src/components/paginator/Paginator.d.ts index a023db4744..d6a9d0913c 100644 --- a/src/components/paginator/Paginator.d.ts +++ b/src/components/paginator/Paginator.d.ts @@ -21,6 +21,8 @@ type PaginatorRowsPerPageDropdownType = React.ReactNode | ((options: PaginatorRo type PaginatorCurrentPageReportType = React.ReactNode | ((options: PaginatorCurrentPageReportOptions) => React.ReactNode); +type PaginatorJumpToPageInputType = React.ReactNode | ((options: PaginatorJumpToPageInputOptions) => React.ReactNode); + type PaginatorAppendToType = 'self' | HTMLElement | undefined | null; interface PaginatorFirstPageLinkOptions { @@ -112,6 +114,13 @@ interface PaginatorCurrentPageReportOptions { props: PaginatorProps; } +interface PaginatorJumpToPageInputOptions { + value: number; + page: number; + pageCount: number; + disabled: boolean; +} + interface PaginatorTemplateOptions { layout: string; FirstPageLink: PaginatorFirstPageLinkType; @@ -121,6 +130,7 @@ interface PaginatorTemplateOptions { LastPageLink: PaginatorLastPageLinkType; RowsPerPageDropdown: PaginatorRowsPerPageDropdownType; CurrentPageReport: PaginatorCurrentPageReportType; + JumpToPageInput: PaginatorJumpToPageInputType; } export type PaginatorTemplate = string | PaginatorTemplateOptions; diff --git a/src/components/paginator/Paginator.js b/src/components/paginator/Paginator.js index 29be0ce6ac..bdc3c6cf67 100644 --- a/src/components/paginator/Paginator.js +++ b/src/components/paginator/Paginator.js @@ -8,6 +8,7 @@ import { LastPageLink } from './LastPageLink'; import { PageLinks } from './PageLinks'; import { RowsPerPageDropdown } from './RowsPerPageDropdown'; import { CurrentPageReport } from './CurrentPageReport'; +import { JumpToPageInput } from './JumpToPageInput'; export class Paginator extends Component { @@ -190,7 +191,10 @@ export class Paginator extends Component { case 'CurrentPageReport': element = ; + rows={this.props.rows} totalRecords={this.props.totalRecords} template={template} />; + break; + case 'JumpToPageInput': + element = ; break; default: diff --git a/src/showcase/paginator/PaginatorDoc.js b/src/showcase/paginator/PaginatorDoc.js index a92a6b0d33..daa0c5c2f7 100644 --- a/src/showcase/paginator/PaginatorDoc.js +++ b/src/showcase/paginator/PaginatorDoc.js @@ -910,6 +910,7 @@ const onPageChange = (e) => {
  • NextPageLink
  • LastPageLink
  • RowsPerPageDropdown
  • +
  • JumpToPageInput
  • CurrentPageReport