From b3dd10b0c89a696496ccb775afefbfe18998e011 Mon Sep 17 00:00:00 2001 From: Jen Huang Date: Thu, 8 Mar 2018 10:20:44 -0800 Subject: [PATCH] Add ability to specify default page size for EuiInMemoryTable (#477) * Add ability to specify default page size for EuiInMemoryTable --- CHANGELOG.md | 1 + .../tables/in_memory/in_memory_selection.js | 1 + .../src/views/tables/in_memory/props_info.js | 5 ++ .../in_memory_table.test.js.snap | 52 +++++++++++++++++-- src/components/basic_table/in_memory_table.js | 32 ++++++++++-- .../basic_table/in_memory_table.test.js | 31 ++++++++++- 6 files changed, 113 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e24a320130..a825a4cb7b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # [`master`](https://github.com/elastic/eui/tree/master) - Added `search.onChange` callback to `EuiInMemoryTable` ([#469](https://github.com/elastic/eui/pull/469)) +- Added `initialPageSize` option to `EuiInMemoryTable` ([#477](https://github.com/elastic/eui/pull/477)) # [`0.0.24`](https://github.com/elastic/eui/tree/v0.0.24) diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection.js b/src-docs/src/views/tables/in_memory/in_memory_selection.js index 8b99e4d39e7..99f86d66a27 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_selection.js +++ b/src-docs/src/views/tables/in_memory/in_memory_selection.js @@ -146,6 +146,7 @@ export class Table extends Component { }]; const pagination = { + initialPageSize: 5, pageSizeOptions: [3, 5, 8] }; diff --git a/src-docs/src/views/tables/in_memory/props_info.js b/src-docs/src/views/tables/in_memory/props_info.js index eaf6deb6223..53d6d5ae9dd 100644 --- a/src-docs/src/views/tables/in_memory/props_info.js +++ b/src-docs/src/views/tables/in_memory/props_info.js @@ -57,6 +57,11 @@ export const propsInfo = { __docgenInfo: { _euiObjectType: 'type', props: { + initialPageSize: { + description: 'Configures the default page size to show, must be one of "pageSizeOptions"', + required: false, + type: { name: 'number' } + }, pageSizeOptions: basicPropsInfo.Pagination.__docgenInfo.props.pageSizeOptions } } diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap index 78583b3511d..80045d39c36 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap @@ -141,7 +141,7 @@ exports[`EuiInMemoryTable with pagination 1`] = ` /> `; -exports[`EuiInMemoryTable with pagination and error 1`] = ` +exports[`EuiInMemoryTable with pagination and default page size 1`] = ` @@ -223,6 +230,43 @@ exports[`EuiInMemoryTable with pagination and selection 1`] = ` /> `; +exports[`EuiInMemoryTable with pagination, default page size and error 1`] = ` + +`; + exports[`EuiInMemoryTable with pagination, selection and sorting 1`] = ` { }; const initialCriteria = (props) => { - const { pagination } = props; + if (!props.pagination) { + return { + page: undefined, + }; + } + + const { + pagination: { + pageSizeOptions, + initialPageSize, + } + } = props; + + if (initialPageSize && (!pageSizeOptions || !pageSizeOptions.includes(initialPageSize))) { + throw new Error(`EuiInMemoryTable received initialPageSize ${initialPageSize}, which wasn't provided within pageSizeOptions.`); + } + + const defaultPageSize = pageSizeOptions ? pageSizeOptions[0] : paginationBarDefaults.pageSizeOptions[0]; + return { - page: !pagination ? undefined : { + page: { index: 0, - size: pagination.pageSizeOptions ? pagination.pageSizeOptions[0] : paginationBarDefaults.pageSizeOptions[0] + size: initialPageSize || defaultPageSize, } }; }; @@ -132,7 +154,9 @@ export class EuiInMemoryTable extends Component { pageIndex: criteria.page.index, pageSize: criteria.page.size, totalItemCount: totalCount, - ...(isBoolean(this.props.pagination) ? {} : this.props.pagination) + ...(isBoolean(this.props.pagination) ? {} : { + pageSizeOptions: this.props.pagination.pageSizeOptions + }) }; const sorting = !this.props.sorting ? undefined : { sort: criteria.sort diff --git a/src/components/basic_table/in_memory_table.test.js b/src/components/basic_table/in_memory_table.test.js index afefd77fc34..a11d50cc33b 100644 --- a/src/components/basic_table/in_memory_table.test.js +++ b/src/components/basic_table/in_memory_table.test.js @@ -145,7 +145,35 @@ describe('EuiInMemoryTable', () => { expect(component).toMatchSnapshot(); }); - test('with pagination and error', () => { + test('with pagination and default page size', () => { + + const props = { + ...requiredProps, + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + { id: '3', name: 'name3' } + ], + columns: [ + { + field: 'name', + name: 'Name', + description: 'description' + } + ], + pagination: { + initialPageSize: 4, + pageSizeOptions: [2, 4, 6] + } + }; + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + test('with pagination, default page size and error', () => { const props = { ...requiredProps, @@ -161,6 +189,7 @@ describe('EuiInMemoryTable', () => { } ], pagination: { + initialPageSize: 4, pageSizeOptions: [2, 4, 6] } };