Merge pull request #147 from kpustakhod/onSelect-halfSelected-fix

Fix onSelect shows isHalfSelected = true for Branch Nodes

src/TreeView/constants.ts

@@ -22,3 +22,24 @@ export const nodeActions = {
 } as const;
 
 export const NODE_ACTIONS = Object.freeze(Object.values(nodeActions));
+
+export const treeTypes = {
+  collapse: "COLLAPSE",
+  collapseMany: "COLLAPSE_MANY",
+  expand: "EXPAND",
+  expandMany: "EXPAND_MANY",
+  halfSelect: "HALF_SELECT",
+  select: "SELECT",
+  deselect: "DESELECT",
+  toggle: "TOGGLE",
+  toggleSelect: "TOGGLE_SELECT",
+  changeSelectMany: "SELECT_MANY",
+  exclusiveChangeSelectMany: "EXCLUSIVE_CHANGE_SELECT_MANY",
+  focus: "FOCUS",
+  blur: "BLUR",
+  disable: "DISABLE",
+  enable: "ENABLE",
+  clearLastManuallyToggled: "CLEAR_MANUALLY_TOGGLED",
+  controlledSelectMany: "CONTROLLED_SELECT_MANY",
+  updateTreeStateWhenDataChanged: "UPDATE_TREE_STATE_WHEN_DATA_CHANGED",
+} as const;

src/TreeView/index.tsx

@@ -1,12 +1,7 @@
 import cx from "classnames";
 import PropTypes from "prop-types";
 import React, { useEffect, useReducer, useRef } from "react";
