Migrated BooleanInput

marmelab · Jun 19, 2019 · d954c91 · d954c91
1 parent ff210e9
commit d954c91
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 33 deletions.
diff --git a/packages/ra-ui-materialui/src/input/BooleanInput.js b/packages/ra-ui-materialui/src/input/BooleanInput.js
@@ -1,11 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import FormControl from '@material-ui/core/FormControl';
 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 sanitizeRestProps from './sanitizeRestProps';
+import InputHelperText from './InputHelperText';
 
 export class BooleanInput extends Component {
     handleChange = (event, value) => {
@@ -23,35 +26,49 @@ export class BooleanInput extends Component {
             resource,
             options,
             fullWidth,
+            helperText,
+            meta,
             ...rest
         } = this.props;
 
         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}
-                        />
-                    }
-                />
-            </FormGroup>
+            <FormControl className={className} {...sanitizeRestProps(rest)}>
+                <FormGroup>
+                    <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>
+                            <InputHelperText
+                                touched={touched}
+                                error={error}
+                                helperText={helperText}
+                            />
+                        </FormHelperText>
+                    ) : null}
+                </FormGroup>
+            </FormControl>
         );
     }
 }

diff --git a/packages/ra-ui-materialui/src/input/BooleanInput.spec.js b/packages/ra-ui-materialui/src/input/BooleanInput.spec.js
@@ -7,36 +7,38 @@ import { BooleanInput } from './BooleanInput';
 describe('<BooleanInput />', () => {
     afterEach(cleanup);
 
+    const defaultProps = {
+        id: 'bar',
+        resource: 'foo',
+        source: 'bar',
+        input: {},
+        meta: {},
+    };
+
     it('should render as a checkbox', () => {
-        const { getByLabelText } = render(
-            <BooleanInput resource="foo" source="bar" input={{}} />
-        );
+        const { getByLabelText } = render(<BooleanInput {...defaultProps} />);
         expect(getByLabelText('resources.foo.fields.bar').type).toBe(
             'checkbox'
         );
     });
 
     it('should be checked if the value is true', () => {
         const { getByLabelText } = render(
-            <BooleanInput resource="foo" source="bar" input={{ value: true }} />
+            <BooleanInput {...defaultProps} input={{ value: true }} />
         );
         expect(getByLabelText('resources.foo.fields.bar').checked).toBe(true);
     });
 
     it('should not be checked if the value is false', () => {
         const { getByLabelText } = render(
-            <BooleanInput
-                resource="foo"
-                source="bar"
-                input={{ value: false }}
-            />
+            <BooleanInput {...defaultProps} input={{ value: false }} />
         );
         expect(getByLabelText('resources.foo.fields.bar').checked).toBe(false);
     });
 
     it('should not be checked if the value is undefined', () => {
         const { getByLabelText } = render(
-            <BooleanInput resource="foo" source="bar" input={{}} />
+            <BooleanInput {...defaultProps} input={{}} />
         );
         expect(getByLabelText('resources.foo.fields.bar').checked).toBe(false);
     });