@dhis2-ui/pagination 10.16.1 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/pagination",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI Pagination",
     "repository": {
         "type": "git",
@@ -34,16 +34,17 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "10.16.1",
-        "@dhis2-ui/select": "10.16.1",
-        "@dhis2/ui-constants": "10.16.1",
-        "@dhis2/ui-icons": "10.16.1",
+        "@dhis2-ui/button": "10.16.3-alpha.1",
+        "@dhis2-ui/select": "10.16.3-alpha.1",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
+        "@dhis2/ui-icons": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",

package/src/__fixtures__/index.js

@@ -0,0 +1,46 @@
+export const atFirstPage = {
+    page: 1,
+    pageCount: 21,
+    total: 1035,
+    pageSize: 50,
+}
+
+export const atSecondPage = {
+    page: 2,
+    pageCount: 21,
+    total: 1035,
+    pageSize: 50,
+}
+
+export const atTenthPage = {
+    page: 10,
+    pageCount: 21,
+    total: 1035,
+    pageSize: 50,
+}
+
+export const atLastPage = {
+    page: 21,
+    pageCount: 21,
+    total: 1035,
+    pageSize: 50,
+}
+
+export const atPageBeforeLast = {
+    page: 20,
+    pageCount: 21,
+    total: 1035,
+    pageSize: 50,
+}
+
+export const noTotal = {
+    page: 3,
+    pageSize: 50,
+    isLastPage: false,
+}
+
+export const noTotalAtLastPage = {
+    page: 4,
+    pageSize: 50,
+    isLastPage: true,
+}

package/src/__tests__/get-item-range.test.js

@@ -0,0 +1,65 @@
+import * as mockPagers from '../__fixtures__/index.js'
+import { getItemRange } from '../get-item-range.js'
+
+describe('getItemRange', () => {
+    it('calculates the firstItem and lastItem correctly', () => {
+        const { page, pageSize, total } = mockPagers.atTenthPage
+        const { firstItem, lastItem } = getItemRange({
+            page,
+            pageSize,
+            total,
+        })
+
+        expect(firstItem).toBe(451)
+        expect(lastItem).toBe(500)
+    })
+
+    it('returns 0 for firstItem and lastItem if the total is 0', () => {
+        const { firstItem, lastItem } = getItemRange({
+            page: 1,
+            pageSize: 50,
+            total: 0,
+        })
+
+        expect(firstItem).toBe(0)
+        expect(lastItem).toBe(0)
+    })
+
+    it('uses the total count as lastItem when the last page is reached', () => {
+        const { page, pageSize, total } = mockPagers.atLastPage
+        const { lastItem } = getItemRange({ page, pageSize, total })
+
+        expect(lastItem).toBe(total)
+    })
+
+    it('handles pagers without totals', () => {
+        const { firstItem, lastItem } = getItemRange({
+            page: 3,
+            pageSize: 50,
+        })
+
+        expect(firstItem).toBe(101)
+        expect(lastItem).toBe(150)
+    })
+
+    it('bases the lastItem on the pageLength for pagers without total when the last page is reached', () => {
+        const { lastItem } = getItemRange({
+            page: 3,
+            pageSize: 50,
+            pageLength: 21,
+            isLastPage: true,
+        })
+
+        expect(lastItem).toBe(121)
+    })
+
+    it('sets lastItem to NaN when on the last page and there is no total or pageLength', () => {
+        const { lastItem } = getItemRange({
+            page: 3,
+            pageSize: 50,
+            isLastPage: true,
+        })
+
+        expect(lastItem).toBe(NaN)
+    })
+})

package/src/__tests__/page-controls.test.js

@@ -0,0 +1,80 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import { PageControls } from '../page-controls.js'
+
+describe('<PageControls />', () => {
+    const mockOnClick = jest.fn()
+    const props = {
+        dataTest: 'test',
+        onClick: mockOnClick,
+        nextPageText: 'Next',
+        previousPageText: 'Previous',
+        page: 10,
+    }
+
+    beforeEach(() => {
+        mockOnClick.mockClear()
+    })
+
+    it('renders without errors', () => {
+        shallow(<PageControls {...props} />)
+    })
+
+    it('enables all buttons on by default', () => {
+        const wrapper = shallow(<PageControls {...props} />)
+
+        expect(
+            wrapper.find('.button-previous').getElement().props.disabled
+        ).toBeFalsy()
+
+        expect(
+            wrapper.find('.button-next').getElement().props.disabled
+        ).toBeFalsy()
+    })
+
+    it('disables the previous page button when isPreviousDisabled is true', () => {
+        const wrapper = shallow(
+            <PageControls {...props} isPreviousDisabled={true} />
+        )
+
+        expect(
+            wrapper.find('.button-previous').getElement().props.disabled
+        ).toBe(true)
+
+        expect(
+            wrapper.find('.button-next').getElement().props.disabled
+        ).toBeFalsy()
+    })
+
+    it('disables the next page button when isNextDisabled is true', () => {
+        const wrapper = shallow(
+            <PageControls {...props} isNextDisabled={true} />
+        )
+
+        expect(
+            wrapper.find('.button-previous').getElement().props.disabled
+        ).toBeFalsy()
+
+        expect(wrapper.find('.button-next').getElement().props.disabled).toBe(
+            true
+        )
+    })
+
+    it('calls the onClick handler with the value for the next page when next is clicked', () => {
+        const wrapper = shallow(<PageControls {...props} />)
+
+        wrapper.find('.button-next').simulate('click')
+
+        expect(mockOnClick).toHaveBeenCalledTimes(1)
+        expect(mockOnClick).toHaveBeenCalledWith(11)
+    })
+
+    it('calls the onClick handler with the value for the previous page when previous is clicked', () => {
+        const wrapper = shallow(<PageControls {...props} />)
+
+        wrapper.find('.button-previous').simulate('click')
+
+        expect(mockOnClick).toHaveBeenCalledTimes(1)
+        expect(mockOnClick).toHaveBeenCalledWith(9)
+    })
+})

package/src/__tests__/page-select.test.js

@@ -0,0 +1,40 @@
+import { SingleSelect } from '@dhis2-ui/select'
+import { shallow } from 'enzyme'
+import React from 'react'
+import * as mockPagers from '../__fixtures__/index.js'
+import { PageSelect, createAvailablePages } from '../page-select.js'
+
+describe('<PageSelect />', () => {
+    const mockOnSelect = jest.fn()
+    const props = {
+        dataTest: 'test',
+        onChange: mockOnSelect,
+        pageSelectText: 'Page',
+        ...mockPagers.atTenthPage,
+    }
+
+    beforeEach(() => {
+        mockOnSelect.mockClear()
+    })
+
+    it('renders without errors', () => {
+        shallow(<PageSelect {...props} />)
+    })
+
+    it('calls the onSelect handler with the value of selected option', () => {
+        const wrapper = shallow(<PageSelect {...props} />)
+
+        wrapper.find(SingleSelect).simulate('change', { selected: '10' })
+
+        expect(mockOnSelect).toHaveBeenCalledTimes(1)
+        expect(mockOnSelect).toHaveBeenCalledWith(10)
+    })
+
+    describe('createAvailablePages helper', () => {
+        it('produces an array of strings starting with "1" and ending with the "lenght"', () => {
+            const expected = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+
+            expect(createAvailablePages(10)).toEqual(expected)
+        })
+    })
+})

package/src/__tests__/page-size-select.test.js

@@ -0,0 +1,29 @@
+import { SingleSelect } from '@dhis2-ui/select'
+import { shallow } from 'enzyme'
+import React from 'react'
+import * as mockPagers from '../__fixtures__/index.js'
+import { PageSizeSelect } from '../page-size-select.js'
+
+describe('<PageSizeSelect />', () => {
+    const mockOnSelect = jest.fn()
+    const props = {
+        dataTest: 'test',
+        onChange: mockOnSelect,
+        pageSizes: ['5', '10', '20', '30', '40', '50', '75', '100'],
+        pageSizeSelectText: 'Page size',
+        ...mockPagers.atTenthPage,
+    }
+
+    it('renders without errors', () => {
+        shallow(<PageSizeSelect {...props} />)
+    })
+
+    it('calls the onSelect handler with the value of selected option', () => {
+        const wrapper = shallow(<PageSizeSelect {...props} />)
+
+        wrapper.find(SingleSelect).simulate('change', { selected: '10' })
+
+        expect(mockOnSelect).toHaveBeenCalledTimes(1)
+        expect(mockOnSelect).toHaveBeenCalledWith(10)
+    })
+})

package/src/__tests__/page-summary.test.js

@@ -0,0 +1,70 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import { getDefaultPageSummaryText } from '../get-default-page-summary-text.js'
+import { PageSummary } from '../page-summary.js'
+
+describe('<PageSummary />', () => {
+    const props = {
+        dataTest: 'test',
+        pageSummaryText: getDefaultPageSummaryText,
+    }
+
+    it('renders without errors', () => {
+        shallow(
+            <PageSummary
+                {...props}
+                firstItem={51}
+                lastItem={100}
+                page={2}
+                pageCount={5}
+                total={224}
+            />
+        )
+    })
+
+    it('renders the correct message when both total and lastItem are provided', () => {
+        const wrapper = shallow(
+            <PageSummary
+                {...props}
+                firstItem={51}
+                lastItem={100}
+                page={2}
+                pageCount={5}
+                total={224}
+            />
+        )
+        const expectedString = 'Page 2 of 5, items 51-100 of 224'
+
+        expect(wrapper.find('span').text()).toBe(expectedString)
+    })
+
+    it('renders the correct message when only lastItem is provided', () => {
+        const wrapper = shallow(
+            <PageSummary
+                {...props}
+                firstItem={51}
+                lastItem={100}
+                page={2}
+                pageCount={5}
+            />
+        )
+        const expectedString = 'Page 2, items 51-100'
+
+        expect(wrapper.find('span').text()).toBe(expectedString)
+    })
+
+    it('renders the correct message when total is missing and lastItem is not a number', () => {
+        const wrapper = shallow(
+            <PageSummary
+                {...props}
+                firstItem={51}
+                lastItem={NaN}
+                page={2}
+                pageCount={5}
+            />
+        )
+        const expectedString = 'Page 2'
+
+        expect(wrapper.find('span').text()).toBe(expectedString)
+    })
+})

package/src/__tests__/pagination.test.js

@@ -0,0 +1,212 @@
+import '@testing-library/dom'
+import { render } from '@testing-library/react'
+import React from 'react'
+import * as mockPagers from '../__fixtures__/index.js'
+import { Pagination } from '../pagination.js'
+
+describe('<Pagination />', () => {
+    describe('Pagination with total and totalPages', () => {
+        const props = {
+            ...mockPagers.atTenthPage,
+            onPageChange: () => {},
+            onPageSizeChange: () => {},
+        }
+
+        it('renders without errors', () => {
+            render(<Pagination {...props} />)
+        })
+
+        it('renders a PageSelect and PageSizeSelect by default', () => {
+            const { getByTestId } = render(<Pagination {...props} />)
+
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-page-select')
+            ).toBeInTheDocument()
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-pagesize')
+            ).toBeInTheDocument()
+        })
+
+        it('renders without a PageSelect when hidePageSelect is true', () => {
+            const { getByTestId, queryByTestId } = render(
+                <Pagination {...props} hidePageSelect />
+            )
+
+            expect(
+                queryByTestId('dhis2-uiwidgets-pagination-page-select')
+            ).not.toBeInTheDocument()
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-pagesize')
+            ).toBeInTheDocument()
+        })
+
+        it('renders without a PageSelect when pageCount is not provided', () => {
+            const { getByTestId, queryByTestId } = render(
+                <Pagination {...props} pageCount={undefined} />
+            )
+
+            expect(
+                queryByTestId('dhis2-uiwidgets-pagination-page-select')
+            ).not.toBeInTheDocument()
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-pagesize')
+            ).toBeInTheDocument()
+        })
+
+        it('renders without a PageSelect when pageCount is 1', () => {
+            const { getByTestId, queryByTestId } = render(
+                <Pagination {...props} pageCount={1} />
+            )
+
+            expect(
+                queryByTestId('dhis2-uiwidgets-pagination-page-select')
+            ).not.toBeInTheDocument()
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-pagesize')
+            ).toBeInTheDocument()
+        })
+
+        it('renders without a PageSelect when pageCount is over 2000', () => {
+            const { getByTestId, queryByTestId } = render(
+                <Pagination {...props} pageCount={2001} />
+            )
+
+            expect(
+                queryByTestId('dhis2-uiwidgets-pagination-page-select')
+            ).not.toBeInTheDocument()
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-pagesize')
+            ).toBeInTheDocument()
+        })
+
+        it('renders without a PageSizeSelect when hidePageSizeSelect is true', () => {
+            const { getByTestId, queryByTestId } = render(
+                <Pagination {...props} hidePageSizeSelect />
+            )
+
+            expect(
+                queryByTestId('dhis2-uiwidgets-pagination-pagesize')
+            ).not.toBeInTheDocument()
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-page-select')
+            ).toBeInTheDocument()
+        })
+
+        it('renders without PageSelect and PageSizeSelect when both are true', () => {
+            const { queryByTestId } = render(
+                <Pagination {...props} hidePageSelect hidePageSizeSelect />
+            )
+
+            expect(
+                queryByTestId('dhis2-uiwidgets-pagination-pagesize')
+            ).not.toBeInTheDocument()
+            expect(
+                queryByTestId('dhis2-uiwidgets-pagination-page-select')
+            ).not.toBeInTheDocument()
+        })
+
+        it('enables all elements when disabled is falsy', () => {
+            const { getByTestId, getByRole } = render(<Pagination {...props} />)
+
+            expect(
+                getByTestId(
+                    'dhis2-uiwidgets-pagination-pagesize'
+                ).querySelector('.select .root')
+            ).not.toHaveClass('disabled')
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-summary').querySelector(
+                    'span'
+                )
+            ).not.toHaveClass('inactive')
+            expect(
+                getByTestId(
+                    'dhis2-uiwidgets-pagination-page-select'
+                ).querySelector('.select .root')
+            ).not.toHaveClass('disabled')
+            expect(getByRole('button', { name: 'Previous' })).not.toBeDisabled()
+            expect(getByRole('button', { name: 'Next' })).not.toBeDisabled()
+        })
+
+        it('disables all elements when disabled is true', () => {
+            const { getByTestId, getByRole } = render(
+                <Pagination {...props} disabled />
+            )
+
+            expect(
+                getByTestId(
+                    'dhis2-uiwidgets-pagination-pagesize'
+                ).querySelector('.select .root')
+            ).toHaveClass('disabled')
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-summary').querySelector(
+                    'span'
+                )
+            ).toHaveClass('inactive')
+            expect(
+                getByTestId(
+                    'dhis2-uiwidgets-pagination-page-select'
+                ).querySelector('.select .root')
+            ).toHaveClass('disabled')
+            expect(getByRole('button', { name: 'Previous' })).toBeDisabled()
+            expect(getByRole('button', { name: 'Next' })).toBeDisabled()
+        })
+
+        it('disables previous button when on the first page', () => {
+            const { getByRole } = render(
+                <Pagination
+                    {...mockPagers.atFirstPage}
+                    onPageChange={() => {}}
+                    onPageSizeChange={() => {}}
+                />
+            )
+            expect(getByRole('button', { name: 'Previous' })).toBeDisabled()
+            expect(getByRole('button', { name: 'Next' })).not.toBeDisabled()
+        })
+
+        it('disables next button when on the last page', () => {
+            const { getByRole } = render(
+                <Pagination
+                    {...mockPagers.atLastPage}
+                    onPageChange={() => {}}
+                    onPageSizeChange={() => {}}
+                />
+            )
+            expect(getByRole('button', { name: 'Previous' })).not.toBeDisabled()
+            expect(getByRole('button', { name: 'Next' })).toBeDisabled()
+        })
+    })
+
+    describe('Pagination without total and totalPages', () => {
+        const props = {
+            ...mockPagers.noTotal,
+            pageLength: mockPagers.noTotal.pageSize,
+            onPageChange: () => {},
+            onPageSizeChange: () => {},
+        }
+
+        it('renders without errors', () => {
+            render(<Pagination {...props} />)
+        })
+
+        it('renders with a PageSizeSelect but without a PageSelect', () => {
+            const { queryByTestId, getByTestId } = render(
+                <Pagination {...props} />
+            )
+
+            expect(
+                getByTestId('dhis2-uiwidgets-pagination-pagesize')
+            ).toBeInTheDocument()
+            expect(
+                queryByTestId('dhis2-uiwidgets-pagination-page-select')
+            ).not.toBeInTheDocument()
+        })
+
+        it('prevents forward navigation when on the last page', () => {
+            const { getByRole } = render(
+                <Pagination {...props} {...mockPagers.noTotalAtLastPage} />
+            )
+            expect(getByRole('button', { name: 'Previous' })).not.toBeDisabled()
+            expect(getByRole('button', { name: 'Next' })).toBeDisabled()
+        })
+    })
+})

