manage selection when disabled with the TreeView

mui · Mar 23, 2020 · c52868c · c52868c
1 parent 72e2846
commit c52868c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 39 deletions.
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -122,7 +122,6 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     isSelected,
     isTabbable,
     multiSelect,
-    selectionDisabled,
     getParent,
     mapFirstChar,
     addNodeToNodeMap,
@@ -171,16 +170,14 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
       toggleExpansion(event, nodeId);
     }
 
-    if (!selectionDisabled) {
-      if (multiple) {
-        if (event.shiftKey) {
-          selectRange(event, { end: nodeId });
-        } else {
-          selectNode(event, nodeId, true);
-        }
+    if (multiple) {
+      if (event.shiftKey) {
+        selectRange(event, { end: nodeId });
       } else {
-        selectNode(event, nodeId);
+        selectNode(event, nodeId, true);
       }
+    } else {
+      selectNode(event, nodeId);
     }
 
     if (onClick) {
@@ -243,17 +240,13 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
 
     switch (key) {
       case ' ':
-        if (!selectionDisabled) {
-          if (nodeRef.current === event.currentTarget) {
-            if (multiSelect && event.shiftKey) {
-              selectRange(event, { end: nodeId });
-            } else if (multiSelect) {
-              selectNode(event, nodeId, true);
-            } else {
-              selectNode(event, nodeId);
-            }
-
-            flag = true;
+        if (nodeRef.current === event.currentTarget) {
+          if (multiSelect && event.shiftKey) {
+            flag = selectRange(event, { end: nodeId });
+          } else if (multiSelect) {
+            flag = selectNode(event, nodeId, true);
+          } else {
+            flag = selectNode(event, nodeId);
           }
         }
         event.stopPropagation();
@@ -266,14 +259,14 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
         event.stopPropagation();
         break;
       case 'ArrowDown':
-        if (multiSelect && event.shiftKey && !selectionDisabled) {
+        if (multiSelect && event.shiftKey) {
           selectNextNode(event, nodeId);
         }
         focusNextNode(nodeId);
         flag = true;
         break;
       case 'ArrowUp':
-        if (multiSelect && event.shiftKey && !selectionDisabled) {
+        if (multiSelect && event.shiftKey) {
           selectPreviousNode(event, nodeId);
         }
         focusPreviousNode(nodeId);
@@ -294,14 +287,14 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
         }
         break;
       case 'Home':
-        if (multiSelect && ctrlPressed && event.shiftKey && !selectionDisabled) {
+        if (multiSelect && ctrlPressed && event.shiftKey) {
           rangeSelectToFirst(event, nodeId);
         }
         focusFirstNode();
         flag = true;
         break;
       case 'End':
-        if (multiSelect && ctrlPressed && event.shiftKey && !selectionDisabled) {
+        if (multiSelect && ctrlPressed && event.shiftKey) {
           rangeSelectToLast(event, nodeId);
         }
         focusLastNode();
@@ -311,9 +304,8 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
         if (key === '*') {
           expandAllSiblings(event, nodeId);
           flag = true;
-        } else if (multiSelect && ctrlPressed && key.toLowerCase() === 'a' && !selectionDisabled) {
-          selectAllNodes(event);
-          flag = true;
+        } else if (multiSelect && ctrlPressed && key.toLowerCase() === 'a') {
+          flag = selectAllNodes(event);
         } else if (isPrintableCharacter(key)) {
           flag = printableCharacter(event, key);
         }

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -723,7 +723,7 @@ describe('<TreeItem />', () => {
 
           getByTestId('one').focus();
           fireEvent.keyDown(document.activeElement, { key: ' ' });
-          expect(getByTestId('one')).not.to.have.class('Mui-selected');
+          expect(getByTestId('one')).not.to.have.attribute('aria-selected');
         });
       });
 
@@ -748,7 +748,7 @@ describe('<TreeItem />', () => {
           );
 
           fireEvent.click(getByText('one'));
-          expect(getByTestId('one')).not.to.have.class('Mui-selected');
+          expect(getByTestId('one')).not.to.have.attribute('aria-selected');
         });
       });
     });

diff --git a/packages/material-ui-lab/src/TreeView/TreeView.js b/packages/material-ui-lab/src/TreeView/TreeView.js
@@ -320,7 +320,10 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
       lastSelectedNode.current = id;
       lastSelectionWasRange.current = false;
       currentRangeSelection.current = [];
+
+      return true;
     }
+    return false;
   };
 
   const selectRange = (event, nodes, stacked = false) => {
@@ -331,6 +334,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
       handleRangeSelect(event, { start, end });
     }
     lastSelectionWasRange.current = true;
+    return true;
   };
 
   const rangeSelectToFirst = (event, id) => {
@@ -340,7 +344,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
 
     const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;
 
-    selectRange(event, {
+    return selectRange(event, {
       start,
       end: getFirstNode(),
     });
@@ -353,7 +357,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
 
     const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;
 
-    selectRange(event, {
+    return selectRange(event, {
       start,
       end: getLastNode(),
     });
@@ -483,6 +487,10 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
     }
   }, [expanded, childrenCalculated, isExpanded]);
 
+  const noopSelection = () => {
+    return false;
+  };
+
   return (
     <TreeViewContext.Provider
       value={{
@@ -498,16 +506,15 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
         isExpanded,
         isFocused,
         isSelected,
-        selectNode,
-        selectRange,
-        selectNextNode,
-        selectPreviousNode,
-        rangeSelectToFirst,
-        rangeSelectToLast,
-        selectAllNodes,
+        selectNode: disableSelection ? noopSelection : selectNode,
+        selectRange: disableSelection ? noopSelection : selectRange,
+        selectNextNode: disableSelection ? noopSelection : selectNextNode,
+        selectPreviousNode: disableSelection ? noopSelection : selectPreviousNode,
+        rangeSelectToFirst: disableSelection ? noopSelection : rangeSelectToFirst,
+        rangeSelectToLast: disableSelection ? noopSelection : rangeSelectToLast,
+        selectAllNodes: disableSelection ? noopSelection : selectAllNodes,
         isTabbable,
         multiSelect,
-        selectionDisabled: disableSelection,
         getParent,
         mapFirstChar,
         addNodeToNodeMap,