From 24b8104c42f03653259d938e8b2ee42b66e35d0b Mon Sep 17 00:00:00 2001 From: Ken Browning Date: Sun, 27 Sep 2020 17:51:55 -0700 Subject: [PATCH 1/3] Allow the option labels of NullableBooleanInput to be customized --- docs/Inputs.md | 20 ++---- .../src/input/NullableBooleanInput.spec.tsx | 66 +++++++++++++++++++ .../src/input/NullableBooleanInput.tsx | 36 +++++----- 3 files changed, 87 insertions(+), 35 deletions(-) diff --git a/docs/Inputs.md b/docs/Inputs.md index f9e6f28570e..24f5564f94e 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -450,30 +450,20 @@ import { NullableBooleanInput } from 'react-admin'; ![NullableBooleanInput](./img/nullable-boolean-input.png) -`` doesn't display the empty option by default. If you want to customize its label and display it, you can use the `displayNull` prop. +The labels of the options can be customized using the `nullLabel`, `falseLabel` and `trueLabel` properties. ```jsx import { NullableBooleanInput } from 'react-admin'; - ``` -Also you need to provide your own label for null value. - -```jsx -import polyglotI18nProvider from 'ra-i18n-polyglot'; -import englishMessages from 'ra-language-english'; - -englishMessages.ra.boolean.null = 'Null label'; -const i18nProvider = polyglotI18nProvider(() => englishMessages, 'en'); - - -``` - ![NullableBooleanInput](./img/nullable-boolean-input-null-label.png) `` and `` also accept the [common input props](./Inputs.md#common-input-props). diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.spec.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.spec.tsx index c9f46d7ce4c..736b98ffde7 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.spec.tsx @@ -138,4 +138,70 @@ describe('', () => { 'true' ); }); + + it('should allow to customize the label of the null option', () => { + const { getByRole, getByText, container } = render( +
( + + )} + /> + ); + expect(container.querySelector('input').getAttribute('value')).toBe(''); + const select = getByRole('button'); + fireEvent.mouseDown(select); + expect(getByText('example null label')).not.toBeNull(); + }); + + it('should allow to customize the label of the false option', () => { + const { getByRole, getByText, container } = render( + ( + + )} + /> + ); + expect(container.querySelector('input').getAttribute('value')).toBe(''); + const select = getByRole('button'); + fireEvent.mouseDown(select); + expect(getByText('example false label')).not.toBeNull(); + }); + + it('should allow to customize the label of the true option', () => { + const { getByRole, getByText, container } = render( + ( + + )} + /> + ); + expect(container.querySelector('input').getAttribute('value')).toBe(''); + const select = getByRole('button'); + fireEvent.mouseDown(select); + expect(getByText('example true label')).not.toBeNull(); + }); }); diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx index 4ba630ec778..0fabd703a65 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx @@ -30,7 +30,12 @@ const getStringFromBoolean = (value?: boolean | null): string => { }; const NullableBooleanInput: FunctionComponent< - InputProps & Omit + InputProps & + Omit & { + nullLabel?: string; + falseLabel?: string; + trueLabel?: string; + } > = props => { const { className, @@ -43,12 +48,14 @@ const NullableBooleanInput: FunctionComponent< onChange, onFocus, options, - displayNull, parse = getBooleanFromString, resource, source, validate, variant = 'filled', + nullLabel = 'ra.boolean.null', + falseLabel = 'ra.boolean.false', + trueLabel = 'ra.boolean.true', ...rest } = props; const classes = useStyles(props); @@ -70,20 +77,6 @@ const NullableBooleanInput: FunctionComponent< validate, }); - const enhancedOptions = displayNull - ? { - ...options, - SelectProps: { - displayEmpty: true, - ...(options && options.SelectProps), - }, - InputLabelProps: { - shrink: true, - ...(options && options.InputLabelProps), - }, - } - : options; - return ( - {translate('ra.boolean.null')} - {translate('ra.boolean.false')} - {translate('ra.boolean.true')} + {translate(nullLabel)} + {translate(falseLabel)} + {translate(trueLabel)} ); }; @@ -123,6 +116,9 @@ NullableBooleanInput.propTypes = { options: PropTypes.object, resource: PropTypes.string, source: PropTypes.string, + nullLabel: PropTypes.string, + falseLabel: PropTypes.string, + trueLabel: PropTypes.string, }; export default NullableBooleanInput; From 5c48b1836184d049027ae3aa7ef6d24f888c2deb Mon Sep 17 00:00:00 2001 From: Ken Browning Date: Wed, 30 Sep 2020 11:52:49 -0700 Subject: [PATCH 2/3] fixup: respond to code review feedback --- docs/Inputs.md | 16 +++++++++++++++- .../src/input/NullableBooleanInput.tsx | 14 ++++++++------ 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/docs/Inputs.md b/docs/Inputs.md index 24f5564f94e..6829c6d2bab 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -450,7 +450,21 @@ import { NullableBooleanInput } from 'react-admin'; ![NullableBooleanInput](./img/nullable-boolean-input.png) -The labels of the options can be customized using the `nullLabel`, `falseLabel` and `trueLabel` properties. +The labels of the options can be customized for the entire application by overriding the translation. + +```jsx +import polyglotI18nProvider from 'ra-i18n-polyglot'; +import englishMessages from 'ra-language-english'; + +englishMessages.ra.boolean.null = 'Null label'; +englishMessages.ra.boolean.false = 'False label'; +englishMessages.ra.boolean.true = 'True label'; +const i18nProvider = polyglotI18nProvider(() => englishMessages, 'en'); + + +``` + +Additionally, individual instances of `NullableBooleanInput` may be customized by setting the `nullLabel`, `falseLabel` and `trueLabel` properties. Values specified for those properties will be translated by react-admin. ```jsx import { NullableBooleanInput } from 'react-admin'; diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx index 0fabd703a65..2b75c16897d 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx @@ -29,13 +29,15 @@ const getStringFromBoolean = (value?: boolean | null): string => { return ''; }; +export type NullableBooleanInputProps = InputProps & + Omit & { + nullLabel?: string; + falseLabel?: string; + trueLabel?: string; + }; + const NullableBooleanInput: FunctionComponent< - InputProps & - Omit & { - nullLabel?: string; - falseLabel?: string; - trueLabel?: string; - } + NullableBooleanInputProps > = props => { const { className, From 4f97ed58426a1eca7b68f2173bf050f0aad5899a Mon Sep 17 00:00:00 2001 From: Ken Browning Date: Wed, 30 Sep 2020 12:22:28 -0700 Subject: [PATCH 3/3] fixup: prettier --- packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx index 2b75c16897d..318b4ae6be7 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx @@ -36,9 +36,7 @@ export type NullableBooleanInputProps = InputProps & trueLabel?: string; }; -const NullableBooleanInput: FunctionComponent< - NullableBooleanInputProps -> = props => { +const NullableBooleanInput: FunctionComponent = props => { const { className, classes: classesOverride,