From cef0427c92768bed0a8c15801f80c211130601c7 Mon Sep 17 00:00:00 2001 From: David Picarra Date: Thu, 3 Jan 2019 13:24:49 +0000 Subject: [PATCH 1/3] feat: Should render suggestions for AutocompleteArrayInput --- .../src/input/AutocompleteArrayInput.js | 9 ++++++++- .../src/input/AutocompleteArrayInput.spec.js | 19 +++++++++++++++++++ .../src/input/AutocompleteInput.js | 2 +- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js index aaff2569b82..89af8650437 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js @@ -419,7 +419,14 @@ export class AutocompleteArrayInput extends React.Component { this.previousFilterValue = value; }; - shouldRenderSuggestions = () => true; + shouldRenderSuggestions = (val) => { + const { shouldRenderSuggestions } = this.props; + if (shouldRenderSuggestions !== undefined && typeof shouldRenderSuggestions === 'function') { + return shouldRenderSuggestions(val) + } + + return true + }; render() { const { diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js index 737d0d096b2..0144921cec8 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js @@ -164,6 +164,25 @@ describe('', () => { assert.equal(MenuItem.text(), 'Male'); }); + it('should respect shouldRenderSuggestions over default if passed in', () => { + const wrapper = mount( + false} + />, + { context, childContextTypes } + ); + wrapper.find('input').simulate('focus'); + wrapper + .find('input') + .simulate('change', { target: { value: 'foo' } }); + expect(wrapper.state('searchText')).toBe('foo'); + expect(wrapper.state('suggestions')).toHaveLength(1); + expect(wrapper.find('ListItem')).toHaveLength(0); + }); + describe('Fix issue #1410', () => { it('should not fail when value is empty and new choices are applied', () => { const wrapper = shallow( diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.js b/packages/ra-ui-materialui/src/input/AutocompleteInput.js index 62e0bea9fd5..72fa20730cc 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.js +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.js @@ -447,7 +447,7 @@ export class AutocompleteInput extends React.Component { } return true - } + }; render() { const { From dfc4286bd17a13e47382f4cfbc779290973525ad Mon Sep 17 00:00:00 2001 From: David Picarra Date: Thu, 3 Jan 2019 14:14:25 +0000 Subject: [PATCH 2/3] test: add AutocompleteArrayInput shouldRenderSuggestions --- docs/Inputs.md | 4 ++++ .../src/input/AutocompleteArrayInput.js | 1 + .../src/input/AutocompleteArrayInput.spec.js | 13 +++++++++---- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/Inputs.md b/docs/Inputs.md index d9e5f6f5246..0bc999b4145 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -278,6 +278,9 @@ By default the component matches choices with the current input searchText. For If you want to limit the initial choices shown to the current value only, you can set the `limitChoicesToValue` prop. +When dealing with a large amount of `choices` you may need to limit the number of suggestions that are rendered in order to maintain usable performance. The `shouldRenderSuggestions` is an optional prop that allows you to set conditions on when to render suggestions. An easy way to improve performance would be to skip rendering until the user has entered 2 or 3 characters in the search box. This lowers the result set significantly, and might be all you need (depending on your data set). +Ex. ` { return val.trim().length > 2 }} />` would not render any suggestions until the 3rd character was entered. This prop is passed to the underlying `react-autosuggest` component and is documented [here](https://github.com/moroshko/react-autosuggest#should-render-suggestions-prop). + Lastly, `` renders a [material-ui-chip-input](https://github.com/TeamWertarbyte/material-ui-chip-input) component. Use the `options` attribute to override any of the `` attributes: {% raw %} @@ -315,6 +318,7 @@ import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin' | `optionText` | Optional | string | Function | `name` | Fieldname of record to display in the suggestion item or function which accepts the current record as argument (`(record)=> {string}`) | | `setFilter` | Optional | `Function` | null | A callback to inform the `searchText` has changed and new `choices` can be retrieved based on this `searchText`. Signature `searchText => void`. This function is automatically setup when using `ReferenceInput`. | | `suggestionComponent` | Optional | Function | `({ suggestion, query, isHighlighted, props }) =>
` | Allows to override how the item is rendered. | +| `shouldRenderSuggestions` | Optional | Function | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. Use this when working with large collections of data to improve performance and user experience. This function is passed into the underlying react-autosuggest component. Ex.`(value) => value.trim() > 2` | ## `` and `` diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js index 89af8650437..2d9e4d522e7 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js @@ -502,6 +502,7 @@ AutocompleteArrayInput.propTypes = { optionValue: PropTypes.string.isRequired, resource: PropTypes.string, setFilter: PropTypes.func, + shouldRenderSuggestions: PropTypes.func, source: PropTypes.string, suggestionComponent: PropTypes.func, translate: PropTypes.func.isRequired, diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js index 0144921cec8..a00b4b71e03 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js @@ -168,19 +168,24 @@ describe('', () => { const wrapper = mount( {} }} choices={[{ id: 'M', name: 'Male' }]} - shouldRenderSuggestions={() => false} + shouldRenderSuggestions={v => v.length > 2} />, { context, childContextTypes } ); wrapper.find('input').simulate('focus'); wrapper .find('input') - .simulate('change', { target: { value: 'foo' } }); - expect(wrapper.state('searchText')).toBe('foo'); + .simulate('change', { target: { value: 'Ma' } }); expect(wrapper.state('suggestions')).toHaveLength(1); expect(wrapper.find('ListItem')).toHaveLength(0); + + wrapper + .find('input') + .simulate('change', { target: { value: 'Mal' } }); + expect(wrapper.state('suggestions')).toHaveLength(1); + expect(wrapper.find('ListItem')).toHaveLength(1); }); describe('Fix issue #1410', () => { From 123932bda2d046038366770da59af0cc6ed90743 Mon Sep 17 00:00:00 2001 From: David Picarra Date: Thu, 10 Jan 2019 10:04:51 +0000 Subject: [PATCH 3/3] revert: changes on AutocompleteInput --- packages/ra-ui-materialui/src/input/AutocompleteInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.js b/packages/ra-ui-materialui/src/input/AutocompleteInput.js index 83c08c66acd..1976859b20d 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.js +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.js @@ -449,7 +449,7 @@ export class AutocompleteInput extends React.Component { ) { return shouldRenderSuggestions(val); } - + return true; };