Add ArrowLeft and ArrowRight support

mui · Jun 10, 2019 · e9fd648 · e9fd648
1 parent d491977
commit e9fd648
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/packages/material-ui-lab/src/TreeNode/TreeNode.js b/packages/material-ui-lab/src/TreeNode/TreeNode.js
@@ -51,6 +51,7 @@ function TreeNode(props) {
     focusFirstNode,
     focusLastNode,
     isFocused,
+    handleLeftArrow,
   } = useTreeState();
   const [nodes, setNodes] = React.useState([]);
   const nodeRef = React.useRef(null);
@@ -125,6 +126,20 @@ function TreeNode(props) {
         focusPreviousNode(idProp);
         flag = true;
         break;
+      case 'ArrowRight':
+        if (expandable) {
+          if (expanded) {
+            focusNextNode(idProp);
+          } else {
+            toggle();
+          }
+        }
+        flag = true;
+        break;
+      case 'ArrowLeft':
+        handleLeftArrow(idProp);
+        flag = true;
+        break;
       case 'Home':
         focusFirstNode();
         flag = true;

diff --git a/packages/material-ui-lab/src/TreeView/TreeView.js b/packages/material-ui-lab/src/TreeView/TreeView.js
@@ -182,6 +182,17 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
     }
   };
 
+  const handleLeftArrow = id => {
+    if (isExpanded(id)) {
+      toggle(id);
+    } else {
+      const parent = nodeMap.current[id].parent;
+      if (parent) {
+        focus(parent.id);
+      }
+    }
+  };
+
   return (
     <TreeViewContext.Provider
       value={{
@@ -195,6 +206,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
         focusFirstNode,
         focusLastNode,
         isFocused,
+        handleLeftArrow,
       }}
     >
       <ul role="tree" className={classes.root} ref={ref} {...other}>