wip: add enableMultiselect boolean to select/deselect using Ctrl

wixplosives · Dec 9, 2024 · a91c7a3 · a91c7a3
1 parent 1953eda
commit a91c7a3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/components/src/hooks/use-id-based-event.ts b/packages/components/src/hooks/use-id-based-event.ts
@@ -2,15 +2,15 @@ import React, { useCallback } from 'react';
 import { getElementWithId } from '../common';
 
 export function useIdListener<EVType extends React.KeyboardEvent | React.MouseEvent>(
-    idSetter: (id: string | undefined, element?: Element) => void,
+    idSetter: (id: string | undefined, ev: EVType, element?: Element) => void,
 ): (ev: EVType) => any {
     return useCallback(
         (ev: EVType) => {
             if (!ev.currentTarget || !ev.target) {
                 return;
             }
             const res = getElementWithId(ev.target as Element, ev.currentTarget as unknown as Element);
-            idSetter(res?.id || undefined, res?.element);
+            idSetter(res?.id || undefined, ev, res?.element);
         },
         [idSetter],
     );

diff --git a/packages/components/src/list/list.tsx b/packages/components/src/list/list.tsx
@@ -51,12 +51,12 @@ export interface ListProps<T> {
     items: T[];
     ItemRenderer: React.ComponentType<ListItemProps<T>>;
     focusControl?: StateControls<string | undefined>;
-    // selectionControl?: StateControls<string | undefined>;
     selectionControl?: StateControls<string[]>;
     transmitKeyPress?: UseTransmit<React.KeyboardEventHandler>;
     onItemMount?: (item: T) => void;
     onItemUnmount?: (item: T) => void;
     disableKeyboard?: boolean;
+    enableMultiselect?: boolean;
 }
 
 export type List<T> = (props: ListProps<T>) => JSX.Element;
@@ -72,8 +72,10 @@ export function List<T, EL extends HTMLElement = HTMLDivElement>({
     onItemMount,
     onItemUnmount,
     disableKeyboard,
+    enableMultiselect = true,
 }: ListProps<T>): JSX.Element {
     const [selectedIds, setSelectedIds] = useStateControls(selectionControl, []);
+    console.log('selectedIds: ', JSON.stringify(selectedIds));
     const [focusedId, setFocusedId] = useStateControls(focusControl, undefined);
     const [prevSelectedId, setPrevSelectedId] = useState(selectedIds);
     if (selectedIds !== prevSelectedId) {
@@ -84,11 +86,19 @@ export function List<T, EL extends HTMLElement = HTMLDivElement>({
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const actualRef = listRoot?.props?.ref || defaultRef;
 
-    const onClick = useIdListener((id) => {
+    const onClick = useIdListener((id, ev) => {
+        const isCtrlPressed = ev.ctrlKey || ev.metaKey;
         if (selectedIds.findIndex((selectedId) => selectedId === id) !== -1) {
+            if (enableMultiselect && isCtrlPressed) {
+                setSelectedIds(selectedIds.filter((selectedId) => selectedId !== id));
+            }
             return;
         }
-        setSelectedIds(id ? [id] : []);
+        if (id) {
+            setSelectedIds(enableMultiselect && isCtrlPressed ? [...selectedIds, id] : [id]);
+        } else {
+            setSelectedIds([]);
+        }
     });
 
     const onKeyPress = disableKeyboard