-import {
-  ITreeViewState,
-  treeReducer,
-  treeTypes,
-  TreeViewAction,
-} from "./reducer";
+import { ITreeViewState, treeReducer, TreeViewAction } from "./reducer";
 import {
   ClickActions,
   INode,
@@ -32,20 +27,20 @@ import {
   symmetricDifference,
   usePrevious,
   usePreviousData,
-  isBranchSelectedAndHasSelectedDescendants,
   getTreeParent,
   getTreeNode,
   validateTreeViewData,
   noop,
   isBranchNotSelectedAndHasOnlySelectedChild,
-  isBranchSelectedAndHasOnlySelectedChild,
+  getOnSelectTreeAction,
 } from "./utils";
 import { Node } from "./node";
 import {
   baseClassNames,
   clickActions,
   CLICK_ACTIONS,
   NODE_ACTIONS,
+  treeTypes,
 } from "./constants";
 
 interface IUseTreeProps {
@@ -102,7 +97,6 @@ const useTree = ({
 
   const {
     selectedIds,
-    controlledIds,
     expandedIds,
     disabledIds,
     tabbableId,
@@ -331,7 +325,7 @@ const useTree = ({
   //Update parent if a child changes
   useEffect(() => {
     if (propagateSelectUpwards) {
-      const idsToUpdate = new Set<NodeId>([...toggledIds, ...controlledIds]);
+      const idsToUpdate = new Set<NodeId>([...toggledIds]);
       if (
         lastInteractedWith &&
         lastAction !== treeTypes.focus &&
@@ -885,24 +879,9 @@ const handleKeyDown = ({
         return;
       }
 
-      const isSelectedAndHasSelectedDescendants = isBranchSelectedAndHasSelectedDescendants(
-        data,
-        element.id,
-        selectedIds
-      );
-
-      const isSelectedAndHasOnlySelectedChild = isBranchSelectedAndHasOnlySelectedChild(
-        data,
-        element.id,
-        selectedIds
-      );
-
       dispatch({
         type: togglableSelect
-          ? isSelectedAndHasSelectedDescendants &&
-            !isSelectedAndHasOnlySelectedChild
-            ? treeTypes.halfSelect
-            : treeTypes.toggleSelect
+          ? getOnSelectTreeAction(data, id, selectedIds, disabledIds)
           : treeTypes.select,
         id: id,
         multiSelect,

src/TreeView/node.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import cx from "classnames";
-import { ITreeViewState, treeTypes, TreeViewAction } from "./reducer";
+import { ITreeViewState, TreeViewAction } from "./reducer";
 import {
   ClickActions,
   EventCallback,
@@ -19,12 +19,11 @@ import {
   getDescendants,
   getTreeNode,
   isBranchNode,
-  isBranchSelectedAndHasOnlySelectedChild,
-  isBranchSelectedAndHasSelectedDescendants,
   noop,
   propagatedIds,
+  getOnSelectTreeAction,
 } from "./utils";
-import { baseClassNames, clickActions } from "./constants";
+import { baseClassNames, clickActions, treeTypes } from "./constants";
 
 export interface INodeProps {
   element: INode;
@@ -148,25 +147,10 @@ export const Node = (props: INodeProps) => {
         lastManuallyToggled: element.id,
       });
     } else if (event.ctrlKey || clickAction === clickActions.select) {
-      const isSelectedAndHasSelectedDescendants = isBranchSelectedAndHasSelectedDescendants(
-        data,
-        element.id,
-        selectedIds
-      );
-
-      const isSelectedAndHasOnlySelectedChild = isBranchSelectedAndHasOnlySelectedChild(
-        data,
-        element.id,
-        selectedIds
-      );
-
       //Select
       dispatch({
         type: togglableSelect
-          ? isSelectedAndHasSelectedDescendants &&
-            !isSelectedAndHasOnlySelectedChild
-            ? treeTypes.halfSelect
-            : treeTypes.toggleSelect
+          ? getOnSelectTreeAction(data, element.id, selectedIds, disabledIds)
           : treeTypes.select,
         id: element.id,
         multiSelect,

src/TreeView/reducer.ts

@@ -1,27 +1,7 @@
+import { treeTypes } from "./constants";
 import { NodeId } from "./types";
 import { difference } from "./utils";
 
-export const treeTypes = {
-  collapse: "COLLAPSE",
-  collapseMany: "COLLAPSE_MANY",
-  expand: "EXPAND",
-  expandMany: "EXPAND_MANY",
-  halfSelect: "HALF_SELECT",
-  select: "SELECT",
-  deselect: "DESELECT",
-  toggle: "TOGGLE",
-  toggleSelect: "TOGGLE_SELECT",
-  changeSelectMany: "SELECT_MANY",
-  exclusiveChangeSelectMany: "EXCLUSIVE_CHANGE_SELECT_MANY",
-  focus: "FOCUS",
-  blur: "BLUR",
-  disable: "DISABLE",
-  enable: "ENABLE",
-  clearLastManuallyToggled: "CLEAR_MANUALLY_TOGGLED",
-  controlledSelectMany: "CONTROLLED_SELECT_MANY",
-  updateTreeStateWhenDataChanged: "UPDATE_TREE_STATE_WHEN_DATA_CHANGED",
-} as const;
-
 export type TreeViewAction =
   | { type: "COLLAPSE"; id: NodeId; lastInteractedWith?: NodeId | null }
   | { type: "COLLAPSE_MANY"; ids: NodeId[]; lastInteractedWith?: NodeId | null }

src/TreeView/utils.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { EventCallback, INode, INodeRef, NodeId } from "./types";
+import { treeTypes } from "./constants";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export const noop = () => {};
@@ -413,17 +414,18 @@ export const isBranchSelectedAndHasSelectedDescendants = (
   );
 };
 
-export const isBranchNotSelectedAndHasAllSelectedDescendants = (
+export const isBranchSelectedAndHasAllSelectedEnabledDescendants = (
   data: INode[],
   elementId: NodeId,
-  selectedIds: Set<NodeId>
+  selectedIds: Set<NodeId>,
+  disabledIds: Set<NodeId>
 ) => {
+  const children = getDescendants(data, elementId, new Set<number>());
   return (
     isBranchNode(data, elementId) &&
-    !selectedIds.has(elementId) &&
-    getDescendants(data, elementId, new Set<number>()).every((item) =>
-      selectedIds.has(item)
-    )
+    selectedIds.has(elementId) &&
+    children.every((item) => selectedIds.has(item)) &&
+    children.every((item) => !disabledIds.has(item))
   );
 };
 
@@ -455,6 +457,47 @@ export const isBranchSelectedAndHasOnlySelectedChild = (
   );
 };
 
+export const getOnSelectTreeAction = (
+  data: INode[],
+  elementId: NodeId,
+  selectedIds: Set<NodeId>,
+  disabledIds: Set<NodeId>
+) => {
+  const isSelectedAndHasSelectedDescendants = isBranchSelectedAndHasSelectedDescendants(
+    data,
+    elementId,
+    selectedIds
+  );
+
+  const isSelectedAndHasOnlySelectedChild = isBranchSelectedAndHasOnlySelectedChild(
+    data,
+    elementId,
+    selectedIds
+  );
+
+  const isSelectedAndHasAllSelectedEnabledDescendants = isBranchSelectedAndHasAllSelectedEnabledDescendants(
+    data,
+    elementId,
+    selectedIds,
+    disabledIds
+  );
+
+  if (isSelectedAndHasAllSelectedEnabledDescendants) {
+    // current element is branch and has no disabled and all selected descendants
+    return treeTypes.toggleSelect;
+  } else if (
+    // current element is branch and has any number of selected descendants
+    // OR
+    // current element is branch and has only one selected child
+    isSelectedAndHasSelectedDescendants &&
+    !isSelectedAndHasOnlySelectedChild
+  ) {
+    return treeTypes.halfSelect;
+  }
+
+  return treeTypes.toggleSelect;
+};
+
 export const getTreeParent = (data: INode[]): INode => {
   const parentNode: INode | undefined = data.find(
     (node) => node.parent === null