refactor(Picker): fixing selectAll logic with additional helper

livechat · Dec 12, 2023 · 0696dcc · 0696dcc
1 parent c414679
commit 0696dcc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/packages/react-components/src/components/Picker/Picker.tsx b/packages/react-components/src/components/Picker/Picker.tsx
@@ -23,7 +23,7 @@ import { PickerList } from './components/PickerList';
 import { PickerTrigger } from './components/PickerTrigger';
 import { PickerTriggerBody } from './components/PickerTriggerBody';
 import { SELECT_ALL_OPTION_KEY } from './constants';
-import { findIndicesWhere } from './helpers';
+import { findIndicesWhere, getNormalizedItems } from './helpers';
 import { IPickerListItem, IPickerProps } from './types';
 
 import styles from './Picker.module.scss';
@@ -157,18 +157,15 @@ export const Picker: React.FC<IPickerProps> = ({
       });
     } else {
       if (key === SELECT_ALL_OPTION_KEY) {
-        if (selectedKeys.length === items.length - 1) {
+        if (selectedKeys.length === getNormalizedItems(items).length) {
           setSelectedKeys(() => {
             onSelect(null);
 
             return [];
           });
         } else {
           setSelectedKeys(() => {
-            const newItems = items.filter(
-              ({ key, disabled, groupHeader }) =>
-                !(key === SELECT_ALL_OPTION_KEY || disabled || groupHeader)
-            );
+            const newItems = getNormalizedItems(items);
             onSelect(newItems);
 
             return newItems.map(({ key }) => key);

diff --git a/packages/react-components/src/components/Picker/components/PickerList.tsx b/packages/react-components/src/components/Picker/components/PickerList.tsx
@@ -9,6 +9,7 @@ import {
   ITEM_GAP_HEIGHT,
   SELECT_ALL_OPTION_KEY,
 } from '../constants';
+import { getNormalizedItems } from '../helpers';
 import { IPickerListItem } from '../types';
 
 import { PickerListItem } from './PickerListItem';
@@ -106,8 +107,7 @@ export const PickerList: React.FC<IPickerListProps> = ({
   const checkIfSelected = (key: string) =>
     selectedKeys.includes(key) ||
     (key === SELECT_ALL_OPTION_KEY &&
-      selectedKeys.length ===
-        options.filter(({ key }) => key !== SELECT_ALL_OPTION_KEY).length);
+      selectedKeys.length === getNormalizedItems(options).length);
 
   return (
     <FloatingFocusManager context={context} modal={false} initialFocus={-1}>

diff --git a/packages/react-components/src/components/Picker/helpers.ts b/packages/react-components/src/components/Picker/helpers.ts
@@ -1,3 +1,6 @@
+import { SELECT_ALL_OPTION_KEY } from './constants';
+import { IPickerListItem } from './types';
+
 export const findIndicesWhere = <T>(
   array: T[],
   predicate: (item: T) => boolean
@@ -11,3 +14,12 @@ export const findIndicesWhere = <T>(
 
   return indices;
 };
+
+export const getNormalizedItems = (
+  items: IPickerListItem[]
+): IPickerListItem[] => {
+  return items.filter(
+    ({ key, disabled, groupHeader }) =>
+      !(key === SELECT_ALL_OPTION_KEY || disabled || groupHeader)
+  );
+};