feat(list): add customFilter property to support custom filtering logic

#6544
Esri · Dec 13, 2024 · a4bed4e · a4bed4e
1 parent 659a53e
commit a4bed4e
Showing 1 changed file with 38 additions and 15 deletions.
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
@@ -168,6 +168,24 @@ export class List
 
   @state() moveToItems: MoveTo[] = [];
 
+  @state() get hasActiveFilter(): boolean {
+    return (
+      this.filterEnabled &&
+      this.filterText &&
+      this.filteredItems.length !== this.visibleItems.length
+    );
+  }
+
+  @state() get showNoResultsContainer(): boolean {
+    return (
+      this.filterEnabled &&
+      this.filterText &&
+      this.hasFilterNoResults &&
+      this.visibleItems.length &&
+      !this.filteredItems.length
+    );
+  }
+
   // #endregion
 
   // #region Public Properties
@@ -187,6 +205,9 @@ export class List
   /** When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. */
   @property({ reflect: true }) filterEnabled = false;
 
+  /** todo */
+  @property() customFilter: (listItems: ListItem["el"][]) => ListItem["el"][];
+
   /** Specifies an accessible name for the filter input field. */
   @property({ reflect: true }) filterLabel: string;
 
@@ -711,13 +732,18 @@ export class List
   }
 
   private updateFilteredItems(): void {
-    const { visibleItems, filteredData, filterText } = this;
+    const { visibleItems, filteredData, filterText, customFilter } = this;
 
     const lastDescendantItems = visibleItems?.filter((listItem) =>
       visibleItems.every((li) => li === listItem || !listItem.contains(li)),
     );
 
-    const filteredItems = !filterText ? visibleItems || [] : filteredData.map((item) => item.el);
+    const filteredItems = !filterText
+      ? visibleItems || []
+      : customFilter
+        ? customFilter(visibleItems)
+        : filteredData.map((item) => item.el);
+
     const visibleParents = new WeakSet<HTMLElement>();
 
     lastDescendantItems.forEach((listItem) =>
@@ -785,12 +811,14 @@ export class List
   }
 
   private getItemData(): ItemData {
-    return this.listItems.map((item) => ({
-      label: item.label,
-      description: item.description,
-      metadata: item.metadata,
-      el: item,
-    }));
+    return this.customFilter
+      ? []
+      : this.listItems.map((item) => ({
+          label: item.label,
+          description: item.description,
+          metadata: item.metadata,
+          el: item,
+        }));
   }
 
   private updateGroupItems(): void {
@@ -994,11 +1022,9 @@ export class List
       filterEnabled,
       filterPlaceholder,
       filterText,
-      filteredItems,
       filterLabel,
       hasFilterActionsStart,
       hasFilterActionsEnd,
-      hasFilterNoResults,
       effectiveFilterProps,
     } = this;
     return (
@@ -1057,7 +1083,7 @@ export class List
           <div
             ariaLive="polite"
             data-test-id="no-results-container"
-            hidden={!(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length)}
+            hidden={!this.showNoResultsContainer}
           >
             <slot
               name={SLOTS.filterNoResults}
@@ -1076,9 +1102,6 @@ export class List
       parentListEl,
       messages: { _lang: effectiveLocale },
       numberingSystem,
-      filterEnabled,
-      filterText,
-      filteredData,
     } = this;
 
     numberStringFormatter.numberFormatOptions = {
@@ -1088,7 +1111,7 @@ export class List
 
     return !parentListEl ? (
       <div ariaLive="polite" class={CSS.assistiveText}>
-        {filterEnabled && filterText && filteredData?.length ? (
+        {this.hasActiveFilter ? (
           <div key="aria-filter-enabled">{messages.filterEnabled}</div>
         ) : null}
         <div key="aria-item-count">