[RFR] Migrate TextInput and LongTextInput to use useInput

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { addField } from 'ra-core';
-import { TextInput } from './TextInput';
+import TextInput from './TextInput';
 
 /**
  * @deprecated use <TextInput multiline /> instead
@@ -9,18 +8,12 @@ export const LongTextInput = props => {
     console.warn(
         'The LongTextInput component is deprecated. You should instead use the TextInput component and set its multiline and fullWidth props to true.'
     );
-
     return <TextInput {...props} />;
 };
 
 LongTextInput.defaultProps = {
     multiline: true,
-};
-
-const EnhancedLongTextInput = addField(LongTextInput);
-
-EnhancedLongTextInput.defaultProps = {
     fullWidth: true,
 };
 
-export default EnhancedLongTextInput;
+export default LongTextInput;

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

@@ -1,66 +1,84 @@
 import React from 'react';
-import assert from 'assert';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import { Form } from 'react-final-form';
+import { required } from 'ra-core';
 
-import { LongTextInput } from './LongTextInput';
+import LongTextInput from './LongTextInput';
 
 describe('<LongTextInput />', () => {
     afterEach(cleanup);
     const defaultProps = {
-        // We have to specify the id ourselves here because the
-        // TextInput is not wrapped inside a FormInput.
-        // This is needed to link the label to the input
-        id: 'foo',
-        source: 'foo',
-        resource: 'bar',
-        meta: {},
-        input: {
-            value: '',
-        },
-        onChange: jest.fn(),
+        source: 'body',
+        resource: 'posts',
     };
 
     it('should render the input as a textarea', () => {
         const { getByLabelText } = render(
-            <LongTextInput {...defaultProps} input={{ value: 'hello' }} />
+            <Form
+                initialValues={{ body: 'hello' }}
+                onSubmit={jest.fn}
+                render={() => <LongTextInput {...defaultProps} />}
+            />
         );
-        const TextFieldElement = getByLabelText('resources.bar.fields.foo');
-        assert.equal(TextFieldElement.tagName, 'TEXTAREA');
-        assert.equal(TextFieldElement.value, 'hello');
+        const input = getByLabelText('resources.posts.fields.body');
+        expect(input.tagName).toEqual('TEXTAREA');
+        expect(input.value).toEqual('hello');
     });
 
     describe('error message', () => {
         it('should not be displayed if field is pristine', () => {
             const { queryByText } = render(
-                <LongTextInput
-                    {...defaultProps}
-                    meta={{ touched: false, error: 'Required field.' }}
+                <Form
+                    onSubmit={jest.fn}
+                    render={() => (
+                        <LongTextInput
+                            {...defaultProps}
+                            validate={required()}
+                        />
+                    )}
                 />
             );
-            const error = queryByText('Required field.');
-            assert.ok(!error);
+            const error = queryByText('ra.validation.required');
+            expect(error).toBeNull();
         });
 
         it('should not be displayed if field has been touched but is valid', () => {
-            const { queryByText } = render(
-                <LongTextInput
-                    {...defaultProps}
-                    meta={{ touched: true, error: false }}
+            // Validator which always return undefined so the field is valid
+            const { getByLabelText, queryByText } = render(
+                <Form
+                    onSubmit={jest.fn}
+                    render={() => (
+                        <LongTextInput
+                            {...defaultProps}
+                            validate={required()}
+                        />
+                    )}
                 />
             );
-            const error = queryByText('Required field.');
-            assert.ok(!error);
+            const input = getByLabelText('resources.posts.fields.body *');
+            fireEvent.change(input, { target: { value: 'test' } });
+            fireEvent.blur(input);
+            const error = queryByText('ra.validation.required');
+            expect(error).toBeNull();
         });
 
         it('should be displayed if field has been touched and is invalid', () => {
-            const { getByText } = render(
-                <LongTextInput
-                    {...defaultProps}
-                    meta={{ touched: true, error: 'Required field.' }}
+            const { getByLabelText, queryByText } = render(
+                <Form
+                    validateOnBlur
+                    onSubmit={jest.fn}
+                    render={() => (
+                        <LongTextInput
+                            {...defaultProps}
+                            validate={required()}
+                        />
+                    )}
                 />
             );
-            const error = getByText('Required field.');
-            assert.ok(error);
+            const input = getByLabelText('resources.posts.fields.body *');
+            fireEvent.blur(input);
+            const error = queryByText('ra.validation.required');
+            expect(error).not.toBeNull();
         });
     });
 });

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

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { addField, FieldTitle } from 'ra-core';
+import { useInput, FieldTitle } from 'ra-core';
 
 import ResettableTextField from './ResettableTextField';
 import InputHelperText from './InputHelperText';
@@ -21,68 +21,45 @@ import sanitizeRestProps from './sanitizeRestProps';
  * The object passed as `options` props is passed to the <ResettableTextField> component
  */
 export const TextInput = ({
-    className,
-    input,
-    isRequired,
     label,
-    meta,
     options,
     resource,
     source,
-    type,
     helperText,
-    FormHelperTextProps,
     onBlur,
     onFocus,
     onChange,
+    validate,
     ...rest
 }) => {
-    const handleBlur = useCallback(
-        eventOrValue => {
-            onBlur(eventOrValue);
-            input.onBlur(eventOrValue);
-        },
-        [input, onBlur]
-    );
-
-    const handleFocus = useCallback(
-        event => {
-            onFocus(event);
-            input.onFocus(event);
-        },
-        [input, onFocus]
-    );
-
-    const handleChange = useCallback(
-        eventOrValue => {
-            onChange(eventOrValue);
-            input.onChange(eventOrValue);
-        },
-        [input, onChange]
-    );
-
-    if (typeof meta === 'undefined') {
-        throw new Error(
-            "The TextInput component wasn't called within a redux-form <Field>. Did you decorate it and forget to add the addField prop to your component? See https://marmelab.com/react-admin/Inputs.html#writing-your-own-input-component for details."
-        );
-    }
-    const { touched, error } = meta;
+    const {
+        id,
+        input,
+        isRequired,
+        meta: { error, touched },
+    } = useInput({
+        onBlur,
+        onChange,
+        onFocus,
+        resource,
+        source,
+        type: 'text',
+        validate,
+        ...rest,
+    });
 
     return (
         <ResettableTextField
+            id={id}
+            {...input}
             margin="normal"
-            type={type}
             label={
-                label === false ? (
-                    label
-                ) : (
-                    <FieldTitle
-                        label={label}
-                        source={source}
-                        resource={resource}
-                        isRequired={isRequired}
-                    />
-                )
+                <FieldTitle
+                    label={label}
+                    source={source}
+                    resource={resource}
+                    isRequired={isRequired}
+                />
             }
             error={!!(touched && error)}
             helperText={
@@ -92,39 +69,22 @@ export const TextInput = ({
                     helperText={helperText}
                 />
             }
-            className={className}
             {...options}
             {...sanitizeRestProps(rest)}
-            {...input}
-            onBlur={handleBlur}
-            onFocus={handleFocus}
-            onChange={handleChange}
         />
     );
 };
 
 TextInput.propTypes = {
     className: PropTypes.string,
-    input: PropTypes.object,
-    isRequired: PropTypes.bool,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    meta: PropTypes.object,
-    name: PropTypes.string,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func,
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,
-    type: PropTypes.string,
 };
 
 TextInput.defaultProps = {
-    onBlur: () => {},
-    onChange: () => {},
-    onFocus: () => {},
     options: {},
-    type: 'text',
 };
 
-export default addField(TextInput);
+export default TextInput;