From ab3424bbbbbb8d73582fc71fedf7bc5c042a57b1 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 18 Apr 2018 09:46:17 -0700 Subject: [PATCH 1/2] Reset EuiInMemoryTable pagination state when a search has been executed. --- CHANGELOG.md | 1 + .../in_memory/in_memory_search_callback.js | 4 +++- .../in_memory_search_callback_section.js | 11 ++++++++--- src/components/basic_table/in_memory_table.js | 19 ++++++++++++++----- 4 files changed, 26 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 391459e7fc5..f830544ffa8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ **Bug fixes** - Fixed `EuiCard` `icon` prop to include user provided className ([#684](https://github.com/elastic/eui/pull/684)) +- `EuiInMemoryTable` pagination state is now reset automatically if an internal search is executed. If an external search is executed, the `onQueryComplete` callback needs to be called when the search returns results ([#686](https://github.com/elastic/eui/pull/686)) ## [`0.0.42`](https://github.com/elastic/eui/tree/v0.0.42) diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback.js index 05a3ba8f695..3ab0b11d352 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_callback.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback.js @@ -44,7 +44,7 @@ export class Table extends React.Component { }; } - onQueryChange = query => { + onQueryChange = (query, onQueryComplete) => { clearTimeout(debounceTimeoutId); clearTimeout(requestTimeoutId); @@ -64,6 +64,8 @@ export class Table extends React.Component { isLoading: false, items, }); + + onQueryComplete(); }, 1000); }, 300); }; diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js index d7e30829617..7a5ccf1d4c5 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { EuiCode } from '../../../../../src/components'; @@ -23,12 +23,17 @@ export const searchCallbackSection = { } ], text: ( -
+

The example shows how to configure EuiInMemoryTable to display a search bar and intercept the search value when it changes so you can perform your own search logic.

-
+ +

+ Note that when the search has returned results, you’ll need to call the onQueryComplete + callback that’s provided to the search.onChange prop. +

+ ), props: propsInfo, demo: diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js index 64c572ebe44..b6a2d4585a7 100644 --- a/src/components/basic_table/in_memory_table.js +++ b/src/components/basic_table/in_memory_table.js @@ -155,17 +155,26 @@ export class EuiInMemoryTable extends Component { }); }; - onQueryChange(query) { + onQueryChange = (query) => { if (this.props.search.onChange) { - const shouldQueryInMemory = this.props.search.onChange(query); + const shouldQueryInMemory = this.props.search.onChange(query, () => { + // Reset pagination state. + this.setState({ + pageIndex: 0, + }) + }); + if (!shouldQueryInMemory) { return; } } + + // Reset pagination state. this.setState({ - query + query, + pageIndex: 0, }); - } + }; renderSearchBar() { const { search } = this.props; @@ -181,7 +190,7 @@ export class EuiInMemoryTable extends Component { return ( ); From 4f747a87f33a633e2107c9c56948537ccc39578c Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 18 Apr 2018 09:59:52 -0700 Subject: [PATCH 2/2] Use componentWillReceiveProps instead of a callback. --- CHANGELOG.md | 2 +- .../in_memory/in_memory_search_callback.js | 4 +--- .../in_memory_search_callback_section.js | 5 ----- src/components/basic_table/in_memory_table.js | 17 ++++++++++------- 4 files changed, 12 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f830544ffa8..629a51652a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ **Bug fixes** - Fixed `EuiCard` `icon` prop to include user provided className ([#684](https://github.com/elastic/eui/pull/684)) -- `EuiInMemoryTable` pagination state is now reset automatically if an internal search is executed. If an external search is executed, the `onQueryComplete` callback needs to be called when the search returns results ([#686](https://github.com/elastic/eui/pull/686)) +- `EuiInMemoryTable` pagination state is now reset automatically when a search is executed ([#686](https://github.com/elastic/eui/pull/686)) ## [`0.0.42`](https://github.com/elastic/eui/tree/v0.0.42) diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback.js index 3ab0b11d352..05a3ba8f695 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_callback.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback.js @@ -44,7 +44,7 @@ export class Table extends React.Component { }; } - onQueryChange = (query, onQueryComplete) => { + onQueryChange = query => { clearTimeout(debounceTimeoutId); clearTimeout(requestTimeoutId); @@ -64,8 +64,6 @@ export class Table extends React.Component { isLoading: false, items, }); - - onQueryComplete(); }, 1000); }, 300); }; diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js index 7a5ccf1d4c5..2e2ee01f0b6 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js @@ -28,11 +28,6 @@ export const searchCallbackSection = { The example shows how to configure EuiInMemoryTable to display a search bar and intercept the search value when it changes so you can perform your own search logic.

- -

- Note that when the search has returned results, you’ll need to call the onQueryComplete - callback that’s provided to the search.onChange prop. -

), props: propsInfo, diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js index b6a2d4585a7..5d766bb0526 100644 --- a/src/components/basic_table/in_memory_table.js +++ b/src/components/basic_table/in_memory_table.js @@ -157,13 +157,7 @@ export class EuiInMemoryTable extends Component { onQueryChange = (query) => { if (this.props.search.onChange) { - const shouldQueryInMemory = this.props.search.onChange(query, () => { - // Reset pagination state. - this.setState({ - pageIndex: 0, - }) - }); - + const shouldQueryInMemory = this.props.search.onChange(query); if (!shouldQueryInMemory) { return; } @@ -242,6 +236,15 @@ export class EuiInMemoryTable extends Component { }; } + componentWillReceiveProps(nextProps) { + if (nextProps.items !== this.props.items) { + // We have new items because an external search has completed, so reset pagination state. + this.setState({ + pageIndex: 0, + }); + } + } + render() { const { columns,