[RFR] Convert BooleanInput to use useInput

cypress/integration/create.js

@@ -164,7 +164,7 @@ describe('Create Page', () => {
                 value: 'Test teaser',
             },
             {
-                type: 'input',
+                type: 'checkbox',
                 name: 'commentable',
                 value: 'false',
             },

packages/ra-core/src/form/index.ts

@@ -1,9 +1,10 @@
 import addField from './addField';
 import FormDataConsumer from './FormDataConsumer';
 import FormField from './FormField';
+import useInput from './useInput';
 import ValidationError from './ValidationError';
 
-export { addField, FormDataConsumer, FormField, ValidationError };
+export { addField, FormDataConsumer, FormField, useInput, ValidationError };
 export { isRequired } from './FormField';
 export * from './validate';
 export * from './constants';

packages/ra-ui-materialui/src/input/BooleanInput.js

@@ -1,88 +1,94 @@
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormGroup from '@material-ui/core/FormGroup';
 import Switch from '@material-ui/core/Switch';
-import { addField, FieldTitle } from 'ra-core';
+import { FieldTitle, useInput } from 'ra-core';
 
 import sanitizeRestProps from './sanitizeRestProps';
 import InputHelperText from './InputHelperText';
+import InputPropTypes from './InputPropTypes';
 
-export class BooleanInput extends Component {
-    handleChange = (event, value) => {
-        this.props.input.onChange(value);
-    };
+const BooleanInput = ({
+    label,
+    fullWidth,
+    helperText,
+    onBlur,
+    onChange,
+    onFocus,
+    options,
+    resource,
+    source,
+    validate,
+    ...rest
+}) => {
+    const {
+        id,
+        input: { onChange: finalFormOnChange, value, ...inputProps },
+        isRequired,
+        meta: { error, touched },
+    } = useInput({
+        onBlur,
+        onChange,
+        onFocus,
+        resource,
+        source,
+        type: 'checkbox',
+        validate,
+    });
 
-    render() {
-        const {
-            className,
-            id,
-            input,
-            isRequired,
-            label,
-            source,
-            resource,
-            options,
-            fullWidth,
-            meta,
-            helperText,
-            ...rest
-        } = this.props;
+    const handleChange = useCallback(
+        (event, value) => {
+            finalFormOnChange(value);
+        },
+        [finalFormOnChange]
+    );
 
-        const { value, ...inputProps } = input;
-        const { touched, error } = meta;
-
-        return (
-            <FormGroup className={className} {...sanitizeRestProps(rest)}>
-                <FormControlLabel
-                    htmlFor={id}
-                    control={
-                        <Switch
-                            id={id}
-                            color="primary"
-                            checked={!!value}
-                            onChange={this.handleChange}
-                            {...inputProps}
-                            {...options}
-                        />
-                    }
-                    label={
-                        <FieldTitle
-                            label={label}
-                            source={source}
-                            resource={resource}
-                            isRequired={isRequired}
-                        />
-                    }
-                />
-                {helperText || (touched && !!error) ? (
-                    <FormHelperText error={!!error}>
-                        <InputHelperText
-                            touched={touched}
-                            error={error}
-                            helperText={helperText}
-                        />
-                    </FormHelperText>
-                ) : null}
-            </FormGroup>
-        );
-    }
-}
+    return (
+        <FormGroup {...sanitizeRestProps(rest)}>
+            <FormControlLabel
+                htmlFor={id}
+                control={
+                    <Switch
+                        id={id}
+                        color="primary"
+                        checked={!!value}
+                        onChange={handleChange}
+                        {...inputProps}
+                        {...options}
+                    />
+                }
+                label={
+                    <FieldTitle
+                        label={label}
+                        source={source}
+                        resource={resource}
+                        isRequired={isRequired}
+                    />
+                }
+            />
+            {helperText || (touched && !!error) ? (
+                <FormHelperText error={!!error}>
+                    <InputHelperText
+                        touched={touched}
+                        error={error}
+                        helperText={helperText}
+                    />
+                </FormHelperText>
+            ) : null}
+        </FormGroup>
+    );
+};
 
 BooleanInput.propTypes = {
-    className: PropTypes.string,
-    id: PropTypes.string,
-    input: PropTypes.object,
-    isRequired: PropTypes.bool,
-    label: PropTypes.string,
-    resource: PropTypes.string,
-    source: PropTypes.string,
-    options: PropTypes.object,
+    ...InputPropTypes,
+    ...FormGroup.propTypes,
+    options: PropTypes.shape(Switch.propTypes),
 };
 
 BooleanInput.defaultProps = {
     options: {},
 };
 
-export default addField(BooleanInput);
+export default BooleanInput;

packages/ra-ui-materialui/src/input/BooleanInput.spec.js

@@ -1,56 +1,86 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import { Form } from 'react-final-form';
 
-import { BooleanInput } from './BooleanInput';
+import BooleanInput from './BooleanInput';
 
 describe('<BooleanInput />', () => {
     afterEach(cleanup);
 
     const defaultProps = {
-        id: 'bar',
-        resource: 'foo',
-        source: 'bar',
-        input: {},
-        meta: {},
+        resource: 'posts',
+        source: 'isPublished',
     };
 
     it('should render as a checkbox', () => {
-        const { getByLabelText } = render(<BooleanInput {...defaultProps} />);
-        expect(getByLabelText('resources.foo.fields.bar').type).toBe(
+        const { getByLabelText } = render(
+            <Form
+                onSubmit={jest.fn}
+                render={() => <BooleanInput {...defaultProps} />}
+            />
+        );
+        expect(getByLabelText('resources.posts.fields.isPublished').type).toBe(
             'checkbox'
         );
     });
 
     it('should be checked if the value is true', () => {
         const { getByLabelText } = render(
-            <BooleanInput {...defaultProps} input={{ value: true }} />
+            <Form
+                onSubmit={jest.fn}
+                initialValues={{ isPublished: true }}
+                render={() => <BooleanInput {...defaultProps} />}
+            />
         );
-        expect(getByLabelText('resources.foo.fields.bar').checked).toBe(true);
+        expect(
+            getByLabelText('resources.posts.fields.isPublished').checked
+        ).toBe(true);
     });
 
     it('should not be checked if the value is false', () => {
         const { getByLabelText } = render(
-            <BooleanInput {...defaultProps} input={{ value: false }} />
+            <Form
+                onSubmit={jest.fn}
+                initialValues={{ isPublished: false }}
+                render={() => <BooleanInput {...defaultProps} />}
+            />
         );
-        expect(getByLabelText('resources.foo.fields.bar').checked).toBe(false);
+        expect(
+            getByLabelText('resources.posts.fields.isPublished').checked
+        ).toBe(false);
     });
 
     it('should not be checked if the value is undefined', () => {
         const { getByLabelText } = render(
-            <BooleanInput {...defaultProps} input={{}} />
+            <Form
+                onSubmit={jest.fn}
+                render={() => <BooleanInput {...defaultProps} />}
+            />
         );
-        expect(getByLabelText('resources.foo.fields.bar').checked).toBe(false);
+        expect(
+            getByLabelText('resources.posts.fields.isPublished').checked
+        ).toBe(false);
     });
 
     it('should displays errors', () => {
-        const { queryAllByText } = render(
-            <BooleanInput
-                {...defaultProps}
-                source="foo"
-                input={{}}
-                meta={{ touched: true, error: 'foobar' }}
+        // This validator always returns an error
+        const validate = () => 'ra.validation.error';
+
+        const { getByLabelText, queryAllByText } = render(
+            <Form
+                onSubmit={jest.fn}
+                initialValues={{ isPublished: true }}
+                validateOnBlur
+                render={() => (
+                    <BooleanInput {...defaultProps} validate={validate} />
+                )}
             />
         );
-        expect(queryAllByText('foobar')).toHaveLength(1);
+        const input = getByLabelText('resources.posts.fields.isPublished');
+        fireEvent.click(input);
+        expect(input.checked).toBe(false);
+
+        fireEvent.blur(input);
+        expect(queryAllByText('ra.validation.error')).toHaveLength(1);
     });
 });

packages/ra-ui-materialui/src/input/InputPropTypes.ts

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+/**
+ * Common PropTypes for all react-admin inputs
+ */
+const InputPropTypes = {
+    label: PropTypes.string,
+    resource: PropTypes.string,
+    source: PropTypes.string,
+};
+
+export default InputPropTypes;