Skip to content

Commit

Permalink
Update EuiTablePagination to use defaults context
Browse files Browse the repository at this point in the history
- default props must be manually declared using jsdocs now, since react docgen can no longer use `=` fallbacks to figure them out

- note: setting `EuiTablePagination.defaultProps` unfortunately does not work, React will automatically populate them and they don't come in as undefined
  • Loading branch information
cee-chen committed Jul 14, 2023
1 parent cc1a917 commit d6e9892
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -96,5 +96,7 @@ describe('EuiComponentDefaultsProvider', () => {

// NOTE: Components are in charge of their own testing to ensure that the props
// coming from `useEuiComponentDefaults()` were properly applied.
// @see `src/components/portal/portal.spec.tsx` as an example
// Examples:
// @see src/components/portal/portal.spec.tsx
// @see src/components/table/table_pagination/table_pagination.test.tsx
});
51 changes: 51 additions & 0 deletions src/components/table/table_pagination/table_pagination.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@
*/

import React from 'react';
import { fireEvent } from '@testing-library/react';
import { render } from '../../../test/rtl';
import { requiredProps } from '../../../test/required_props';

import { EuiProvider } from '../../provider';

import { EuiTablePagination } from './table_pagination';

describe('EuiTablePagination', () => {
Expand Down Expand Up @@ -51,4 +54,52 @@ describe('EuiTablePagination', () => {

expect(container.firstChild).toMatchSnapshot();
});

describe('configurable defaults', () => {
test('itemsPerPage', () => {
const { getByText } = render(
<EuiProvider
componentDefaults={{ EuiTablePagination: { itemsPerPage: 20 } }}
>
<EuiTablePagination {...paginationProps} />
</EuiProvider>,
{ wrapper: undefined }
);

expect(getByText('Rows per page: 20')).toBeTruthy();
});

test('itemsPerPageOptions', () => {
const { getByTestSubject } = render(
<EuiProvider
componentDefaults={{
EuiTablePagination: { itemsPerPageOptions: [5, 10, 15] },
}}
>
<EuiTablePagination {...paginationProps} />
</EuiProvider>,
{ wrapper: undefined }
);

fireEvent.click(getByTestSubject('tablePaginationPopoverButton'));
expect(getByTestSubject('tablePaginationRowOptions').textContent).toEqual(
'5 rows10 rows15 rows'
);
});

test('showPerPageOptions', () => {
const { queryByTestSubject } = render(
<EuiProvider
componentDefaults={{
EuiTablePagination: { showPerPageOptions: false },
}}
>
<EuiTablePagination {...paginationProps} />
</EuiProvider>,
{ wrapper: undefined }
);

expect(queryByTestSubject('tablePaginationPopoverButton')).toBe(null);
});
});
});
38 changes: 27 additions & 11 deletions src/components/table/table_pagination/table_pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,31 @@ import { EuiPagination, EuiPaginationProps } from '../../pagination';
import { EuiPopover } from '../../popover';
import { EuiI18n } from '../../i18n';

import { useEuiComponentDefaults } from '../../provider/component_defaults';

export type PageChangeHandler = EuiPaginationProps['onPageClick'];
export type ItemsPerPageChangeHandler = (pageSize: number) => void;

export interface EuiTablePaginationProps
extends Omit<EuiPaginationProps, 'onPageClick'> {
/**
* Option to completely hide the "Rows per page" selector.
*
* @default true
*/
showPerPageOptions?: boolean;
/**
* Current selection for "Rows per page".
* Pass `0` to display the selected "Show all" option and hide the pagination.
*
* @default 50
*/
itemsPerPage?: number;
/**
* Custom array of options for "Rows per page".
* Pass `0` as one of the options to create a "Show all" option.
*
* @default [10, 20, 50, 100]
*/
itemsPerPageOptions?: number[];
/**
Expand All @@ -51,16 +59,21 @@ export interface EuiTablePaginationProps
'aria-label'?: string;
}

export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
activePage,
itemsPerPage = 50,
itemsPerPageOptions = [10, 20, 50, 100],
showPerPageOptions = true,
onChangeItemsPerPage,
onChangePage,
pageCount,
...rest
}) => {
export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = (
props
) => {
const { EuiTablePagination: defaults } = useEuiComponentDefaults();
const {
activePage,
itemsPerPage = defaults.itemsPerPage,
itemsPerPageOptions = defaults.itemsPerPageOptions,
showPerPageOptions = defaults.showPerPageOptions,
onChangeItemsPerPage,
onChangePage,
pageCount,
...rest
} = props;

const [isPopoverOpen, setIsPopoverOpen] = useState(false);

const togglePopover = useCallback(() => {
Expand Down Expand Up @@ -134,7 +147,10 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
panelPaddingSize="none"
anchorPosition="upRight"
>
<EuiContextMenuPanel items={items} />
<EuiContextMenuPanel
items={items}
data-test-subj="tablePaginationRowOptions"
/>
</EuiPopover>
);

Expand Down

0 comments on commit d6e9892

Please sign in to comment.