Skip to content

Commit

Permalink
Maybe use old descendants?
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshwooding
joshwooding committed Jul 3, 2020
1 parent 724d98c commit e76c197
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 254 deletions.
12 changes: 3 additions & 9 deletions packages/material-ui-lab/src/TreeItem/TreeItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import Collapse from '@material-ui/core/Collapse';
import { fade, withStyles } from '@material-ui/core/styles';
import { useForkRef } from '@material-ui/core/utils';
import TreeViewContext from '../TreeView/TreeViewContext';
import { DescendantProvider, useDescendant } from '../TreeView/descendants';

Expand Down Expand Up @@ -122,14 +121,9 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
treeId,
} = React.useContext(TreeViewContext);

const nodeRef = React.useRef(null);
const contentRef = React.useRef(null);
const handleRef = useForkRef(nodeRef, ref);

const { index, parentId } = useDescendant({
element: nodeRef.current,
id: nodeId,
});
const { index, parentId } = useDescendant({ id: nodeId });

let icon = iconProp;

Expand Down Expand Up @@ -198,7 +192,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
if (registerNode && unregisterNode && index !== -1) {
registerNode({
id: nodeId,
index,
index: index.current,
parentId,
expandable,
});
Expand Down Expand Up @@ -241,7 +235,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
role="treeitem"
aria-expanded={expandable ? expanded : null}
aria-selected={ariaSelected}
ref={handleRef}
ref={ref}
id={`${treeId}-${nodeId}`}
{...other}
>
Expand Down
92 changes: 35 additions & 57 deletions packages/material-ui-lab/src/TreeView/TreeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {

const theme = useTheme();

const nodeMap = React.useRef({});
const [nodeMap, setNodeMap] = React.useState({});

const firstCharMap = React.useRef({});

Expand All @@ -90,14 +90,18 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
});

// Using Object.keys -> .map to mimic Object.values we should replace with Object.values() once we stop IE 11 support.
const getChildrenIds = (id) =>
Object.keys(nodeMap.current)
.map((key) => {
return nodeMap.current[key];
})
.filter((node) => node.parentId === id)
.sort((a, b) => a.index - b.index)
.map((child) => child.id);
const getChildrenIds = React.useCallback(
(id) =>
Object.keys(nodeMap)
.map((key) => {
return nodeMap[key];
})
.filter((node) => node.parentId === id)
.sort((a, b) => a.index - b.index)
.map((child) => child.id),
[nodeMap],
);

/*
* Status Helpers
*/
Expand All @@ -106,7 +110,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
[expanded],
);

const isExpandable = React.useCallback((id) => nodeMap.current[id].expandable, []);
const isExpandable = React.useCallback((id) => nodeMap[id].expandable, [nodeMap]);

const isSelected = React.useCallback(
(id) => (Array.isArray(selected) ? selected.indexOf(id) !== -1 : selected === id),
Expand All @@ -126,7 +130,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
}

// Try to get next sibling
const node = nodeMap.current[id];
const node = nodeMap[id];
const siblings = getChildrenIds(node.parentId);

const nextSibling = siblings[siblings.indexOf(id) + 1];
Expand All @@ -136,7 +140,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
}

// try to get parent's next sibling
const parent = nodeMap.current[node.parentId];
const parent = nodeMap[node.parentId];
if (parent) {
const parentSiblings = getChildrenIds(parent.parentId);
return parentSiblings[parentSiblings.indexOf(parent.id) + 1];
Expand All @@ -145,7 +149,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
};

const getPreviousNode = (id) => {
const node = nodeMap.current[id];
const node = nodeMap[id];
const siblings = getChildrenIds(node.parentId);
const nodeIndex = siblings.indexOf(id);

Expand All @@ -170,7 +174,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
return lastNode;
};
const getFirstNode = () => getChildrenIds(null)[0];
const getParent = (id) => nodeMap.current[id].parentId;
const getParent = (id) => nodeMap[id].parentId;

