From a19fa2212a022a2e18bec60b8aa3cbb35618164a Mon Sep 17 00:00:00 2001
From: Muhammad Ali <alihamuh@gmail.com>
Date: Mon, 5 Dec 2022 11:08:32 +0500
Subject: [PATCH] web: allow deselecting items using ctrl+click (#1433)

Signed-off-by: Muhammad Ali <alihamuh@gmail.com>
Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>
---
 apps/web/src/components/list-container/index.tsx   | 6 +++++-
 apps/web/src/components/list-item/index.js         | 2 +-
 apps/web/src/hooks/use-keyboard-list-navigation.ts | 1 -
 apps/web/src/stores/selection-store.js             | 4 ++++
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/list-container/index.tsx b/apps/web/src/components/list-container/index.tsx
index 20f5cfb8e..dc6d1be03 100644
--- a/apps/web/src/components/list-container/index.tsx
+++ b/apps/web/src/components/list-container/index.tsx
@@ -74,6 +74,7 @@ function ListContainer(props: ListContainerProps) {
 
   const [announcements, removeAnnouncement] = useAnnouncements();
   const setSelectedItems = useSelectionStore((store) => store.setSelectedItems);
+  const isSelected = useSelectionStore((store) => store.isSelected);
   const selectItem = useSelectionStore((store) => store.selectItem);
   const deselectItem = useSelectionStore((store) => store.deselectItem);
   const toggleSelection = useSelectionStore(
@@ -98,7 +99,10 @@ function ListContainer(props: ListContainerProps) {
     length: items.length,
     reset: () => toggleSelection(false),
     deselect: (index) => deselectItem(items[index]),
-    select: (index) => selectItem(items[index]),
+    select: (index) =>
+      isSelected(items[index])
+        ? deselectItem(items[index])
+        : selectItem(items[index]),
     bulkSelect: (indices) => setSelectedItems(indices.map((i) => items[i])),
     focusItemAt: (index) => {
       const item = items[index];
diff --git a/apps/web/src/components/list-item/index.js b/apps/web/src/components/list-item/index.js
index 666ef18b4..04a37e080 100644
--- a/apps/web/src/components/list-item/index.js
+++ b/apps/web/src/components/list-item/index.js
@@ -145,7 +145,7 @@ function ListItem(props) {
         }
       }}
       onClick={(e) => {
-        if (props.onClick) {
+        if (!e.metaKey && !e.shiftKey && !e.ctrlKey && props.onClick) {
           props.onClick();
         }
       }}
diff --git a/apps/web/src/hooks/use-keyboard-list-navigation.ts b/apps/web/src/hooks/use-keyboard-list-navigation.ts
index ea2f7292b..46ed2c820 100644
--- a/apps/web/src/hooks/use-keyboard-list-navigation.ts
+++ b/apps/web/src/hooks/use-keyboard-list-navigation.ts
@@ -52,7 +52,6 @@ export function useKeyboardListNavigation(
   } = options;
   const cursor = useRef(-1);
   const anchor = useRef(-1);
-
   // const { reset, select, deselect } = useSelection();
 
   const direction = useCallback(() => {
diff --git a/apps/web/src/stores/selection-store.js b/apps/web/src/stores/selection-store.js
index 0c3494883..79be69eae 100644
--- a/apps/web/src/stores/selection-store.js
+++ b/apps/web/src/stores/selection-store.js
@@ -57,6 +57,10 @@ class SelectionStore extends BaseStore {
     }
   };
 
+  isSelected = (item) => {
+    return this.get().selectedItems.indexOf(item) > -1;
+  };
+
   setSelectedItems = (items) => {
     this.set((state) => (state.selectedItems = items));
   };