feat(FilterGroup): disabled options

lumada-design · Feb 21, 2024 · 6bd17f1 · 6bd17f1
1 parent ffdc673
commit 6bd17f1
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 36 deletions.
diff --git a/packages/core/src/FilterGroup/Counter/Counter.tsx b/packages/core/src/FilterGroup/Counter/Counter.tsx
@@ -1,9 +1,7 @@
 import { useContext } from "react";
 
 import { ExtractNames } from "../../utils/classes";
-
 import { useDefaultProps } from "../../hooks/useDefaultProps";
-
 import { HvFilterGroupContext } from "../FilterGroupContext";
 import { staticClasses, useClasses } from "./Counter.styles";
 import { HvFilterGroupFilters, HvFilterGroupValue } from "../types";

diff --git a/packages/core/src/FilterGroup/FilterContent/FilterContent.tsx b/packages/core/src/FilterGroup/FilterContent/FilterContent.tsx
@@ -1,5 +1,4 @@
 import { forwardRef, useContext, useMemo, useRef, useState } from "react";
-
 import { Filters } from "@hitachivantara/uikit-react-icons";
 
 import { useTheme } from "../../hooks/useTheme";
@@ -10,9 +9,7 @@ import { HvFormStatus } from "../../Forms";
 import { HvTypography } from "../../Typography";
 import { ExtractNames } from "../../utils/classes";
 import { setId } from "../../utils/setId";
-
 import { useDefaultProps } from "../../hooks/useDefaultProps";
-
 import { HvFilterGroupValue, HvFilterGroupHorizontalPlacement } from "../types";
 import { staticClasses, useClasses } from "./FilterContent.styles";
 import { HvFilterGroupContext } from "../FilterGroupContext";

diff --git a/packages/core/src/FilterGroup/FilterGroup.tsx b/packages/core/src/FilterGroup/FilterGroup.tsx
@@ -14,7 +14,6 @@ import { useControlled } from "../hooks/useControlled";
 import { ExtractNames } from "../utils/classes";
 import { setId } from "../utils/setId";
 import { useDefaultProps } from "../hooks/useDefaultProps";
