feat: introduce disable multiselect (#279)

lukasbach · Jul 31, 2023 · ba56fbc · ba56fbc
1 parent fa12f13
commit ba56fbc
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 2 deletions.
diff --git a/next-release-notes.md b/next-release-notes.md
@@ -1,4 +1,5 @@
 ### Features
+- Introduce `disableMultiselect` property on uncontrolled tree environment (#279)
 
 ### Bug Fixes and Improvements
 - Fixes a bug where a state property is updated when the component is unmounted (#278)
diff --git a/packages/core/src/stories/BasicExamples.stories.tsx b/packages/core/src/stories/BasicExamples.stories.tsx
@@ -495,3 +495,33 @@ export const UnitTestTreeOpen = () => (
     <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
   </UncontrolledTreeEnvironment>
 );
+
+export const DisableMultiselect = () => (
+  <UncontrolledTreeEnvironment<string>
+    canDragAndDrop
+    canDropOnFolder
+    canReorderItems
+    disableMultiselect
+    dataProvider={
+      new StaticTreeDataProvider(longTree.items, (item, data) => ({
+        ...item,
+        data,
+      }))
+    }
+    getItemTitle={item => item.data}
+    viewState={{
+      'tree-1': {
+        expandedItems: [
+          'Fruit',
+          'Meals',
+          'America',
+          'Europe',
+          'Asia',
+          'Desserts',
+        ],
+      },
+    }}
+  >
+    <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
+  </UncontrolledTreeEnvironment>
+);
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -345,6 +345,7 @@ export interface UncontrolledTreeEnvironmentProps<
   liveDescriptors?: LiveDescriptors;
   getItemTitle: (item: TreeItem<T>) => string;
   children: JSX.Element | (JSX.Element | null)[] | null;
+  disableMultiselect?: boolean;
 }
 
 export interface TreeConfiguration {

diff --git a/packages/core/src/uncontrolledEnvironment/UncontrolledTreeEnvironment.tsx b/packages/core/src/uncontrolledEnvironment/UncontrolledTreeEnvironment.tsx
@@ -102,8 +102,15 @@ export const UncontrolledTreeEnvironment = React.forwardRef<
         props.onCollapseItem?.(item, treeId);
       }}
       onSelectItems={(items, treeId) => {
-        amendViewState(treeId, old => ({ ...old, selectedItems: items }));
-        props.onSelectItems?.(items, treeId);
+        amendViewState(treeId, old => {
+          if (props.disableMultiselect) {
+            const newSelected = old.focusedItem ? [old.focusedItem] : [];
+            props.onSelectItems?.(newSelected, treeId);
+            return { ...old, selectedItems: newSelected };
+          }
+          props.onSelectItems?.(items, treeId);
+          return { ...old, selectedItems: items };
+        });
       }}
       onFocusItem={(item, treeId) => {
         amendViewState(treeId, old => ({ ...old, focusedItem: item.index }));