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

package/src/page-size-select.js

@@ -0,0 +1,64 @@
+import { spacers } from '@dhis2/ui-constants'
+import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+// TODO: i18n translate
+const translate = (prop, interpolationObject) => {
+    if (typeof prop === 'function') {
+        return prop(interpolationObject)
+    }
+
+    return prop
+}
+
+const PageSizeSelect = ({
+    dataTest,
+    disabled,
+    pageSizeSelectText,
+    pageSize,
+    pageSizes,
+    onChange,
+}) => (
+    <div data-test={`${dataTest}-pagesize`}>
+        <SingleSelect
+            dense
+            disabled={disabled}
+            selected={pageSize.toString()}
+            onChange={({ selected }) => onChange(parseInt(selected, 10))}
+            className="select"
+            dataTest={`${dataTest}-pagesize-select`}
+            prefix={translate(pageSizeSelectText)}
+        >
+            {pageSizes.map((length) => (
+                <SingleSelectOption
+                    key={length}
+                    value={length}
+                    label={length}
+                />
+            ))}
+        </SingleSelect>
+        <style jsx>{`
+            div {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+                min-height: 32px;
+                margin-inline-end: ${spacers.dp12};
+                flex-grow: 1;
+            }
+        `}</style>
+    </div>
+)
+
+PageSizeSelect.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    pageSize: PropTypes.number.isRequired,
+    pageSizeSelectText: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+        .isRequired,
+    pageSizes: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+}
+
+export { PageSizeSelect }

package/src/page-summary.js

