diff --git a/packages/terra-paginator/CHANGELOG.md b/packages/terra-paginator/CHANGELOG.md index bd416d7c143..24a1cfb14e2 100644 --- a/packages/terra-paginator/CHANGELOG.md +++ b/packages/terra-paginator/CHANGELOG.md @@ -1,6 +1,12 @@ # Changelog ## Unreleased +* Changed + * Changed progressive paginator to support unknown total page count. + * Replaced `Terra.it()` with `Terra.validates.element()`. + +* Fixed + * Fixed paginator not considering `totalCount` when `itemCountPerPage` was not provided. ## 2.66.0 - (November 17, 2020) diff --git a/packages/terra-paginator/package.json b/packages/terra-paginator/package.json index 6fafc347ae3..a6de2421374 100644 --- a/packages/terra-paginator/package.json +++ b/packages/terra-paginator/package.json @@ -32,7 +32,6 @@ "prop-types": "^15.5.8", "terra-button": "^3.50.0", "terra-dialog": "^2.53.0", - "terra-form-input": "^4.8.0", "terra-icon": "^3.38.0", "terra-mixins": "^1.38.0", "terra-responsive-element": "^5.26.0", diff --git a/packages/terra-paginator/src/ControlledPaginator.jsx b/packages/terra-paginator/src/ControlledPaginator.jsx index d4b8562b501..c86fbbb05c0 100644 --- a/packages/terra-paginator/src/ControlledPaginator.jsx +++ b/packages/terra-paginator/src/ControlledPaginator.jsx @@ -26,12 +26,12 @@ const propTypes = { * Total number of all items being paginated. * Required when using itemCountPerPage and selectedPage. */ - totalCount: PropTypes.number.isRequired, + totalCount: PropTypes.number, /** * Total number of items per page. * Required when using selectedPage and totalCount. */ - itemCountPerPage: PropTypes.number.isRequired, + itemCountPerPage: PropTypes.number, /** * @private * The intl object to be injected for translations. @@ -44,7 +44,6 @@ class Paginator extends React.Component { super(props); this.handlePageChange = this.handlePageChange.bind(this); - this.hasNavContext = this.hasNavContext.bind(this); this.buildPageButtons = this.buildPageButtons.bind(this); this.reducedPaginator = this.reducedPaginator.bind(this); this.setPaginator = this.setPaginator.bind(this); @@ -114,21 +113,22 @@ class Paginator extends React.Component { return pageButtons; } - hasNavContext() { - return this.props.totalCount && this.props.itemCountPerPage; - } - defaultPaginator() { const theme = this.context; - const totalPages = calculatePages(this.props.totalCount, this.props.itemCountPerPage); - const { selectedPage, intl } = this.props; + const { + selectedPage, + intl, + totalCount, + itemCountPerPage, + } = this.props; + const totalPages = calculatePages(totalCount, itemCountPerPage); const previousPageIndex = selectedPage === 1 ? 1 : selectedPage - 1; const nextPageIndex = selectedPage === totalPages ? totalPages : selectedPage + 1; const fullView = ( -
{value}
); + } + return arr; +}; + +const buildPage = () => { + let fullContent = []; + const content = ('Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' + + 'Fusce porttitor ullamcorper nisi, vel tincidunt dui pharetra vel. ' + + 'Morbi eu rutrum nibh, sit amet placerat libero. Integer vel dapibus nibh. ' + + 'Donec tempor mi vitae lorem congue, ut ultrices metus feugiat. Sed non commodo felis. ' + + 'Aliquam eget maximus dui, ut rhoncus augue.'); + + fullContent = fillArray(content, 10); + + return ( + fullContent + ); +}; + +const ControlledPaginatorExample = () => { + const content = buildPage(); + const [currentPage, setCurrentPage] = useState(1); + + const changePages = (index) => { + setCurrentPage(index); + }; + + return ( +{value}
); + } + return arr; +}; + +const buildPage = () => { + let fullContent = []; + const content = ('Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' + + 'Fusce porttitor ullamcorper nisi, vel tincidunt dui pharetra vel. ' + + 'Morbi eu rutrum nibh, sit amet placerat libero. Integer vel dapibus nibh. ' + + 'Donec tempor mi vitae lorem congue, ut ultrices metus feugiat. Sed non commodo felis. ' + + 'Aliquam eget maximus dui, ut rhoncus augue.'); + + fullContent = fillArray(content, 10); + + return ( + fullContent + ); +}; + +const ControlledInfiniteProgressivePaginatorExample = () => { + const [content] = useState(buildPage()); + const [currentPage, setCurrentPage] = useState(1); + + const changePages = (index) => { + setCurrentPage(index); + }; + + return ( +{value}
); + } + return arr; +}; + +const buildPage = () => { + let fullContent = []; + const content = ('Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' + + 'Fusce porttitor ullamcorper nisi, vel tincidunt dui pharetra vel. ' + + 'Morbi eu rutrum nibh, sit amet placerat libero. Integer vel dapibus nibh. ' + + 'Donec tempor mi vitae lorem congue, ut ultrices metus feugiat. Sed non commodo felis. ' + + 'Aliquam eget maximus dui, ut rhoncus augue.'); + + fullContent = fillArray(content, 10); + + return ( + fullContent + ); +}; + +const InfiniteProgressivePaginatorExample = () => { + const [content] = useState(buildPage()); + const [currentPage, setCurrentPage] = useState(1); + + const changePages = (index) => { + setCurrentPage(index); + }; + + return ( +