From 43fa1667b11b3a5a32a83fdf38715a8960e82371 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Wed, 2 Dec 2020 21:14:29 +0100 Subject: [PATCH 1/2] Add support for disabled in ArrayInput Closes #5617 --- .../src/form/SimpleFormIterator.spec.tsx | 106 ++++++++++++++++++ .../src/form/SimpleFormIterator.tsx | 40 ++++--- .../ra-ui-materialui/src/input/ArrayInput.tsx | 2 + 3 files changed, 130 insertions(+), 18 deletions(-) diff --git a/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx b/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx index 40c1033b855..d0b4be4ff39 100644 --- a/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx +++ b/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx @@ -1,5 +1,6 @@ import { cleanup, fireEvent, wait, getByText } from '@testing-library/react'; import * as React from 'react'; +import expect from 'expect'; import { renderWithRedux, SaveContextProvider, @@ -29,6 +30,68 @@ describe('', () => { const saveContextValue = { save: jest.fn(), saving: false }; const sideEffectValue = {}; + it('should display one input group per row', () => { + const { queryAllByLabelText } = renderWithRedux( + + + + + + + + + + + + + + ); + const inputElements = queryAllByLabelText( + 'resources.undefined.fields.email' + ); + expect(inputElements).toHaveLength(2); + expect((inputElements[0] as HTMLInputElement).disabled).toBeFalsy(); + expect((inputElements[0] as HTMLInputElement).value).toBe('foo'); + expect((inputElements[1] as HTMLInputElement).disabled).toBeFalsy(); + expect((inputElements[1] as HTMLInputElement).value).toBe('bar'); + }); + + it('should render disabled inputs when disabled is true', () => { + const { queryAllByLabelText } = renderWithRedux( + + + + + + + + + + + + + + ); + const inputElements = queryAllByLabelText( + 'resources.undefined.fields.email' + ); + expect(inputElements).toHaveLength(2); + expect((inputElements[0] as HTMLInputElement).disabled).toBeTruthy(); + expect((inputElements[0] as HTMLInputElement).value).toBe('foo'); + expect((inputElements[1] as HTMLInputElement).disabled).toBeTruthy(); + expect((inputElements[1] as HTMLInputElement).value).toBe('bar'); + }); + it('should display an add item button at least', () => { const { getByText } = renderWithRedux( @@ -65,6 +128,24 @@ describe('', () => { expect(queryAllByText('ra.action.add').length).toBe(0); }); + it('should not display add button if disabled is truthy', () => { + const { queryAllByText } = renderWithRedux( + + + + + + + + + + + + ); + + expect(queryAllByText('ra.action.add').length).toBe(0); + }); + it('should not display remove button if disableRemove is truthy', () => { const { queryAllByText } = renderWithRedux( @@ -90,6 +171,31 @@ describe('', () => { expect(queryAllByText('ra.action.remove').length).toBe(0); }); + it('should not display remove button if disabled is truthy', () => { + const { queryAllByText } = renderWithRedux( + + + + + + + + + + + + + + ); + + expect(queryAllByText('ra.action.remove').length).toBe(0); + }); + it('should add children row on add button click', async () => { const { getByText, diff --git a/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx b/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx index dd77aa1d183..ce6991e27e2 100644 --- a/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx +++ b/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx @@ -105,6 +105,7 @@ const SimpleFormIterator: FC = props => { record, resource, source, + disabled, disableAdd, disableRemove, variant, @@ -220,6 +221,7 @@ const SimpleFormIterator: FC = props => { ? `resources.${resource}.fields.${input.props.source}` : undefined : input.props.label, + disabled, })} record={ (records && @@ -233,28 +235,29 @@ const SimpleFormIterator: FC = props => { ) : null )} - {!disableRemoveField( - (records && records[index]) || {}, - disableRemove - ) && ( - - {cloneElement(removeButton, { - onClick: handleRemoveButtonClick( - removeButton.props.onClick, - index - ), - className: classNames( - 'button-remove', - `button-remove-${source}-${index}` - ), - })} - - )} + {!disabled && + !disableRemoveField( + (records && records[index]) || {}, + disableRemove + ) && ( + + {cloneElement(removeButton, { + onClick: handleRemoveButtonClick( + removeButton.props.onClick, + index + ), + className: classNames( + 'button-remove', + `button-remove-${source}-${index}` + ), + })} + + )} ))} - {!disableAdd && ( + {!disabled && !disableAdd && (
  • {cloneElement(addButton, { @@ -307,6 +310,7 @@ export interface SimpleFormIteratorProps basePath?: string; className?: string; defaultValue?: any; + disabled?: boolean; disableAdd?: boolean; disableRemove?: boolean | DisableRemoveFunction; margin?: 'none' | 'normal' | 'dense'; diff --git a/packages/ra-ui-materialui/src/input/ArrayInput.tsx b/packages/ra-ui-materialui/src/input/ArrayInput.tsx index 40bab19a934..5369cd9f84d 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput.tsx @@ -58,6 +58,7 @@ const ArrayInput: FC = ({ source, validate, variant, + disabled, margin = 'dense', ...rest }) => { @@ -93,6 +94,7 @@ const ArrayInput: FC = ({ source, variant, margin, + disabled, })} ); From 2e159c78d9f46ffa7b0e4b6b388093435f05f1d6 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Wed, 2 Dec 2020 21:17:25 +0100 Subject: [PATCH 2/2] Update ArrayInputProps --- packages/ra-ui-materialui/src/input/ArrayInput.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ra-ui-materialui/src/input/ArrayInput.tsx b/packages/ra-ui-materialui/src/input/ArrayInput.tsx index 5369cd9f84d..1fc1fdcdc95 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput.tsx @@ -124,5 +124,6 @@ ArrayInput.defaultProps = { export interface ArrayInputProps extends InputProps { children: ReactElement; + disabled?: boolean; } export default ArrayInput;