/**
* This is used to determine the start and end of a selection range so
Expand All @@ -191,8 +195,8 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
return [nodeAId, nodeBId];
}

const nodeA = nodeMap.current[nodeAId];
const nodeB = nodeMap.current[nodeBId];
const nodeA = nodeMap[nodeAId];
const nodeB = nodeMap[nodeBId];

if (nodeA.parentId === nodeB.id || nodeB.parentId === nodeA.id) {
return nodeB.parentId === nodeA.id ? [nodeA.id, nodeB.id] : [nodeB.id, nodeA.id];
Expand All @@ -216,7 +220,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
continueA = aAncestor !== null;
if (!aAncestorIsCommon && continueA) {
aAncestor = nodeMap.current[aAncestor].parentId;
aAncestor = nodeMap[aAncestor].parentId;
}
}

Expand All @@ -225,7 +229,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
continueB = bAncestor !== null;
if (!bAncestorIsCommon && continueB) {
bAncestor = nodeMap.current[bAncestor].parentId;
bAncestor = nodeMap[bAncestor].parentId;
}
}
}
Expand Down Expand Up @@ -284,7 +288,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
// This really only works since the ids are strings
Object.keys(firstCharMap.current).forEach((nodeId) => {
const firstChar = firstCharMap.current[nodeId];
const map = nodeMap.current[nodeId];
const map = nodeMap[nodeId];
const visible = map.parentId ? isExpanded(map.parentId) : true;

if (visible) {
Expand All @@ -295,7 +299,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {

// Get start index for search based on position of currentItem
start = firstCharIds.indexOf(id) + 1;
if (start === nodeMap.current.length) {
if (start >= firstCharIds.length) {
start = 0;
}

Expand Down Expand Up @@ -334,7 +338,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
};

const expandAllSiblings = (event, id) => {
const map = nodeMap.current[id];
const map = nodeMap[id];
const siblings = getChildrenIds(map.parentId);

const diff = siblings.filter((child) => isExpandable(child) && !isExpanded(child));
Expand Down Expand Up @@ -518,48 +522,22 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
*/
const registerNode = React.useCallback((node) => {
const { id, index, parentId, expandable } = node;
nodeMap.current[id] = { id, index, parentId, expandable };
}, []);

const getNodesToRemove = React.useCallback((id) => {
const map = nodeMap.current[id];
const nodes = [];
if (map) {
nodes.push(id);
const childNodes = getChildrenIds(id);
if (childNodes.length > 0) {
nodes.concat(childNodes);
childNodes.forEach((node) => {
nodes.concat(getNodesToRemove(node));
});
}
}
return nodes;
}, []);

const cleanUpFirstCharMap = React.useCallback((nodes) => {
const newMap = { ...firstCharMap.current };
nodes.forEach((node) => {
delete newMap[node];
});
firstCharMap.current = newMap;
}, []);

const cleanUpNodeMap = React.useCallback((nodes) => {
const newMap = { ...nodeMap.current };
nodes.forEach((node) => {
delete newMap[node];
setNodeMap((oldMap) => {
oldMap[id] = { id, index, parentId, expandable };
return oldMap;
});
nodeMap.current = newMap;
}, []);

const unregisterNode = React.useCallback(
(id) => {
delete nodeMap.current[id];
setNodeMap((oldNodeMap) => {
delete oldNodeMap[id];
return oldNodeMap;
});

setFocusedNodeId((oldFocusedNodeId) => {
if (
nodeMap.current[oldFocusedNodeId] === undefined &&
oldFocusedNodeId === id &&
treeRef.current === ownerDocument(treeRef.current).activeElement
) {
return getChildrenIds(null)[0];
Expand All @@ -583,7 +561,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
};

const handleNextArrow = (event) => {
if (nodeMap.current[focusedNodeId].expandable) {
if (nodeMap[focusedNodeId].expandable) {
if (isExpanded(focusedNodeId)) {
focusNextNode(event, focusedNodeId);
} else {
Expand Down Expand Up @@ -631,7 +609,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
event.stopPropagation();
break;
case 'Enter':
if (nodeMap.current[focusedNodeId].expandable) {
if (nodeMap[focusedNodeId].expandable) {
toggleExpansion(event);
flag = true;
}
Expand Down
Loading

0 comments on commit e76c197

Please sign in to comment.