diff --git a/packages/dnb-eufemia/src/components/pagination/Pagination.js b/packages/dnb-eufemia/src/components/pagination/Pagination.js index 566d2df5838..7e1247b6f57 100644 --- a/packages/dnb-eufemia/src/components/pagination/Pagination.js +++ b/packages/dnb-eufemia/src/components/pagination/Pagination.js @@ -23,7 +23,6 @@ import InfinityScroller from './PaginationInfinity' import PaginationBar from './PaginationBar' const paginationPropTypes = { - debug: PropTypes.bool, startup_page: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), current_page: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), page_count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -97,11 +96,7 @@ const paginationPropTypes = { class: PropTypes.string, className: PropTypes.string, - children: PropTypes.oneOfType([ - // PropTypes.array, - PropTypes.node, - PropTypes.func, - ]), + children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), on_change: PropTypes.func, on_startup: PropTypes.func, @@ -110,7 +105,6 @@ const paginationPropTypes = { } const paginationDefaultProps = { - debug: null, startup_page: null, current_page: null, page_count: null, diff --git a/packages/dnb-eufemia/src/components/pagination/PaginationInfinity.js b/packages/dnb-eufemia/src/components/pagination/PaginationInfinity.js index a8838c6e680..587689747fa 100644 --- a/packages/dnb-eufemia/src/components/pagination/PaginationInfinity.js +++ b/packages/dnb-eufemia/src/components/pagination/PaginationInfinity.js @@ -189,41 +189,22 @@ export default class InfinityScroller extends React.PureComponent { // our states lowerPage, upperPage, - currentPage, pageCount, hasEndedInfinity, parallelLoadCount, // our props - debug, current_page, fallback_element, marker_element, indicator_element, } = this.context.pagination - if (debug) { - console.info('PaginationInfinity.render', { - current_page, - lowerPage, - upperPage, - currentPage, - pageCount, - }) - } - const Marker = () => ( { - if (debug) { - console.info('PaginationInfinity.onVisible', { - pageNumber, - }) - } - let newPageNo // load several pages at once for (let i = 0; i < parallelLoadCount; ++i) { @@ -425,7 +406,6 @@ export default class InfinityScroller extends React.PureComponent { class InteractionMarker extends React.PureComponent { static propTypes = { - debug: PropTypes.bool, pageNumber: PropTypes.number.isRequired, onVisible: PropTypes.func.isRequired, markerElement: PropTypes.oneOfType([ @@ -436,7 +416,6 @@ class InteractionMarker extends React.PureComponent { ]), } static defaultProps = { - debug: null, markerElement: null, } state = { isConnected: false } @@ -453,18 +432,12 @@ class InteractionMarker extends React.PureComponent { this._ref = React.createRef() if (typeof IntersectionObserver !== 'undefined') { - this.intersectionObserver = new IntersectionObserver( - (entries) => { - const [{ isIntersecting }] = entries - if (isIntersecting) { - this.callReady() - } + this.intersectionObserver = new IntersectionObserver((entries) => { + const [{ isIntersecting }] = entries + if (isIntersecting) { + this.callReady() } - // { - // threshold: 1, - // rootMargin: '0px 0px -80% 0px' - // } - ) + }) } else { warn('Pagination is missing IntersectionObserver supported!') } @@ -475,11 +448,6 @@ class InteractionMarker extends React.PureComponent { this._isMounted = true this.intersectionObserver?.observe(this._ref.current) } - - if (this.props.debug) { - const height = this.getContentHeight() - console.info('PaginationInfinity.getContentHeight', height) - } } componentWillUnmount() { diff --git a/packages/dnb-eufemia/src/components/pagination/PaginationProvider.js b/packages/dnb-eufemia/src/components/pagination/PaginationProvider.js index 9864f1ff119..b8125d3a4bb 100644 --- a/packages/dnb-eufemia/src/components/pagination/PaginationProvider.js +++ b/packages/dnb-eufemia/src/components/pagination/PaginationProvider.js @@ -98,34 +98,29 @@ export default class PaginationProvider extends React.PureComponent { ) // reset pagination, like the resetInfinity method - if ( - props.useMarkerOnly && - props.reset_pagination_handler !== null && - isTrue(props.reset_pagination_handler) - ) { + if (props.useMarkerOnly && isTrue(props.reset_pagination_handler)) { state.lowerPage = undefined state.upperPage = undefined } // only used by handleInfinityMarker if (props.useMarkerOnly) { - if ( - typeof state.lowerPage === 'undefined' && - parseFloat(props.current_page) > 0 - ) { - state.lowerPage = state.startupPage + if (typeof state.lowerPage === 'undefined') { + state.lowerPage = state.startupPage || 1 + } + const cur = parseFloat(props.current_page) + if (!isNaN(cur) && cur < state.lowerPage) { + state.lowerPage = cur } if (typeof state.upperPage === 'undefined') { state.upperPage = - state.startupPage + parseFloat(props.startup_count) - 1 + state.startupPage + (parseFloat(props.startup_count) || 1) - 1 || + 1 } } // reset content, like the resetContent method - if ( - props.reset_content_handler !== null && - isTrue(props.reset_content_handler) - ) { + if (isTrue(props.reset_content_handler)) { state.items = [] state.pageCount = parseFloat(props.page_count) || 1 } @@ -135,6 +130,7 @@ export default class PaginationProvider extends React.PureComponent { } else if (Array.isArray(props.items)) { state.items = props.items } + return state } diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.test.js b/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.test.js index 3aca8e243e0..a36553b84db 100644 --- a/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.test.js +++ b/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.test.js @@ -4,7 +4,6 @@ */ import React from 'react' -import { act } from '@testing-library/react' import { mount, fakeProps, @@ -377,13 +376,11 @@ describe('Infinity scroller', () => { const items = Object.values(localStack.current) const action = ({ pageNumber }) => { - act(() => { - setCurrentPage(pageNumber) + setCurrentPage(pageNumber) - if (pageNumber === 1) { - endInfinity() - } - }) + if (pageNumber === 1) { + endInfinity() + } } return ( @@ -437,6 +434,58 @@ describe('Infinity scroller', () => { expect(Comp.find('div.page-item').last().text()).toBe('page-30') }) + it('should handle re-render with decreasing current_page and not show the loadbar', async () => { + const perPageCount = 10 + + const tableItems = [] + for (let i = 1; i <= 60; i++) { + tableItems.push({ + ssn: i, + content: page-{i}, + }) + } + + const localStack = { current: {} } + + const MyComponent = () => { + const [{ InfinityMarker }] = React.useState(createPagination) + + // 1. Start with 2 + const [currentPage, setCurrentPage] = React.useState(2) + + tableItems + .filter((cur, idx) => { + const floor = (currentPage - 1) * perPageCount + const ceil = floor + perPageCount + return idx >= floor && idx < ceil + }) + .forEach((item) => { + localStack.current[item.ssn] = item.content + }) + const items = Object.values(localStack.current) + + // 2. And set it back to 1 + React.useEffect(() => { + setCurrentPage(1) + }, []) + + return ( + + {items} + + ) + } + + const Comp = mount() + + await rerenderComponent(Comp) + + expect(Comp.find('div.page-item').length).toBe(20) + expect(Comp.find('div.page-item').at(0).text()).toBe('page-1') + expect(Comp.find('div.page-item').last().text()).toBe('page-20') + expect(Comp.find('div.dnb-pagination__loadbar').exists()).toBe(false) + }) + it('should load pages with load more button (before)', async () => { const action = ({ pageNumber, setContent }) => { setContent(pageNumber, {pageNumber}) @@ -449,11 +498,7 @@ describe('Infinity scroller', () => { const clickOnLoadMore = async () => { Comp.find('div.dnb-pagination__loadbar button').simulate('click') - // expect(Comp.exists('div.dnb-pagination__indicator')).toBe(true) - await rerenderComponent(Comp) - - // expect(Comp.exists('div.dnb-pagination__indicator')).toBe(false) } const Comp = mount( @@ -513,13 +558,11 @@ describe('Infinity scroller', () => { resetInfinityHandler = resetInfinity const action = ({ pageNumber }) => { - act(() => { - setCurrentPage(pageNumber) + setCurrentPage(pageNumber) - if (pageNumber === 1) { - endInfinity() - } - }) + if (pageNumber === 1) { + endInfinity() + } } return ( diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap index e31959ed91c..1bc0c3e1cf4 100644 --- a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap +++ b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap @@ -7,7 +7,6 @@ exports[`Infinity scroller have to match snapshot 1`] = ` class={null} className={null} current_page={3} - debug={null} disabled={null} hide_progress_indicator={false} is_loading_text={null} @@ -38,7 +37,6 @@ exports[`Infinity scroller have to match snapshot 1`] = ` class={null} className={null} current_page={3} - debug={null} disabled={null} end_infinity_handler={null} hide_progress_indicator={false} @@ -76,7 +74,6 @@ exports[`Infinity scroller have to match snapshot 1`] = ` class={null} className={null} current_page={3} - debug={null} disabled={null} hide_progress_indicator={false} is_loading_text={null} @@ -234,7 +231,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` "class": "class", "className": "className", "current_page": "current_page", - "debug": true, "disabled": "disabled", "end_infinity_handler": "end_infinity_handler", "fallback_element": Object {}, @@ -277,7 +273,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` "class": "class", "className": "className", "current_page": "current_page", - "debug": true, "disabled": "disabled", "end_infinity_handler": "end_infinity_handler", "fallback_element": Object {}, @@ -320,7 +315,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` "class": "class", "className": "className", "current_page": "current_page", - "debug": true, "disabled": "disabled", "end_infinity_handler": "end_infinity_handler", "fallback_element": Object {}, @@ -372,7 +366,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` class={null} className={null} current_page={2} - debug={null} disabled={null} hide_progress_indicator={false} is_loading_text={null} @@ -408,7 +401,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` "class": "class", "className": "className", "current_page": "current_page", - "debug": true, "disabled": "disabled", "end_infinity_handler": "end_infinity_handler", "fallback_element": Object {}, @@ -451,7 +443,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` "class": "class", "className": "className", "current_page": "current_page", - "debug": true, "disabled": "disabled", "end_infinity_handler": "end_infinity_handler", "fallback_element": Object {}, @@ -494,7 +485,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` "class": "class", "className": "className", "current_page": "current_page", - "debug": true, "disabled": "disabled", "end_infinity_handler": "end_infinity_handler", "fallback_element": Object {}, @@ -546,7 +536,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` class={null} className={null} current_page={2} - debug={null} disabled={null} end_infinity_handler={null} hide_progress_indicator={false} @@ -589,7 +578,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` "class": "class", "className": "className", "current_page": "current_page", - "debug": true, "disabled": "disabled", "end_infinity_handler": "end_infinity_handler", "fallback_element": Object {}, @@ -632,7 +620,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` "class": "class", "className": "className", "current_page": "current_page", - "debug": true, "disabled": "disabled", "end_infinity_handler": "end_infinity_handler", "fallback_element": Object {}, @@ -675,7 +662,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` "class": "class", "className": "className", "current_page": "current_page", - "debug": true, "disabled": "disabled", "end_infinity_handler": "end_infinity_handler", "fallback_element": Object {}, @@ -727,7 +713,6 @@ exports[`Pagination bar have to match snapshot 1`] = ` class={null} className={null} current_page={2} - debug={null} disabled={null} hide_progress_indicator={false} is_loading_text={null}