[RFR] Convert ResettableTextField component to useStyles

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

@@ -1,16 +1,14 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import compose from 'recompose/compose';
 import classNames from 'classnames';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import IconButton from '@material-ui/core/IconButton';
 import MuiTextField from '@material-ui/core/TextField';
-import { withStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import ClearIcon from '@material-ui/icons/Clear';
+import { useTranslate } from 'ra-core';
 
-import { translate } from 'ra-core';
-
-const styles = createStyles({
+const useStyles = makeStyles({
     clearIcon: {
         height: 16,
         width: 0,
@@ -27,110 +25,113 @@ const styles = createStyles({
     },
 });
 
+const handleMouseDownClearButton = event => {
+    event.preventDefault();
+};
+
 /**
  * An override of the default Material-UI TextField which is resettable
  */
-class ResettableTextField extends Component {
-    static propTypes = {
-        classes: PropTypes.object.isRequired,
-        clearAlwaysVisible: PropTypes.bool,
-        disabled: PropTypes.bool,
-        InputProps: PropTypes.object,
-        onBlur: PropTypes.func,
-        onChange: PropTypes.func.isRequired,
-        onFocus: PropTypes.func,
-        resettable: PropTypes.bool,
-        translate: PropTypes.func.isRequired,
-        value: PropTypes.any.isRequired,
-    };
-
-    state = { showClear: false };
+function ResettableTextField({
+    classes: classesOverride,
+    clearAlwaysVisible,
+    InputProps,
+    value,
+    resettable,
+    disabled,
+    variant = 'filled',
+    margin = 'dense',
+    ...props
+}) {
+    const [showClear, setShowClear] = useState(false);
+    const classes = useStyles({ classes: classesOverride });
+    const translate = useTranslate();
 
-    handleClickClearButton = event => {
-        event.preventDefault();
-        this.props.onChange('');
-    };
+    const { onChange, onFocus, onBlur } = props;
+    const handleClickClearButton = useCallback(
+        event => {
+            event.preventDefault();
+            onChange('');
+        },
+        [onChange]
+    );
 
-    handleMouseDownClearButton = event => {
-        event.preventDefault();
-    };
+    const handleFocus = useCallback(
+        event => {
+            setShowClear(true);
+            onFocus && onFocus(event);
+        },
+        [onFocus]
+    );
 
-    handleFocus = event => {
-        this.setState({ showClear: true });
-        this.props.onFocus && this.props.onFocus(event);
-    };
+    const handleBlur = useCallback(
+        event => {
+            setShowClear(false);
+            onBlur && onBlur(event);
+        },
+        [onBlur]
+    );
 
-    handleBlur = event => {
-        this.setState({ showClear: false });
-        this.props.onBlur && this.props.onBlur(event);
-    };
+    const {
+        clearButton,
+        clearIcon,
+        visibleClearButton,
+        visibleClearIcon,
+        ...restClasses
+    } = classes;
 
-    render() {
-        const {
-            translate,
-            classes,
-            clearAlwaysVisible,
-            InputProps,
-            value,
-            resettable,
-            disabled,
-            variant = 'filled',
-            margin = 'dense',
-            ...props
-        } = this.props;
-        const { showClear } = this.state;
-        const {
-            clearButton,
-            clearIcon,
-            visibleClearButton,
-            visibleClearIcon,
-            ...restClasses
-        } = classes;
-
-        return (
-            <MuiTextField
-                classes={restClasses}
-                value={value}
-                InputProps={{
-                    endAdornment: resettable && value && (
-                        <InputAdornment position="end">
-                            <IconButton
-                                className={classNames(clearButton, {
-                                    [visibleClearButton]:
+    return (
+        <MuiTextField
+            classes={restClasses}
+            value={value}
+            InputProps={{
+                endAdornment: resettable && value && (
+                    <InputAdornment position="end">
+                        <IconButton
+                            className={classNames(clearButton, {
+                                [visibleClearButton]:
+                                    clearAlwaysVisible || showClear,
+                            })}
+                            aria-label={translate(
+                                'ra.action.clear_input_value'
+                            )}
+                            title={translate('ra.action.clear_input_value')}
+                            disableRipple
+                            onClick={handleClickClearButton}
+                            onMouseDown={handleMouseDownClearButton}
+                            disabled={disabled}
+                        >
+                            <ClearIcon
+                                className={classNames(clearIcon, {
+                                    [visibleClearIcon]:
                                         clearAlwaysVisible || showClear,
                                 })}
-                                aria-label={translate(
-                                    'ra.action.clear_input_value'
-                                )}
-                                title={translate('ra.action.clear_input_value')}
-                                disableRipple
-                                onClick={this.handleClickClearButton}
-                                onMouseDown={this.handleMouseDownClearButton}
-                                disabled={disabled}
-                            >
-                                <ClearIcon
-                                    className={classNames(clearIcon, {
-                                        [visibleClearIcon]:
-                                            clearAlwaysVisible || showClear,
-                                    })}
-                                />
-                            </IconButton>
-                        </InputAdornment>
-                    ),
-                    ...InputProps,
-                }}
-                disabled={disabled}
-                variant={variant}
-                margin={margin}
-                {...props}
-                onFocus={this.handleFocus}
-                onBlur={this.handleBlur}
-            />
-        );
-    }
+                            />
+                        </IconButton>
+                    </InputAdornment>
+                ),
+                ...InputProps,
+            }}
+            disabled={disabled}
+            variant={variant}
+            margin={margin}
+            {...props}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+        />
+    );
 }
 
-export default compose(
-    translate,
-    withStyles(styles)
-)(ResettableTextField);
+ResettableTextField.propTypes = {
+    classes: PropTypes.object,
+    clearAlwaysVisible: PropTypes.bool,
+    disabled: PropTypes.bool,
+    InputProps: PropTypes.object,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
+    resettable: PropTypes.bool,
+    value: PropTypes.any.isRequired,
+};
+
+export default ResettableTextField;