From e7d325a611bfb7711700ebfe6f53352552c927bf Mon Sep 17 00:00:00 2001 From: jaytula Date: Fri, 23 Aug 2019 22:58:46 -0700 Subject: [PATCH 1/4] Convert NodeForm component to useStyles --- .../ra-tree-ui-materialui/src/NodeForm.js | 187 +++++++++--------- 1 file changed, 89 insertions(+), 98 deletions(-) diff --git a/packages/ra-tree-ui-materialui/src/NodeForm.js b/packages/ra-tree-ui-materialui/src/NodeForm.js index 56a7cefb055..542fce3b857 100644 --- a/packages/ra-tree-ui-materialui/src/NodeForm.js +++ b/packages/ra-tree-ui-materialui/src/NodeForm.js @@ -1,8 +1,7 @@ -import React, { cloneElement, Children, Component } from 'react'; +import React, { cloneElement, Children } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import compose from 'recompose/compose'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import { Form } from 'react-final-form'; import { crudUpdate as crudUpdateAction, @@ -11,13 +10,13 @@ import { import NodeFormActions from './NodeFormActions'; -const styles = { +const useStyles = makeStyles({ root: { alignItems: 'center', display: 'flex', flexGrow: 1, }, -}; +}); const sanitizeRestProps = ({ anyTouched, @@ -71,30 +70,24 @@ const sanitizeRestProps = ({ validate, ...props }) => props; -class NodeForm extends Component { - static propTypes = { - actions: PropTypes.node, - basePath: PropTypes.string.isRequired, - cancelDropOnChildren: PropTypes.bool, - children: PropTypes.node, - classes: PropTypes.object, - dispatchCrudUpdate: PropTypes.func.isRequired, - handleSubmit: PropTypes.func.isRequired, - invalid: PropTypes.bool, - node: PropTypes.object.isRequired, - pristine: PropTypes.bool, - resource: PropTypes.string.isRequired, - saving: PropTypes.bool, - startUndoable: PropTypes.func.isRequired, - submitOnEnter: PropTypes.bool, - undoable: PropTypes.bool, - }; - static defaultProps = { - actions: , - }; +function NodeForm({ + actions, + basePath, + children, + classes: classesOverride, + handleSubmit: handleSubmitProp, + invalid, + node, + pristine, + resource, + saving, + submitOnEnter = true, + ...props +}) { + const classes = useStyles({ classes: classesOverride }); - handleClick = event => { + const handleClick = event => { event.persist(); // This ensure clicking on an input or button does not collapse/expand a node // When clicking on the form (empty spaces around inputs) however, it should @@ -104,25 +97,22 @@ class NodeForm extends Component { } }; - handleDrop = event => { + const handleDrop = event => { event.persist(); - if (this.props.cancelDropOnChildren) { + if (props.cancelDropOnChildren) { event.preventDefault(); } }; - handleSubmit = () => { + const handleSubmit = () => { const { - basePath, dispatchCrudUpdate, - handleSubmit, node: { record }, - resource, startUndoable, undoable = true, - } = this.props; + } = props; - return handleSubmit(values => + return handleSubmitProp(values => undoable ? startUndoable( crudUpdateAction( @@ -145,74 +135,75 @@ class NodeForm extends Component { ); }; - render() { - const { - actions, - basePath, - children, - classes, - handleSubmit, - invalid, - node, - pristine, - resource, - saving, - submitOnEnter = true, - ...props - } = this.props; - - return ( -
( - - {Children.map(children, field => - field - ? cloneElement(field, { - basePath: - field.props.basePath || basePath, - onDrop: this.handleDrop, - record: node.record, - resource, - }) - : null - )} - {actions && - cloneElement(actions, { - basePath, - record: node.record, - resource, - handleSubmit: this.handleSubmit, - handleSubmitWithRedirect: this.handleSubmit, - invalid, - pristine, - saving, - submitOnEnter, - })} -
- )} - /> - ); - } + return ( +
( + + {Children.map(children, field => + field + ? cloneElement(field, { + basePath: field.props.basePath || basePath, + onDrop: handleDrop, + record: node.record, + resource, + }) + : null + )} + {actions && + cloneElement(actions, { + basePath, + record: node.record, + resource, + handleSubmit: handleSubmit, + handleSubmitWithRedirect: handleSubmit, + invalid, + pristine, + saving, + submitOnEnter, + })} +
+ )} + /> + ); } +NodeForm.propTypes = { + actions: PropTypes.node, + basePath: PropTypes.string.isRequired, + cancelDropOnChildren: PropTypes.bool, + children: PropTypes.node, + classes: PropTypes.object, + dispatchCrudUpdate: PropTypes.func.isRequired, + handleSubmit: PropTypes.func.isRequired, + invalid: PropTypes.bool, + node: PropTypes.object.isRequired, + pristine: PropTypes.bool, + resource: PropTypes.string.isRequired, + saving: PropTypes.bool, + startUndoable: PropTypes.func.isRequired, + submitOnEnter: PropTypes.bool, + undoable: PropTypes.bool, +}; + +NodeForm.defaultProps = { + actions: , +}; + const mapStateToProps = (state, { node }) => ({ initialValues: node.record, record: node.record, }); -export default compose( - connect( - mapStateToProps, - { - dispatchCrudUpdate: crudUpdateAction, - startUndoable: startUndoableAction, - } - ), - withStyles(styles) +export default connect( + mapStateToProps, + { + dispatchCrudUpdate: crudUpdateAction, + startUndoable: startUndoableAction, + } )(NodeForm); From 6188b6a1fb86146f53fe9e764ea9e862ef1a0ac2 Mon Sep 17 00:00:00 2001 From: jaytula Date: Mon, 26 Aug 2019 08:51:51 -0700 Subject: [PATCH 2/4] Wrap handleClick and handleDrop in useCallback --- .../ra-tree-ui-materialui/src/NodeForm.js | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/ra-tree-ui-materialui/src/NodeForm.js b/packages/ra-tree-ui-materialui/src/NodeForm.js index 542fce3b857..b77082395cb 100644 --- a/packages/ra-tree-ui-materialui/src/NodeForm.js +++ b/packages/ra-tree-ui-materialui/src/NodeForm.js @@ -1,4 +1,4 @@ -import React, { cloneElement, Children } from 'react'; +import React, { cloneElement, Children, useCallback } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; @@ -87,7 +87,7 @@ function NodeForm({ }) { const classes = useStyles({ classes: classesOverride }); - const handleClick = event => { + const handleClick = useCallback(event => { event.persist(); // This ensure clicking on an input or button does not collapse/expand a node // When clicking on the form (empty spaces around inputs) however, it should @@ -95,14 +95,18 @@ function NodeForm({ if (event.target.tagName.toLowerCase() !== 'form') { event.stopPropagation(); } - }; + }, []); - const handleDrop = event => { - event.persist(); - if (props.cancelDropOnChildren) { - event.preventDefault(); - } - }; + const { cancelDropOnChildren } = props; + const handleDrop = useCallback( + event => { + event.persist(); + if (cancelDropOnChildren) { + event.preventDefault(); + } + }, + [cancelDropOnChildren] + ); const handleSubmit = () => { const { From f204e07953885c0b0ecc17d5aeb9f6001d510a0e Mon Sep 17 00:00:00 2001 From: jaytula Date: Mon, 26 Aug 2019 09:26:11 -0700 Subject: [PATCH 3/4] Wrap handleSubmit in useCallback --- packages/ra-tree-ui-materialui/src/NodeForm.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ra-tree-ui-materialui/src/NodeForm.js b/packages/ra-tree-ui-materialui/src/NodeForm.js index b77082395cb..c7333033d0d 100644 --- a/packages/ra-tree-ui-materialui/src/NodeForm.js +++ b/packages/ra-tree-ui-materialui/src/NodeForm.js @@ -108,7 +108,7 @@ function NodeForm({ [cancelDropOnChildren] ); - const handleSubmit = () => { + const handleSubmit = useCallback(() => { const { dispatchCrudUpdate, node: { record }, @@ -137,7 +137,7 @@ function NodeForm({ false ) ); - }; + }, [basePath, handleSubmitProp, resource, props]); return (
Date: Mon, 26 Aug 2019 09:29:23 -0700 Subject: [PATCH 4/4] Destructure props outside of handleSubmit --- .../ra-tree-ui-materialui/src/NodeForm.js | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/ra-tree-ui-materialui/src/NodeForm.js b/packages/ra-tree-ui-materialui/src/NodeForm.js index c7333033d0d..13f3e6afd7f 100644 --- a/packages/ra-tree-ui-materialui/src/NodeForm.js +++ b/packages/ra-tree-ui-materialui/src/NodeForm.js @@ -108,14 +108,13 @@ function NodeForm({ [cancelDropOnChildren] ); + const { + dispatchCrudUpdate, + node: { record }, + startUndoable, + undoable = true, + } = props; const handleSubmit = useCallback(() => { - const { - dispatchCrudUpdate, - node: { record }, - startUndoable, - undoable = true, - } = props; - return handleSubmitProp(values => undoable ? startUndoable( @@ -137,7 +136,15 @@ function NodeForm({ false ) ); - }, [basePath, handleSubmitProp, resource, props]); + }, [ + basePath, + handleSubmitProp, + resource, + dispatchCrudUpdate, + record, + startUndoable, + undoable, + ]); return (