Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFR] Change to useStyles for TreeNode component #3570

Merged
merged 1 commit into from
Aug 22, 2019
Merged

[RFR] Change to useStyles for TreeNode component #3570

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 110 additions & 116 deletions packages/ra-tree-ui-materialui/src/TreeNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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),
Expand Down Expand Up @@ -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(
<div className={classes.root}>
<ListItem
button
classes={{
root: classNames({
[classes.node]: node.children.length > 0,
[classes.leaf]: node.children.length === 0,
[classes.draggingOver]: isOverCurrent,
}),
}}
dense
disableGutters
>
{node.children.length > 0 ? (
<TreeNodeWithChildren
key={`TreeNodeWithChildren${node.id}`}
basePath={basePath}
cancelDropOnChildren={!!itemType}
classes={classes}
closeNode={closeNode}
expandNode={expandNode}
getIsNodeExpanded={getIsNodeExpanded}
/*
return connectDropTarget(
<div className={classes.root}>
<ListItem
button
classes={{
root: classNames({
[classes.node]: node.children.length > 0,
[classes.leaf]: node.children.length === 0,
[classes.draggingOver]: isOverCurrent,
}),
}}
dense
disableGutters
>
{node.children.length > 0 ? (
<TreeNodeWithChildren
key={`TreeNodeWithChildren${node.id}`}
basePath={basePath}
cancelDropOnChildren={!!itemType}
classes={classes}
closeNode={closeNode}
expandNode={expandNode}
getIsNodeExpanded={getIsNodeExpanded}
/*
Override the isExpanded prop managed through redux on hover.
Set it to undefined when not hovering to fall back to redux state
so that it stay expanded if it was before
*/
isExpanded={isOver && canDrop ? true : undefined}
isExpanded={isOver && canDrop ? true : undefined}
node={node}
resource={resource}
treeNodeComponent={treeNodeComponent}
treeNodeWithChildrenComponent={TreeNodeWithChildren}
treeNodeContentComponent={TreeNodeContent}
toggleNode={toggleNode}
{...props}
>
{children}
</TreeNodeWithChildren>
) : (
<Fragment>
<TreeNodeContent
key={`TreeNodeContent_${node.id}`}
basePath={basePath}
node={node}
resource={resource}
treeNodeComponent={treeNodeComponent}
treeNodeWithChildrenComponent={TreeNodeWithChildren}
treeNodeContentComponent={TreeNodeContent}
toggleNode={toggleNode}
isLeaf={true}
cancelDropOnChildren={!!itemType}
onDrop={handleDrop}
classes={{
handle: classes.handle,
}}
{...props}
>
{children}
</TreeNodeWithChildren>
) : (
<Fragment>
<TreeNodeContent
key={`TreeNodeContent_${node.id}`}
basePath={basePath}
node={node}
resource={resource}
isLeaf={true}
cancelDropOnChildren={!!itemType}
onDrop={this.handleDrop}
classes={{
handle: classes.handle,
}}
{...props}
>
{children}
</TreeNodeContent>
</Fragment>
)}
</ListItem>
</div>
);
}
</TreeNodeContent>
</Fragment>
)}
</ListItem>
</div>
);
}

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;