From 57b85e716dab2698b32e1752fa5b0031e56389e8 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Fri, 2 Aug 2019 10:54:45 +0200 Subject: [PATCH 1/2] [RFR] Fix AutocompleteArrayInput fullWidth Fixes #3477 --- docs/Inputs.md | 6 +++-- examples/simple/src/posts/PostEdit.js | 2 +- .../src/input/AutocompleteArrayInput.js | 24 ++++++++++++------- .../src/input/ReferenceArrayInput.js | 1 + 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/docs/Inputs.md b/docs/Inputs.md index ad84dbc0644..06fafe32abe 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -233,7 +233,7 @@ To let users choose multiple values in a list using a dropdown with autocompleti ```jsx import { AutocompleteArrayInput } from 'react-admin'; - +œ ` renders a [material-ui-chip-input](https://gi {% raw %} ```jsx ``` {% endraw %} +**Tip**: Like many other inputs, `` accept a `fullWidth` prop. **Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `` with [``](#referenceinput), and leave the `choices` empty: ```jsx @@ -341,6 +342,7 @@ If you need to override the props of the suggestions container (a `Popper` eleme | `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` | +| `fullWith` | Optional | Boolean | If `true`, the input will take all the form width ## `` and `` diff --git a/examples/simple/src/posts/PostEdit.js b/examples/simple/src/posts/PostEdit.js index 60c52edf14f..5da3fecc039 100644 --- a/examples/simple/src/posts/PostEdit.js +++ b/examples/simple/src/posts/PostEdit.js @@ -88,7 +88,7 @@ const PostEdit = props => ( source="tags" filter={{ published: true }} > - + diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js index 73b82333519..40180d95bf7 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js @@ -70,7 +70,7 @@ const styles = theme => * { id: 'M', name: 'Male' }, * { id: 'F', name: 'Female' }, * ]; - * + * * * You can also customize the properties to use for the option name and value, * thanks to the 'optionText' and 'optionValue' attributes. @@ -79,7 +79,7 @@ const styles = theme => * { _id: 123, full_name: 'Leo Tolstoi', sex: 'M' }, * { _id: 456, full_name: 'Jane Austen', sex: 'F' }, * ]; - * + * * * `optionText` also accepts a function, so you can shape the option text at will: * @example @@ -88,7 +88,7 @@ const styles = theme => * { id: 456, first_name: 'Jane', last_name: 'Austen' }, * ]; * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`; - * + * * * The choices are translated by default, so you can use translation identifiers as choices: * @example @@ -100,12 +100,12 @@ const styles = theme => * However, in some cases (e.g. inside a ``), you may not want * the choice to be translated. In that case, set the `translateChoice` prop to false. * @example - * + * * * The object passed as `options` props is passed to the material-ui component * * @example - * + * */ export class AutocompleteArrayInput extends React.Component { initialInputValue = []; @@ -215,7 +215,11 @@ export class AutocompleteArrayInput extends React.Component { }; renderInput = inputProps => { - const { input } = this.props; + const { + input, + fullWidth, + options: { InputProps, suggestionsContainerProps, ...options }, + } = this.props; const { autoFocus, className, @@ -228,7 +232,6 @@ export class AutocompleteArrayInput extends React.Component { source, value, ref, - options: { InputProps, suggestionsContainerProps, ...options }, ...other } = inputProps; if (typeof meta === 'undefined') { @@ -247,6 +250,11 @@ export class AutocompleteArrayInput extends React.Component { ref(input); }; + const finalOptions = { + fullWidth, + ...options, + }; + return ( } {...other} - {...options} + {...finalOptions} /> ); }; diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.js b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.js index a1f910c3dd1..8a8ea9e4121 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.js +++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.js @@ -105,6 +105,7 @@ export const ReferenceArrayInputView = ({ translateChoice: false, limitChoicesToValue: true, ...sanitizeRestProps(rest), + ...children.props, }); }; From 1c908e8cdfc851b2c4303c0cc7a002fb74516a09 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Mon, 5 Aug 2019 10:24:58 +0200 Subject: [PATCH 2/2] Fix typo --- docs/Inputs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Inputs.md b/docs/Inputs.md index 06fafe32abe..96413374de7 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -233,7 +233,7 @@ To let users choose multiple values in a list using a dropdown with autocompleti ```jsx import { AutocompleteArrayInput } from 'react-admin'; -œ +