package/src/get-default-page-summary-text.js

@@ -0,0 +1,34 @@
+import i18n from './locales/index.js'
+
+const isValidNumber = (input) => typeof input === 'number' && !isNaN(input)
+
+export const getDefaultPageSummaryText = ({
+    firstItem,
+    lastItem,
+    page,
+    pageCount,
+    total,
+}) => {
+    if (isValidNumber(total) && isValidNumber(lastItem)) {
+        return i18n.t(
+            'Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}',
+            {
+                page,
+                pageCount,
+                firstItem,
+                lastItem,
+                total,
+            }
+        )
+    }
+
+    if (isValidNumber(lastItem)) {
+        return i18n.t('Page {{page}}, items {{firstItem}}-{{lastItem}}', {
+            page,
+            firstItem,
+            lastItem,
+        })
+    }
+
+    return i18n.t('Page {{page}}', { page })
+}

package/src/get-item-range.js

@@ -0,0 +1,35 @@
+export const getItemRange = ({
+    isLastPage,
+    page,
+    pageLength,
+    pageSize,
+    total,
+}) => {
+    // page is 1-based
+    let firstItem = (page - 1) * pageSize + 1
+    let lastItem = firstItem + pageSize - 1
+
+    if (typeof total === 'number') {
+        if (total === 0) {
+            /*
+             * if no items are found, the pager total is 0
+             * and the first and last item should be be 0 too
+             */
+            firstItem = 0
+            lastItem = 0
+        } else if (lastItem > total) {
+            lastItem = total
+        }
+    }
+
+    if (typeof pageLength === 'number') {
+        lastItem = firstItem + pageLength - 1
+    }
+
+    if (isLastPage && isNaN(total) && isNaN(pageLength)) {
+        // impossible to accurately determine the last item
+        lastItem = NaN
+    }
+
+    return { firstItem, lastItem }
+}

