From 51ae567770f582364b5de1e5d09d98733336894d Mon Sep 17 00:00:00 2001 From: Jason Rhodes Date: Tue, 21 Aug 2018 15:36:22 -0400 Subject: [PATCH 1/4] Adds ability to hide per page options when enabling pagination --- src-docs/src/views/tables/basic/props_info.js | 12 +++++-- src-docs/src/views/tables/custom/custom.js | 15 +++++++- .../src/views/tables/in_memory/in_memory.js | 2 +- .../src/views/tables/paginated/paginated.js | 35 +++++++++++++------ .../in_memory_table.test.js.snap | 12 +++++++ .../__snapshots__/pagination_bar.test.js.snap | 2 ++ src/components/basic_table/basic_table.js | 7 ++-- src/components/basic_table/in_memory_table.js | 11 ++++-- src/components/basic_table/pagination_bar.js | 3 +- .../table_pagination/table_pagination.js | 32 ++++++++++------- 10 files changed, 96 insertions(+), 35 deletions(-) diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js index c84f75d99df..1ae2a09608e 100644 --- a/src-docs/src/views/tables/basic/props_info.js +++ b/src-docs/src/views/tables/basic/props_info.js @@ -39,7 +39,7 @@ export const propsInfo = { }, onChange: { description: 'Called whenever pagination or sorting changes (this property is required when either' + - 'pagination or sorting is configured', + 'pagination or sorting is configured', required: false, type: { name: '(criteria: #Criteria) => void' } } @@ -71,6 +71,12 @@ export const propsInfo = { required: false, defaultValue: { value: '[5, 10, 20]' }, type: { name: 'number[]' } + }, + disablePerPageOptions: { + description: 'Hides the page size dropdown', + required: false, + defaultValue: { value: 'false' }, + type: { name: 'bool' } } } } @@ -105,7 +111,7 @@ export const propsInfo = { }, selectableMessage: { description: 'A callback that is called per item to retrieve a message for its selectable state.' + - 'We display these messages as a tooltip on an unselectable checkbox', + 'We display these messages as a tooltip on an unselectable checkbox', required: false, type: { name: '(selectable, item) => string' } } @@ -312,7 +318,7 @@ export const propsInfo = { props: { render: { description: 'The function that renders the action. Note that the returned node is ' + - 'expected to have`onFocus` and `onBlur` functions', + 'expected to have`onFocus` and `onBlur` functions', required: true, type: { name: '(item, enabled) => PropTypes.node' } }, diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js index 58553c9cb93..ad17ef505eb 100644 --- a/src-docs/src/views/tables/custom/custom.js +++ b/src-docs/src/views/tables/custom/custom.js @@ -8,6 +8,7 @@ import { EuiButton, EuiButtonIcon, EuiCheckbox, + EuiCode, EuiContextMenuItem, EuiContextMenuPanel, EuiFieldSearch, @@ -17,6 +18,7 @@ import { EuiLink, EuiPopover, EuiSpacer, + EuiSwitch, EuiTable, EuiTableBody, EuiTableHeader, @@ -45,7 +47,8 @@ export default class extends Component { itemIdToSelectedMap: {}, itemIdToOpenActionsPopoverMap: {}, sortedColumn: 'title', - itemsPerPage: 20, + itemsPerPage: 10, + showPerPageOptions: true }; this.items = [{ @@ -546,6 +549,8 @@ export default class extends Component { return rows; } + togglePerPageOptions = () => this.setState((state) => ({ showPerPageOptions: !state.showPerPageOptions })); + render() { let optionalActionButtons; @@ -595,9 +600,17 @@ export default class extends Component { itemsPerPage={this.state.itemsPerPage} itemsPerPageOptions={[5, 10, 20]} pageCount={this.pager.getTotalPages()} + disablePerPageOptions={!this.state.showPerPageOptions} onChangeItemsPerPage={this.onChangeItemsPerPage} onChangePage={this.onChangePage} /> + + + + Hide per page options with pagination.disablePerPageOptions = true} + onChange={this.togglePerPageOptions} + /> ); } diff --git a/src-docs/src/views/tables/in_memory/in_memory.js b/src-docs/src/views/tables/in_memory/in_memory.js index 5c69ec7326e..2ef647cc40c 100644 --- a/src-docs/src/views/tables/in_memory/in_memory.js +++ b/src-docs/src/views/tables/in_memory/in_memory.js @@ -83,7 +83,7 @@ export const Table = () => { ); diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js index a9afeae66c4..33ecabd820f 100644 --- a/src-docs/src/views/tables/paginated/paginated.js +++ b/src-docs/src/views/tables/paginated/paginated.js @@ -6,10 +6,13 @@ import { createDataStore } from '../data_store'; import { EuiBasicTable, + EuiCode, EuiLink, EuiHealth, EuiFlexGroup, EuiFlexItem, + EuiSpacer, + EuiSwitch } from '../../../../../src/components'; /* @@ -43,6 +46,7 @@ export class Table extends Component { this.state = { pageIndex: 0, pageSize: 5, + showPerPageOptions: true }; } @@ -64,10 +68,13 @@ export class Table extends Component { return {label}; } + togglePerPageOptions = () => this.setState((state) => ({ showPerPageOptions: !state.showPerPageOptions })); + render() { const { pageIndex, pageSize, + showPerPageOptions } = this.state; const { @@ -125,19 +132,27 @@ export class Table extends Component { }]; const pagination = { - pageIndex: pageIndex, - pageSize: pageSize, - totalItemCount: totalItemCount, - pageSizeOptions: [3, 5, 8] + pageIndex, + pageSize, + totalItemCount, + pageSizeOptions: [3, 5, 8], + disablePerPageOptions: !showPerPageOptions }; return ( - +
+ + + Hide per page options with pagination.disablePerPageOptions = true} + onChange={this.togglePerPageOptions} + /> +
); } } 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 e94597cd9b7..59b9bd14689 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 @@ -76,6 +76,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` onChange={[Function]} pagination={ Object { + "disablePerPageOptions": undefined, "pageIndex": 1, "pageSize": 2, "pageSizeOptions": Array [ @@ -203,6 +204,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` onPageSizeChange={[Function]} pagination={ Object { + "disablePerPageOptions": undefined, "pageIndex": 1, "pageSize": 2, "pageSizeOptions": Array [ @@ -224,6 +226,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` void, @@ -362,7 +362,7 @@ export class EuiBasicTable extends Component { } columns.forEach((column, index) => { - if(!column.sortable || column.hideForMobile) { + if (!column.sortable || column.hideForMobile) { return; } @@ -497,6 +497,7 @@ export class EuiBasicTable extends Component { if (items.length === 0) { return this.renderEmptyBody(); } + const rows = items.map((item, index) => { // if there's pagination the item's index must be adjusted to the where it is in the whole dataset const tableItemIndex = this.props.pagination ? @@ -516,7 +517,7 @@ export class EuiBasicTable extends Component { - {error} + {error} diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js index 78c33bf8f6b..5677349f901 100644 --- a/src/components/basic_table/in_memory_table.js +++ b/src/components/basic_table/in_memory_table.js @@ -94,10 +94,11 @@ const getInitialPagination = (pagination) => { const { initialPageSize, pageSizeOptions = paginationBarDefaults.pageSizeOptions, + disablePerPageOptions } = pagination; - if (initialPageSize && (!pageSizeOptions || !pageSizeOptions.includes(initialPageSize))) { + if (!disablePerPageOptions && initialPageSize && (!pageSizeOptions || !pageSizeOptions.includes(initialPageSize))) { throw new Error(`EuiInMemoryTable received initialPageSize ${initialPageSize}, which wasn't provided within pageSizeOptions.`); } @@ -107,6 +108,7 @@ const getInitialPagination = (pagination) => { pageIndex: 0, pageSize: initialPageSize || defaultPageSize, pageSizeOptions, + disablePerPageOptions }; }; @@ -156,7 +158,7 @@ export class EuiInMemoryTable extends Component { super(props); const { search, pagination, sorting } = props; - const { pageIndex, pageSize, pageSizeOptions } = getInitialPagination(pagination); + const { pageIndex, pageSize, pageSizeOptions, disablePerPageOptions } = getInitialPagination(pagination); const { sortField, sortDirection } = getInitialSorting(sorting); this.state = { @@ -169,6 +171,7 @@ export class EuiInMemoryTable extends Component { pageSizeOptions, sortField, sortDirection, + disablePerPageOptions }; } @@ -325,6 +328,7 @@ export class EuiInMemoryTable extends Component { pageSizeOptions, sortField, sortDirection, + disablePerPageOptions } = this.state; const { items, totalItemCount } = this.getItems(); @@ -334,6 +338,7 @@ export class EuiInMemoryTable extends Component { pageSize, pageSizeOptions, totalItemCount, + disablePerPageOptions }; // Data loaded from a server can have a default sort order which is meaningful to the @@ -385,7 +390,7 @@ export class EuiInMemoryTable extends Component { return (
{searchBar} - + {table}
); diff --git a/src/components/basic_table/pagination_bar.js b/src/components/basic_table/pagination_bar.js index 8a0e43eb773..440570f9124 100644 --- a/src/components/basic_table/pagination_bar.js +++ b/src/components/basic_table/pagination_bar.js @@ -21,9 +21,10 @@ export const PaginationBar = ({ pagination, onPageSizeChange, onPageChange }) => const pageCount = Math.ceil(pagination.totalItemCount / pagination.pageSize); return (
- + )); + const itemsPerPagePopover = ( + + + + ); + return ( - - - + {disablePerPageOptions ? null : itemsPerPagePopover} @@ -104,4 +109,5 @@ EuiTablePagination.propTypes = { EuiTablePagination.defaultProps = { itemsPerPage: 50, itemsPerPageOptions: [10, 20, 50, 100], + disablePerPageOptions: false }; From 3a1ba6a8848490b0a28df0fa3fab5311f0066ec6 Mon Sep 17 00:00:00 2001 From: Jason Rhodes Date: Tue, 21 Aug 2018 16:08:17 -0400 Subject: [PATCH 2/4] Adds tests for new disable per page options --- .../__snapshots__/basic_table.test.js.snap | 86 ++++++ .../in_memory_table.test.js.snap | 50 ++++ .../__snapshots__/pagination_bar.test.js.snap | 23 ++ .../basic_table/basic_table.test.js | 63 ++-- .../basic_table/in_memory_table.test.js | 31 +- .../basic_table/pagination_bar.test.js | 30 +- .../table_pagination.test.js.snap | 277 +++++++++++++++++- .../table_pagination/table_pagination.test.js | 21 +- 8 files changed, 556 insertions(+), 25 deletions(-) diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap index 3b5725d3ce0..0e644fa4393 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap @@ -882,6 +882,92 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
`; +exports[`EuiBasicTable with pagination, hiding the per page options 1`] = ` +
+
+ + + + + Name + + + + + + + name1 + + + + + + + name2 + + + + + + + name3 + + + + + +
+ +
+`; + exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
`; +exports[`EuiInMemoryTable with pagination, hiding the per page options 1`] = ` + +`; + exports[`EuiInMemoryTable with pagination, selection and sorting 1`] = ` `; +exports[`PaginationBar render - hiding per page options 1`] = ` +
+ + +
+`; + exports[`PaginationBar render 1`] = `
{ return { 'data-test-subj': `row-${id}`, className: 'customRowClass', - onClick: () => {}, + onClick: () => { }, }; }, }; @@ -130,7 +130,7 @@ describe('EuiBasicTable', () => { rowProps: { 'data-test-subj': `row`, className: 'customClass', - onClick: () => {}, + onClick: () => { }, }, }; const component = shallow( @@ -162,7 +162,7 @@ describe('EuiBasicTable', () => { return { 'data-test-subj': `cell-${id}-${field}`, className: 'customRowClass', - onClick: () => {}, + onClick: () => { }, }; }, }; @@ -190,7 +190,7 @@ describe('EuiBasicTable', () => { cellProps: { 'data-test-subj': `cell`, className: 'customClass', - onClick: () => {}, + onClick: () => { }, }, }; const component = shallow( @@ -219,7 +219,7 @@ describe('EuiBasicTable', () => { itemIdToExpandedRowMap: { '1':
Expanded row
, }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -247,7 +247,7 @@ describe('EuiBasicTable', () => { pageSize: 3, totalItemCount: 5 }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -274,7 +274,7 @@ describe('EuiBasicTable', () => { pageSize: 3, totalItemCount: 5 }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -302,7 +302,7 @@ describe('EuiBasicTable', () => { pageSize: 3, totalItemCount: 5 }, - onChange: () => {}, + onChange: () => { }, error: 'no can do' }; const component = shallow( @@ -312,6 +312,35 @@ describe('EuiBasicTable', () => { expect(component).toMatchSnapshot(); }); + test('with pagination, hiding the per page options', () => { + const props = { + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + { id: '3', name: 'name3' } + ], + columns: [ + { + field: 'name', + name: 'Name', + description: 'description' + } + ], + pagination: { + pageIndex: 0, + pageSize: 3, + totalItemCount: 5, + disablePerPageOptions: true + }, + onChange: () => { } + }; + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + test('with sorting', () => { const props = { items: [ @@ -330,7 +359,7 @@ describe('EuiBasicTable', () => { sorting: { sort: { field: 'name', direction: 'asc' } }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -354,7 +383,7 @@ describe('EuiBasicTable', () => { sortable: true } ], - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -386,7 +415,7 @@ describe('EuiBasicTable', () => { selection: { onSelectionChanged: () => undefined }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -422,7 +451,7 @@ describe('EuiBasicTable', () => { sorting: { sort: { field: 'name', direction: 'asc' } }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -459,7 +488,7 @@ describe('EuiBasicTable', () => { sorting: { sort: { field: 'name', direction: 'asc' } }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -496,7 +525,7 @@ describe('EuiBasicTable', () => { sorting: { sort: { field: 'count', direction: 'asc' } }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -535,7 +564,7 @@ describe('EuiBasicTable', () => { sorting: { sort: { field: 'count', direction: 'asc' } }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -582,7 +611,7 @@ describe('EuiBasicTable', () => { sorting: { sort: { field: 'name', direction: 'asc' } }, - onChange: () => {} + onChange: () => { } }; const component = shallow( @@ -635,7 +664,7 @@ describe('EuiBasicTable', () => { sorting: { sort: { field: 'name', direction: 'asc' } }, - onChange: () => {} + onChange: () => { } }; const component = shallow( diff --git a/src/components/basic_table/in_memory_table.test.js b/src/components/basic_table/in_memory_table.test.js index 73c52063283..3ba1d770037 100644 --- a/src/components/basic_table/in_memory_table.test.js +++ b/src/components/basic_table/in_memory_table.test.js @@ -229,6 +229,33 @@ describe('EuiInMemoryTable', () => { expect(component).toMatchSnapshot(); }); + test('with pagination, hiding the per page options', () => { + + const props = { + ...requiredProps, + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + { id: '3', name: 'name3' } + ], + columns: [ + { + field: 'name', + name: 'Name', + description: 'description' + } + ], + pagination: { + disablePerPageOptions: true + } + }; + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + test('with sorting', () => { const props = { @@ -562,7 +589,7 @@ describe('EuiInMemoryTable', () => { const props = { items, columns, search, className: 'testTable' }; const component = mount( - + ); // should render with all three results visible @@ -696,7 +723,7 @@ describe('EuiInMemoryTable', () => { }; const component = mount( - + ); expect(props.onTableChange).toHaveBeenCalledTimes(0); diff --git a/src/components/basic_table/pagination_bar.test.js b/src/components/basic_table/pagination_bar.test.js index 58d2da80f4f..c6dd201960c 100644 --- a/src/components/basic_table/pagination_bar.test.js +++ b/src/components/basic_table/pagination_bar.test.js @@ -14,8 +14,8 @@ describe('PaginationBar', () => { pageSize: 5, totalItemCount: 0 }, - onPageSizeChange: () => {}, - onPageChange: () => {} + onPageSizeChange: () => { }, + onPageChange: () => { } }; const component = shallow( @@ -36,8 +36,30 @@ describe('PaginationBar', () => { totalItemCount: 0, pageSizeOptions: [1, 2, 3] }, - onPageSizeChange: () => {}, - onPageChange: () => {} + onPageSizeChange: () => { }, + onPageChange: () => { } + }; + + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + + }); + + test('render - hiding per page options', () => { + + const props = { + ...requiredProps, + pagination: { + pageIndex: 0, + pageSize: 5, + totalItemCount: 0, + disablePerPageOptions: true + }, + onPageSizeChange: () => { }, + onPageChange: () => { } }; const component = shallow( diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap index e756d9bba5c..3581a31cd71 100644 --- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap +++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap @@ -53,7 +53,282 @@ exports[`EuiTablePagination is rendered 1`] = `
- +
+ + + + + + + +
+
+
+`; + +exports[`EuiTablePagination is rendered when hiding the per page options 1`] = ` +
+
+
+
+ + + + + + + +
`; diff --git a/src/components/table/table_pagination/table_pagination.test.js b/src/components/table/table_pagination/table_pagination.test.js index 3a9f205b725..55068388e1f 100644 --- a/src/components/table/table_pagination/table_pagination.test.js +++ b/src/components/table/table_pagination/table_pagination.test.js @@ -5,11 +5,30 @@ import { requiredProps } from '../../../test/required_props'; import { EuiTablePagination } from './table_pagination'; describe('EuiTablePagination', () => { + + const paginationProps = { + activePage: 1, + pageCount: 5, + onChangePage: jest.fn() + }; test('is rendered', () => { const component = render( {}} + {...paginationProps} + /> + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('is rendered when hiding the per page options', () => { + const component = render( + ); From ca9fb24687501624fedced3d68c8845a5dfe366a Mon Sep 17 00:00:00 2001 From: Jason Rhodes Date: Tue, 21 Aug 2018 22:40:19 -0400 Subject: [PATCH 3/4] Renames disablePerPageOptions to hidePerPageOptions --- src-docs/src/views/tables/basic/props_info.js | 2 +- src-docs/src/views/tables/custom/custom.js | 4 +-- .../src/views/tables/in_memory/in_memory.js | 2 +- .../src/views/tables/paginated/paginated.js | 4 +-- .../__snapshots__/basic_table.test.js.snap | 2 +- .../in_memory_table.test.js.snap | 26 +++++++++---------- .../__snapshots__/pagination_bar.test.js.snap | 6 ++--- .../basic_table/basic_table.test.js | 2 +- src/components/basic_table/in_memory_table.js | 14 +++++----- .../basic_table/in_memory_table.test.js | 2 +- src/components/basic_table/pagination_bar.js | 2 +- .../basic_table/pagination_bar.test.js | 2 +- .../table_pagination/table_pagination.js | 7 ++--- .../table_pagination/table_pagination.test.js | 2 +- 14 files changed, 39 insertions(+), 38 deletions(-) diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js index 1ae2a09608e..0225826dc47 100644 --- a/src-docs/src/views/tables/basic/props_info.js +++ b/src-docs/src/views/tables/basic/props_info.js @@ -72,7 +72,7 @@ export const propsInfo = { defaultValue: { value: '[5, 10, 20]' }, type: { name: 'number[]' } }, - disablePerPageOptions: { + hidePerPageOptions: { description: 'Hides the page size dropdown', required: false, defaultValue: { value: 'false' }, diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js index ad17ef505eb..d27e105f514 100644 --- a/src-docs/src/views/tables/custom/custom.js +++ b/src-docs/src/views/tables/custom/custom.js @@ -600,7 +600,7 @@ export default class extends Component { itemsPerPage={this.state.itemsPerPage} itemsPerPageOptions={[5, 10, 20]} pageCount={this.pager.getTotalPages()} - disablePerPageOptions={!this.state.showPerPageOptions} + hidePerPageOptions={!this.state.showPerPageOptions} onChangeItemsPerPage={this.onChangeItemsPerPage} onChangePage={this.onChangePage} /> @@ -608,7 +608,7 @@ export default class extends Component { Hide per page options with pagination.disablePerPageOptions = true} + label={Hide per page options with pagination.hidePerPageOptions = true} onChange={this.togglePerPageOptions} />
diff --git a/src-docs/src/views/tables/in_memory/in_memory.js b/src-docs/src/views/tables/in_memory/in_memory.js index 2ef647cc40c..3dde6a2b653 100644 --- a/src-docs/src/views/tables/in_memory/in_memory.js +++ b/src-docs/src/views/tables/in_memory/in_memory.js @@ -83,7 +83,7 @@ export const Table = () => { ); diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js index 33ecabd820f..b2cd201db0b 100644 --- a/src-docs/src/views/tables/paginated/paginated.js +++ b/src-docs/src/views/tables/paginated/paginated.js @@ -136,7 +136,7 @@ export class Table extends Component { pageSize, totalItemCount, pageSizeOptions: [3, 5, 8], - disablePerPageOptions: !showPerPageOptions + hidePerPageOptions: !showPerPageOptions }; return ( @@ -149,7 +149,7 @@ export class Table extends Component { /> Hide per page options with pagination.disablePerPageOptions = true} + label={Hide per page options with pagination.hidePerPageOptions = true} onChange={this.togglePerPageOptions} />
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap index 0e644fa4393..00d3e59ef5d 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap @@ -958,7 +958,7 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = ` onPageSizeChange={[Function]} pagination={ Object { - "disablePerPageOptions": true, + "hidePerPageOptions": true, "pageIndex": 0, "pageSize": 3, "totalItemCount": 5, 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 36d7ab97b6e..908974747a6 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 @@ -76,7 +76,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` onChange={[Function]} pagination={ Object { - "disablePerPageOptions": undefined, + "hidePerPageOptions": undefined, "pageIndex": 1, "pageSize": 2, "pageSizeOptions": Array [ @@ -204,7 +204,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` onPageSizeChange={[Function]} pagination={ Object { - "disablePerPageOptions": undefined, + "hidePerPageOptions": undefined, "pageIndex": 1, "pageSize": 2, "pageSizeOptions": Array [ @@ -226,7 +226,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` { pageIndex: 0, pageSize: 3, totalItemCount: 5, - disablePerPageOptions: true + hidePerPageOptions: true }, onChange: () => { } }; diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js index 5677349f901..b0bf481e9a6 100644 --- a/src/components/basic_table/in_memory_table.js +++ b/src/components/basic_table/in_memory_table.js @@ -94,11 +94,11 @@ const getInitialPagination = (pagination) => { const { initialPageSize, pageSizeOptions = paginationBarDefaults.pageSizeOptions, - disablePerPageOptions + hidePerPageOptions } = pagination; - if (!disablePerPageOptions && initialPageSize && (!pageSizeOptions || !pageSizeOptions.includes(initialPageSize))) { + if (!hidePerPageOptions && initialPageSize && (!pageSizeOptions || !pageSizeOptions.includes(initialPageSize))) { throw new Error(`EuiInMemoryTable received initialPageSize ${initialPageSize}, which wasn't provided within pageSizeOptions.`); } @@ -108,7 +108,7 @@ const getInitialPagination = (pagination) => { pageIndex: 0, pageSize: initialPageSize || defaultPageSize, pageSizeOptions, - disablePerPageOptions + hidePerPageOptions }; }; @@ -158,7 +158,7 @@ export class EuiInMemoryTable extends Component { super(props); const { search, pagination, sorting } = props; - const { pageIndex, pageSize, pageSizeOptions, disablePerPageOptions } = getInitialPagination(pagination); + const { pageIndex, pageSize, pageSizeOptions, hidePerPageOptions } = getInitialPagination(pagination); const { sortField, sortDirection } = getInitialSorting(sorting); this.state = { @@ -171,7 +171,7 @@ export class EuiInMemoryTable extends Component { pageSizeOptions, sortField, sortDirection, - disablePerPageOptions + hidePerPageOptions }; } @@ -328,7 +328,7 @@ export class EuiInMemoryTable extends Component { pageSizeOptions, sortField, sortDirection, - disablePerPageOptions + hidePerPageOptions } = this.state; const { items, totalItemCount } = this.getItems(); @@ -338,7 +338,7 @@ export class EuiInMemoryTable extends Component { pageSize, pageSizeOptions, totalItemCount, - disablePerPageOptions + hidePerPageOptions }; // Data loaded from a server can have a default sort order which is meaningful to the diff --git a/src/components/basic_table/in_memory_table.test.js b/src/components/basic_table/in_memory_table.test.js index 3ba1d770037..2a37cf7411f 100644 --- a/src/components/basic_table/in_memory_table.test.js +++ b/src/components/basic_table/in_memory_table.test.js @@ -246,7 +246,7 @@ describe('EuiInMemoryTable', () => { } ], pagination: { - disablePerPageOptions: true + hidePerPageOptions: true } }; const component = shallow( diff --git a/src/components/basic_table/pagination_bar.js b/src/components/basic_table/pagination_bar.js index 440570f9124..846fcf60a50 100644 --- a/src/components/basic_table/pagination_bar.js +++ b/src/components/basic_table/pagination_bar.js @@ -24,7 +24,7 @@ export const PaginationBar = ({ pagination, onPageSizeChange, onPageChange }) => { pageIndex: 0, pageSize: 5, totalItemCount: 0, - disablePerPageOptions: true + hidePerPageOptions: true }, onPageSizeChange: () => { }, onPageChange: () => { } diff --git a/src/components/table/table_pagination/table_pagination.js b/src/components/table/table_pagination/table_pagination.js index 9006a74d78e..cccbf78d0f8 100644 --- a/src/components/table/table_pagination/table_pagination.js +++ b/src/components/table/table_pagination/table_pagination.js @@ -35,7 +35,7 @@ export class EuiTablePagination extends Component { activePage, itemsPerPage, itemsPerPageOptions, - disablePerPageOptions, + hidePerPageOptions, onChangeItemsPerPage, onChangePage, pageCount, @@ -82,7 +82,7 @@ export class EuiTablePagination extends Component { return ( - {disablePerPageOptions ? null : itemsPerPagePopover} + {hidePerPageOptions ? null : itemsPerPagePopover} @@ -101,6 +101,7 @@ EuiTablePagination.propTypes = { activePage: PropTypes.number, itemsPerPage: PropTypes.number, itemsPerPageOptions: PropTypes.arrayOf(PropTypes.number), + hidePerPageOptions: PropTypes.bool, onChangeItemsPerPage: PropTypes.func, onChangePage: PropTypes.func, pageCount: PropTypes.number, @@ -109,5 +110,5 @@ EuiTablePagination.propTypes = { EuiTablePagination.defaultProps = { itemsPerPage: 50, itemsPerPageOptions: [10, 20, 50, 100], - disablePerPageOptions: false + hidePerPageOptions: false }; diff --git a/src/components/table/table_pagination/table_pagination.test.js b/src/components/table/table_pagination/table_pagination.test.js index 55068388e1f..d2d411178b3 100644 --- a/src/components/table/table_pagination/table_pagination.test.js +++ b/src/components/table/table_pagination/table_pagination.test.js @@ -28,7 +28,7 @@ describe('EuiTablePagination', () => { ); From 143aafea38391feac564e3f10fcef9a02d3ea1a8 Mon Sep 17 00:00:00 2001 From: Jason Rhodes Date: Tue, 21 Aug 2018 22:55:18 -0400 Subject: [PATCH 4/4] Updates table documentation based on review feedback --- src-docs/src/views/tables/custom/custom.js | 15 +-------------- .../src/views/tables/custom/custom_section.js | 4 +++- src-docs/src/views/tables/in_memory/in_memory.js | 2 +- src-docs/src/views/tables/paginated/paginated.js | 10 +++++----- 4 files changed, 10 insertions(+), 21 deletions(-) diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js index d27e105f514..2c78b8be84f 100644 --- a/src-docs/src/views/tables/custom/custom.js +++ b/src-docs/src/views/tables/custom/custom.js @@ -8,7 +8,6 @@ import { EuiButton, EuiButtonIcon, EuiCheckbox, - EuiCode, EuiContextMenuItem, EuiContextMenuPanel, EuiFieldSearch, @@ -18,7 +17,6 @@ import { EuiLink, EuiPopover, EuiSpacer, - EuiSwitch, EuiTable, EuiTableBody, EuiTableHeader, @@ -47,8 +45,7 @@ export default class extends Component { itemIdToSelectedMap: {}, itemIdToOpenActionsPopoverMap: {}, sortedColumn: 'title', - itemsPerPage: 10, - showPerPageOptions: true + itemsPerPage: 10 }; this.items = [{ @@ -549,8 +546,6 @@ export default class extends Component { return rows; } - togglePerPageOptions = () => this.setState((state) => ({ showPerPageOptions: !state.showPerPageOptions })); - render() { let optionalActionButtons; @@ -600,17 +595,9 @@ export default class extends Component { itemsPerPage={this.state.itemsPerPage} itemsPerPageOptions={[5, 10, 20]} pageCount={this.pager.getTotalPages()} - hidePerPageOptions={!this.state.showPerPageOptions} onChangeItemsPerPage={this.onChangeItemsPerPage} onChangePage={this.onChangePage} /> - - - - Hide per page options with pagination.hidePerPageOptions = true} - onChange={this.togglePerPageOptions} - /> ); } diff --git a/src-docs/src/views/tables/custom/custom_section.js b/src-docs/src/views/tables/custom/custom_section.js index ae369858c73..922c5891775 100644 --- a/src-docs/src/views/tables/custom/custom_section.js +++ b/src-docs/src/views/tables/custom/custom_section.js @@ -7,6 +7,7 @@ import { EuiTableHeader, EuiTableHeaderCell, EuiTableHeaderCellCheckbox, + EuiTablePagination, EuiTableRow, EuiTableRowCell, EuiTableRowCellCheckbox, @@ -70,6 +71,7 @@ export const section = { EuiTableHeader, EuiTableHeaderCell, EuiTableHeaderCellCheckbox, + EuiTablePagination, EuiTableRow, EuiTableRowCell, EuiTableRowCellCheckbox, @@ -77,5 +79,5 @@ export const section = { EuiTableSortMobile, EuiTableSortMobileItem, }, - demo: , + demo: , }; diff --git a/src-docs/src/views/tables/in_memory/in_memory.js b/src-docs/src/views/tables/in_memory/in_memory.js index 3dde6a2b653..5c69ec7326e 100644 --- a/src-docs/src/views/tables/in_memory/in_memory.js +++ b/src-docs/src/views/tables/in_memory/in_memory.js @@ -83,7 +83,7 @@ export const Table = () => { ); diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js index b2cd201db0b..cd8ee1f8924 100644 --- a/src-docs/src/views/tables/paginated/paginated.js +++ b/src-docs/src/views/tables/paginated/paginated.js @@ -141,17 +141,17 @@ export class Table extends Component { return (
+ Hide per page options with pagination.hidePerPageOptions = true} + onChange={this.togglePerPageOptions} + /> + - - Hide per page options with pagination.hidePerPageOptions = true} - onChange={this.togglePerPageOptions} - />
); }