-
 import {
   HvFilterGroupContent,
   HvFilterGroupContentProps,

diff --git a/packages/core/src/FilterGroup/FilterGroupContext.tsx b/packages/core/src/FilterGroup/FilterGroupContext.tsx
@@ -7,13 +7,10 @@ import {
   useMemo,
   useState,
 } from "react";
-
 import isEqual from "lodash/isEqual";
 
 import { useDefaultProps } from "../hooks/useDefaultProps";
-
 import { useSavedState } from "../utils/useSavedState";
-
 import { HvFilterGroupFilters, HvFilterGroupValue } from "./types";
 
 interface HvFilterGroupContextValue {

diff --git a/packages/core/src/FilterGroup/LeftPanel/LeftPanel.tsx b/packages/core/src/FilterGroup/LeftPanel/LeftPanel.tsx
@@ -5,7 +5,6 @@ import { HvPanel } from "../../Panel";
 import { ExtractNames } from "../../utils/classes";
 import { setId } from "../../utils/setId";
 import { wrapperTooltip } from "../../utils/wrapperTooltip";
-
 import { HvFilterGroupCounter } from "../Counter";
 import { HvFilterGroupContext } from "../FilterGroupContext";
 import { staticClasses, useClasses } from "./LeftPanel.styles";

diff --git a/packages/core/src/FilterGroup/RightPanel/RightPanel.tsx b/packages/core/src/FilterGroup/RightPanel/RightPanel.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-
 import cloneDeep from "lodash/cloneDeep";
 
 import { HvCheckBox } from "../../CheckBox";
@@ -9,7 +8,6 @@ import { HvPanel } from "../../Panel";
 import { HvTypography } from "../../Typography";
 import { ExtractNames } from "../../utils/classes";
 import { setId } from "../../utils/setId";
-
 import { HvFilterGroupContext } from "../FilterGroupContext";
 import { staticClasses, useClasses } from "./RightPanel.styles";
 
@@ -48,22 +46,27 @@ export const HvFilterGroupRightPanel = ({
     activeGroup,
   } = useContext(HvFilterGroupContext);
 
-  const activeGroupOptions = useMemo(
-    () =>
-      filterOptions[activeGroup]?.data
-        .filter((option) =>
-          option.name.toLowerCase().includes(searchStr.toLowerCase())
-        )
-        .map((option) => option.id) || [],
-    [filterOptions, activeGroup, searchStr]
-  );
+  const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } =
+    useMemo(() => {
+      const filteredOptions = filterOptions[activeGroup]?.data.filter(
+        (option) => option.name.toLowerCase().includes(searchStr.toLowerCase())
+      );
+
+      return {
+        all: filteredOptions.map((option) => option.id) || [],
+        enabled:
+          filteredOptions
+            .filter((option) => !option.disabled)
+            .map((option) => option.id) || [],
+      };
+    }, [filterOptions, activeGroup, searchStr]);
 
   const activeFilterValues = useMemo(
     () =>
       filterValues[activeGroup]?.filter((value) =>
-        activeGroupOptions.includes(value)
+        allActiveGroupOptions.includes(value)
       ) || [],
-    [filterValues, activeGroupOptions, activeGroup]
+    [filterValues, allActiveGroupOptions, activeGroup]
   );
 
   const listValues = useMemo(
@@ -81,11 +84,11 @@ export const HvFilterGroupRightPanel = ({
   const updateSelectAll = useCallback(() => {
     const nbrSelected = activeFilterValues?.length;
     const hasSelection = nbrSelected > 0;
-    const allSelect = nbrSelected === activeGroupOptions.length;
+    const allSelect = nbrSelected === allActiveGroupOptions.length;
 
     setAnySelected(hasSelection);
     setAllSelected(hasSelection && allSelect);
-  }, [activeFilterValues, activeGroupOptions]);
+  }, [activeFilterValues, allActiveGroupOptions]);
 
   useEffect(() => {
     updateSelectAll();
@@ -108,30 +111,25 @@ export const HvFilterGroupRightPanel = ({
     if (anySelected) {
       if (searchStr !== "") {
         newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(
-          (value) => !activeGroupOptions.includes(value)
+          (value) => !enabledActiveGroupOptions.includes(value)
         );
       } else {
         newFilterValues[activeGroup] = [];
       }
     } else {
-      newFilterValues[activeGroup] = [...activeGroupOptions];
+      newFilterValues[activeGroup] = [...enabledActiveGroupOptions];
     }
 
     setFilterValues(newFilterValues);
   }, [
     activeGroup,
-    activeGroupOptions,
+    enabledActiveGroupOptions,
     anySelected,
     filterValues,
     setFilterValues,
     searchStr,
   ]);
 
-  /**
-   * Create selectAll component.
-   *
-   * @returns {*}
-   */
   const SelectAll = useCallback(() => {
     const nbrSelected = activeFilterValues?.length;
 
@@ -140,12 +138,12 @@ export const HvFilterGroupRightPanel = ({
         {nbrSelected > 0 ? (
           <>
             <b>{nbrSelected}</b>
-            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}
+            {` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`}
           </>
         ) : (
           <>
             <b>{labels?.selectAll}</b>
-            {` (${activeGroupOptions.length})`}
+            {` (${allActiveGroupOptions.length})`}
           </>
         )}
       </HvTypography>
@@ -165,7 +163,7 @@ export const HvFilterGroupRightPanel = ({
     );
   }, [
     activeFilterValues?.length,
-    activeGroupOptions.length,
+    allActiveGroupOptions.length,
     allSelected,
     anySelected,
     handleSelectAll,

diff --git a/packages/core/src/FilterGroup/types.ts b/packages/core/src/FilterGroup/types.ts
@@ -4,6 +4,7 @@ export type HvFilterGroupFilters = {
   data: {
     id: string | number;
     name: string;
+    disabled?: boolean;
   }[];
 }[];