diff --git a/packages/ra-tree-ui-materialui/src/TreeNode.js b/packages/ra-tree-ui-materialui/src/TreeNode.js index 3abba8d2e72..9f8648cdfba 100644 --- a/packages/ra-tree-ui-materialui/src/TreeNode.js +++ b/packages/ra-tree-ui-materialui/src/TreeNode.js @@ -1,10 +1,10 @@ -import React, { Fragment, Component } from 'react'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import ListItem from '@material-ui/core/ListItem'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ expandIcon: { margin: 0, left: -theme.spacing(6), @@ -71,132 +71,126 @@ const styles = theme => ({ draggingOver: { background: theme.palette.action.hover, }, -}); +})); -class TreeNode extends Component { - static propTypes = { - basePath: PropTypes.string.isRequired, - canDrop: PropTypes.bool, - children: PropTypes.node, - classes: PropTypes.object, - closeNode: PropTypes.func, - connectDropTarget: PropTypes.func, - expandNode: PropTypes.func, - getIsNodeExpanded: PropTypes.func, - isOver: PropTypes.bool, - isOverCurrent: PropTypes.bool, - itemType: PropTypes.string, - node: PropTypes.object.isRequired, - resource: PropTypes.string.isRequired, - toggleNode: PropTypes.func, - treeNodeComponent: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.func, - ]), - treeNodeContentComponent: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.func, - ]).isRequired, - treeNodeWithChildrenComponent: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.func, - ]), - }; - - static defaultProps = { - connectDropTarget: target => target, - }; - - handleDrop = event => { - if (this.props.isOver && this.props.canDrop) { - event.persit(); +function TreeNode({ + basePath, + canDrop, + children, + classes: classesOverride, + closeNode, + connectDropTarget, + expandNode, + getIsNodeExpanded, + isOver, + isOverCurrent, + itemType, + node, + resource, + treeNodeComponent, + treeNodeWithChildrenComponent: TreeNodeWithChildren, + treeNodeContentComponent: TreeNodeContent, + toggleNode, + ...props +}) { + const classes = useStyles({ classes: classesOverride }); + const handleDrop = event => { + if (isOver && canDrop) { + event.persist(); event.preventDefault(); } }; - render() { - const { - basePath, - canDrop, - children, - classes, - closeNode, - connectDropTarget, - expandNode, - getIsNodeExpanded, - isOver, - isOverCurrent, - itemType, - node, - resource, - treeNodeComponent, - treeNodeWithChildrenComponent: TreeNodeWithChildren, - treeNodeContentComponent: TreeNodeContent, - toggleNode, - ...props - } = this.props; - return connectDropTarget( -
- 0, - [classes.leaf]: node.children.length === 0, - [classes.draggingOver]: isOverCurrent, - }), - }} - dense - disableGutters - > - {node.children.length > 0 ? ( - + 0, + [classes.leaf]: node.children.length === 0, + [classes.draggingOver]: isOverCurrent, + }), + }} + dense + disableGutters + > + {node.children.length > 0 ? ( + + {children} + + ) : ( + + {children} - - ) : ( - - - {children} - - - )} - -
- ); - } + + + )} + + + ); } -export default withStyles(styles)(TreeNode); +TreeNode.propTypes = { + basePath: PropTypes.string.isRequired, + canDrop: PropTypes.bool, + children: PropTypes.node, + classes: PropTypes.object, + closeNode: PropTypes.func, + connectDropTarget: PropTypes.func, + expandNode: PropTypes.func, + getIsNodeExpanded: PropTypes.func, + isOver: PropTypes.bool, + isOverCurrent: PropTypes.bool, + itemType: PropTypes.string, + node: PropTypes.object.isRequired, + resource: PropTypes.string.isRequired, + toggleNode: PropTypes.func, + treeNodeComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), + treeNodeContentComponent: PropTypes.oneOfType([ + PropTypes.element, + PropTypes.func, + ]).isRequired, + treeNodeWithChildrenComponent: PropTypes.oneOfType([ + PropTypes.element, + PropTypes.func, + ]), +}; + +TreeNode.defaultProps = { + connectDropTarget: target => target, +}; +export default TreeNode;