package/src/index.js

@@ -0,0 +1 @@
+export { Pagination } from './pagination.js'

package/src/locales/ar/translations.json

@@ -0,0 +1,10 @@
+{
+    "Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}": "الصفحة {{page}} من {{pageCount}} ، العناصر {{firstItem}} - {{lastItem}} من {{total}}",
+    "Page {{page}}, items {{firstItem}}-{{lastItem}}": "الصفحة {{page}} ، العناصر {{firstItem}} - {{lastItem}}",
+    "Page {{page}}": "الصفحة {{page}}",
+    "Next": "التالي",
+    "Page": "الصفحة",
+    "Items per page": "عناصر لكل صفحة",
+    "Previous": "السابق",
+    "You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items": "أنت في الصفحة {{page}} تستعرض العناصر {{firstItem}} - {{lastItem}} ، ولكن هناك {{pageCount}} صفحة و {{total}} عنصر"
+}

package/src/locales/ar_IQ/translations.json

@@ -0,0 +1,10 @@
+{
+    "Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}": "",
+    "Page {{page}}, items {{firstItem}}-{{lastItem}}": "",
+    "Page {{page}}": "",
+    "Next": "التالي",
+    "Page": "",
+    "Items per page": "",
+    "Previous": "",
+    "You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items": ""
+}

package/src/locales/bn/translations.json

@@ -0,0 +1,10 @@
+{
+    "Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}": "",
+    "Page {{page}}, items {{firstItem}}-{{lastItem}}": "",
+    "Page {{page}}": "",
+    "Next": "",
+    "Page": "",
+    "Items per page": "",
+    "Previous": "পূর্ববর্তী",
+    "You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items": ""
+}