From b81d3d42b3ba62fe2177de22fa631d5bdf6e9229 Mon Sep 17 00:00:00 2001 From: jaytula Date: Thu, 22 Aug 2019 12:41:04 -0700 Subject: [PATCH 1/6] Change to useStyles for ResettableTextField component --- .../src/input/ResettableTextField.js | 176 +++++++++--------- 1 file changed, 85 insertions(+), 91 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.js b/packages/ra-ui-materialui/src/input/ResettableTextField.js index 213ce6c04e4..aba4c359b6b 100644 --- a/packages/ra-ui-materialui/src/input/ResettableTextField.js +++ b/packages/ra-ui-materialui/src/input/ResettableTextField.js @@ -1,16 +1,16 @@ -import React, { Component } from 'react'; +import React, { useState } 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 { translate } from 'ra-core'; -const styles = createStyles({ +const useStyles = makeStyles({ clearIcon: { height: 16, width: 0, @@ -30,107 +30,101 @@ const styles = createStyles({ /** * 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({ + translate, + classes: classesOverride, + clearAlwaysVisible, + InputProps, + value, + resettable, + disabled, + variant = 'filled', + margin = 'dense', + ...props +}) { + const [showClear, setShowClear] = useState(false); + const classes = useStyles({ classes: classesOverride }); - handleClickClearButton = event => { + const handleClickClearButton = event => { event.preventDefault(); - this.props.onChange(''); + props.onChange(''); }; - handleMouseDownClearButton = event => { + const handleMouseDownClearButton = event => { event.preventDefault(); }; - handleFocus = event => { - this.setState({ showClear: true }); - this.props.onFocus && this.props.onFocus(event); + const handleFocus = event => { + setShowClear(true); + props.onFocus && props.onFocus(event); }; - handleBlur = event => { - this.setState({ showClear: false }); - this.props.onBlur && this.props.onBlur(event); + const handleBlur = event => { + setShowClear(false); + props.onBlur && props.onBlur(event); }; - 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; + const { + clearButton, + clearIcon, + visibleClearButton, + visibleClearIcon, + ...restClasses + } = classes; - return ( - - + + - - - - ), - ...InputProps, - }} - disabled={disabled} - variant={variant} - margin={margin} - {...props} - onFocus={this.handleFocus} - onBlur={this.handleBlur} - /> - ); - } + /> + + + ), + ...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, + translate: PropTypes.func.isRequired, + value: PropTypes.any.isRequired, +}; + +export default translate(ResettableTextField); From 4a7ffbbb26037397f9f1befc89290fc03530dedb Mon Sep 17 00:00:00 2001 From: jaytula Date: Thu, 22 Aug 2019 12:45:53 -0700 Subject: [PATCH 2/6] Remove unused import of compose --- packages/ra-ui-materialui/src/input/ResettableTextField.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.js b/packages/ra-ui-materialui/src/input/ResettableTextField.js index aba4c359b6b..9944e2dff03 100644 --- a/packages/ra-ui-materialui/src/input/ResettableTextField.js +++ b/packages/ra-ui-materialui/src/input/ResettableTextField.js @@ -1,6 +1,5 @@ import React, { useState } 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'; From 58792aa32fe30110ee4c0d015a0e48de78ef4148 Mon Sep 17 00:00:00 2001 From: jaytula Date: Mon, 26 Aug 2019 08:32:28 -0700 Subject: [PATCH 3/6] Wrap event handlers in useCallback --- .../src/input/ResettableTextField.js | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.js b/packages/ra-ui-materialui/src/input/ResettableTextField.js index 9944e2dff03..db9022ff6dd 100644 --- a/packages/ra-ui-materialui/src/input/ResettableTextField.js +++ b/packages/ra-ui-materialui/src/input/ResettableTextField.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import InputAdornment from '@material-ui/core/InputAdornment'; @@ -44,24 +44,34 @@ function ResettableTextField({ const [showClear, setShowClear] = useState(false); const classes = useStyles({ classes: classesOverride }); - const handleClickClearButton = event => { - event.preventDefault(); - props.onChange(''); - }; + const { onChange, onFocus, onBlur } = props; + const handleClickClearButton = useCallback( + event => { + event.preventDefault(); + onChange(''); + }, + [onChange] + ); - const handleMouseDownClearButton = event => { + const handleMouseDownClearButton = useCallback(event => { event.preventDefault(); - }; + }, []); - const handleFocus = event => { - setShowClear(true); - props.onFocus && props.onFocus(event); - }; + const handleFocus = useCallback( + event => { + setShowClear(true); + onFocus && onFocus(event); + }, + [onFocus] + ); - const handleBlur = event => { - setShowClear(false); - props.onBlur && props.onBlur(event); - }; + const handleBlur = useCallback( + event => { + setShowClear(false); + onBlur && onBlur(event); + }, + [onBlur] + ); const { clearButton, From a9827c8055de74759a9b8293e45937156fe933de Mon Sep 17 00:00:00 2001 From: jaytula Date: Wed, 28 Aug 2019 07:54:02 -0700 Subject: [PATCH 4/6] Use useTranslate hook instead of translate HOC --- .../ra-ui-materialui/src/input/ResettableTextField.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.js b/packages/ra-ui-materialui/src/input/ResettableTextField.js index db9022ff6dd..cda58ad1dfb 100644 --- a/packages/ra-ui-materialui/src/input/ResettableTextField.js +++ b/packages/ra-ui-materialui/src/input/ResettableTextField.js @@ -6,8 +6,7 @@ import IconButton from '@material-ui/core/IconButton'; import MuiTextField from '@material-ui/core/TextField'; import { makeStyles } from '@material-ui/core/styles'; import ClearIcon from '@material-ui/icons/Clear'; - -import { translate } from 'ra-core'; +import { useTranslate } from 'react-admin'; const useStyles = makeStyles({ clearIcon: { @@ -30,7 +29,6 @@ const useStyles = makeStyles({ * An override of the default Material-UI TextField which is resettable */ function ResettableTextField({ - translate, classes: classesOverride, clearAlwaysVisible, InputProps, @@ -43,6 +41,7 @@ function ResettableTextField({ }) { const [showClear, setShowClear] = useState(false); const classes = useStyles({ classes: classesOverride }); + const translate = useTranslate(); const { onChange, onFocus, onBlur } = props; const handleClickClearButton = useCallback( @@ -132,8 +131,7 @@ ResettableTextField.propTypes = { onChange: PropTypes.func.isRequired, onFocus: PropTypes.func, resettable: PropTypes.bool, - translate: PropTypes.func.isRequired, value: PropTypes.any.isRequired, }; -export default translate(ResettableTextField); +export default ResettableTextField; From ba707da73ac1a14c469ad3c87aefeb3345191265 Mon Sep 17 00:00:00 2001 From: jaytula Date: Wed, 28 Aug 2019 08:57:18 -0700 Subject: [PATCH 5/6] Import useTranslate from ra-core --- packages/ra-ui-materialui/src/input/ResettableTextField.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.js b/packages/ra-ui-materialui/src/input/ResettableTextField.js index cda58ad1dfb..3dabc5730af 100644 --- a/packages/ra-ui-materialui/src/input/ResettableTextField.js +++ b/packages/ra-ui-materialui/src/input/ResettableTextField.js @@ -6,7 +6,7 @@ import IconButton from '@material-ui/core/IconButton'; import MuiTextField from '@material-ui/core/TextField'; import { makeStyles } from '@material-ui/core/styles'; import ClearIcon from '@material-ui/icons/Clear'; -import { useTranslate } from 'react-admin'; +import { useTranslate } from 'ra-core'; const useStyles = makeStyles({ clearIcon: { From ebbbe0418412e9b65ca1fa3972cb11279070f8b3 Mon Sep 17 00:00:00 2001 From: jaytula Date: Mon, 2 Sep 2019 09:37:52 -0700 Subject: [PATCH 6/6] Move handleMouseDownClearButton out of component --- .../ra-ui-materialui/src/input/ResettableTextField.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.js b/packages/ra-ui-materialui/src/input/ResettableTextField.js index 3dabc5730af..52480815605 100644 --- a/packages/ra-ui-materialui/src/input/ResettableTextField.js +++ b/packages/ra-ui-materialui/src/input/ResettableTextField.js @@ -25,6 +25,10 @@ const useStyles = makeStyles({ }, }); +const handleMouseDownClearButton = event => { + event.preventDefault(); +}; + /** * An override of the default Material-UI TextField which is resettable */ @@ -52,10 +56,6 @@ function ResettableTextField({ [onChange] ); - const handleMouseDownClearButton = useCallback(event => { - event.preventDefault(); - }, []); - const handleFocus = useCallback( event => { setShowClear(true);