@@ -0,0 +1,67 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const translate = (prop, interpolationObject) => {
+    if (typeof prop === 'function') {
+        return prop(interpolationObject)
+    }
+
+    return prop
+}
+
+const PageSummary = ({
+    dataTest,
+    firstItem,
+    inactive,
+    lastItem,
+    page,
+    pageCount,
+    pageSummaryText,
+    total,
+}) => {
+    const summary = translate(pageSummaryText, {
+        firstItem,
+        lastItem,
+        page,
+        pageCount,
+        total,
+    })
+
+    return (
+        <div data-test={`${dataTest}-summary`}>
+            <span className={cx({ inactive })}>{summary}</span>
+            <style jsx>{`
+                div {
+                    display: flex;
+                    align-items: center;
+                    flex-shrink: 0;
+                    min-height: 32px;
+                    margin-inline-end: ${spacers.dp12};
+                }
+                span {
+                    color: ${colors.grey700};
+                    font-size: 14px;
+                }
+                span.inactive {
+                    color: ${colors.grey500};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+PageSummary.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    page: PropTypes.number.isRequired,
+    pageSummaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+        .isRequired,
+    firstItem: PropTypes.number,
+    inactive: PropTypes.bool,
+    lastItem: PropTypes.number,
+    pageCount: PropTypes.number,
+    total: PropTypes.number,
+}
+
+export { PageSummary }

package/src/pagination.js

@@ -0,0 +1,152 @@
+import { requiredIf } from '@dhis2/prop-types'
+import { spacers } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { getDefaultPageSummaryText } from './get-default-page-summary-text.js'
+import { getItemRange } from './get-item-range.js'
+import i18n from './locales/index.js'
+import { PageControls } from './page-controls.js'
+import { PageSelect } from './page-select.js'
+import { PageSizeSelect } from './page-size-select.js'
+import { PageSummary } from './page-summary.js'
+
+const MAX_PAGE_COUNT = 2000
+
+const defaultProps = {
+    dataTest: 'dhis2-uiwidgets-pagination',
+    nextPageText: () => i18n.t('Next'),
+    pageSelectText: () => i18n.t('Page'),
+    pageSizes: ['5', '10', '20', '30', '40', '50', '75', '100'],
+    pageSizeSelectText: () => i18n.t('Items per page'),
+    pageSummaryText: getDefaultPageSummaryText,
+    previousPageText: () => i18n.t('Previous'),
+}
+const Pagination = ({
+    className,
+    dataTest = defaultProps.dataTest,
+    disabled,
+    hidePageSelect,
+    hidePageSizeSelect,
+    hidePageSummary,
+    isLastPage,
+    nextPageText = defaultProps.nextPageText,
+    onPageChange,
+    onPageSizeChange,
+    page,
+    pageCount,
+    pageLength,
+    pageSelectText = defaultProps.pageSelectText,
+    pageSize,
+    pageSizes = defaultProps.pageSizes,
+    pageSizeSelectText = defaultProps.pageSizeSelectText,
+    pageSummaryText = defaultProps.pageSummaryText,
+    previousPageText = defaultProps.previousPageText,
+    total,
+}) => {
+    const { firstItem, lastItem } = getItemRange({
+        isLastPage,
+        page,
+        pageLength,
+        pageSize,
+        total,
+    })
+    const showPageSelect =
+        !hidePageSelect &&
+        typeof pageCount === 'number' &&
+        pageCount > 1 &&
+        pageCount <= MAX_PAGE_COUNT
+
+    return (
+        <div className={cx('container', className)} data-test={dataTest}>
+            {hidePageSizeSelect ? (
+                <div className="spacer" />
+            ) : (
+                <PageSizeSelect
+                    dataTest={dataTest}
+                    disabled={disabled}
+                    pageSize={pageSize}
+                    pageSizes={pageSizes}
+                    onChange={onPageSizeChange}
+                    pageSizeSelectText={pageSizeSelectText}
+                />
+            )}
+            {!hidePageSummary && (
+                <PageSummary
+                    dataTest={dataTest}
+                    inactive={disabled}
+                    firstItem={firstItem}
+                    lastItem={lastItem}
+                    page={page}
+                    pageCount={pageCount}
+                    pageSummaryText={pageSummaryText}
+                    total={total}
+                />
+            )}
+            <div className="page-navigation">
+                {showPageSelect && (
+                    <PageSelect
+                        dataTest={dataTest}
+                        disabled={disabled}
+                        pageSelectText={pageSelectText}
+                        page={page}
+                        pageCount={pageCount}
+                        onChange={onPageChange}
+                    />
+                )}
+                <PageControls
+                    dataTest={dataTest}
+                    nextPageText={nextPageText}
+                    page={page}
+                    previousPageText={previousPageText}
+                    onClick={onPageChange}
+                    isNextDisabled={
+                        disabled || isLastPage || page === pageCount
+                    }
+                    isPreviousDisabled={disabled || page === 1}
+                />
+            </div>
+            <style jsx>{`
+                .container {
+                    display: flex;
+                    flex-wrap: wrap;
+                    row-gap: ${spacers.dp4};
+                }
+                .spacer {
+                    flex-grow: 1;
+                }
+                .page-navigation {
+                    display: flex;
+                    align-items: center;
+                    flex-shrink: 0;
+                    min-height: 32px;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Pagination.propTypes = {
+    page: PropTypes.number.isRequired,
+    pageSize: PropTypes.number.isRequired,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    hidePageSelect: PropTypes.bool,
+    hidePageSizeSelect: PropTypes.bool,
+    hidePageSummary: PropTypes.bool,
+    isLastPage: PropTypes.bool,
+    nextPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    pageCount: PropTypes.number,
+    pageLength: requiredIf((props) => props.isLastPage, PropTypes.number),
+    pageSelectText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    pageSizeSelectText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    pageSizes: PropTypes.arrayOf(PropTypes.string),
+    pageSummaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    previousPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    total: PropTypes.number,
+    onPageChange: PropTypes.func,
+    onPageSizeChange: PropTypes.func,
+}
+
+export { Pagination }

package/src/pagination.prod.stories.js

@@ -0,0 +1,113 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import * as pagers from './__fixtures__/index.js'
+import { Pagination } from './pagination.js'
+
+const subtitle = 'Allows navigation through data displayed over several pages'
+
+const description = `
+Pagination allows data to be split in pages. Paging large amounts of data avoids overwhelming users and should always be used wherever a lot of data is displayed. Pagination controls allow a user to browse through a set of data or navigate to a specific page depending on the type of pagination used.
+
+**Do not rely on pagination for navigating datasets. A user should be able to search within, sort and filter datasets too, rather than needing to click through many pages looking for the right data item.**
+
+\`\`\`js
+import { Pagination } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._
+`
+
+const logOnPageChange = (page) => {
+    console.log(`Now navigate to page ${page}...`)
+}
+
+const logOnPageSizeChange = (pageSize) => {
+    console.log(`Now change page size to ${pageSize}...`)
+}
+
+export default {
+    title: 'Pagination',
+    component: Pagination,
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+    // Default args for stories
+    args: {
+        onPageChange: logOnPageChange,
+        onPageSizeChange: logOnPageSizeChange,
+    },
+}
+
+const Template = (args) => <Pagination {...args} />
+
+export const Default = Template.bind({})
+Default.args = { ...pagers.atTenthPage }
+
+export const Disabled = Template.bind({})
+Disabled.args = { ...pagers.atTenthPage, disabled: true }
+
+export const PagerAtFirstPage = Template.bind({})
+PagerAtFirstPage.args = { ...pagers.atFirstPage }
+
+export const PagerAtLastPage = Template.bind({})
+PagerAtLastPage.args = { ...pagers.atLastPage }
+
+export const NoTotal = Template.bind({})
+NoTotal.args = { ...pagers.noTotal }
+
+export const NoTotalAtLastPage = Template.bind({})
+NoTotalAtLastPage.args = { ...pagers.noTotalAtLastPage, pageLength: 26 }
+
+export const NoTotalAtLastPageWithoutPageLength = Template.bind({})
+NoTotalAtLastPageWithoutPageLength.args = { ...pagers.noTotalAtLastPage }
+
+export const WithoutPageSizeSelect = Template.bind({})
+WithoutPageSizeSelect.args = {
+    ...pagers.atTenthPage,
+    hidePageSizeSelect: true,
+    hidePageSelect: false,
+    hidePageSummary: false,
+}
+
+export const WithoutGoToPageSelect = Template.bind({})
+WithoutGoToPageSelect.args = { ...pagers.atTenthPage, hidePageSelect: true }
+
+export const WithoutPageSummary = Template.bind({})
+WithoutPageSummary.args = { ...pagers.atTenthPage, hidePageSummary: true }
+
+export const WithCustomPageSummary = Template.bind({})
+WithCustomPageSummary.args = {
+    ...pagers.atTenthPage,
+    pageSummaryText: (interpolationObject) =>
+        i18n.t(
+            'You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items',
+            interpolationObject
+        ),
+}
+
+export const WithoutAnySelect = Template.bind({})
+WithoutAnySelect.args = {
+    ...pagers.atTenthPage,
+    ...WithoutGoToPageSelect.args,
+    ...WithoutPageSizeSelect.args,
+}
+
+const InBox = ({ boxWidth, ...args }) => (
+    <div style={{ width: boxWidth }}>
+        <Pagination {...args} />
+    </div>
+)
+
+export const MediumWidth = InBox.bind({})
+MediumWidth.args = { ...pagers.atTenthPage, boxWidth: 500 }
+
+export const NarrowWidth = InBox.bind({})
+NarrowWidth.args = { ...pagers.atTenthPage, boxWidth: 100 }
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Pagination {...args} />
+    </div>
+)
+RTL.args = { ...pagers.atTenthPage }