vuuTypeahead api change (#1736)

Author: heswell

vuu-ui/packages/vuu-data-react/src/data-editing/get-data-item-edit-control.tsx

@@ -19,7 +19,10 @@ import { asTimeString } from "@vuu-ui/vuu-utils";
 
 export interface DataItemEditControlProps {
   InputProps?: Partial<InputProps>;
-  TypeaheadProps?: Pick<VuuTypeaheadInputProps, "highlightFirstSuggestion">;
+  TypeaheadProps?: Pick<
+    VuuTypeaheadInputProps,
+    "highlightFirstSuggestion" | "minCharacterCountToTriggerSuggestions"
+  >;
   className?: string;
   commitOnBlur?: boolean;
   commitWhenCleared?: boolean;

vuu-ui/packages/vuu-filters/src/column-filter/ColumnFilter.tsx

@@ -16,11 +16,13 @@ import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
 import { ForwardedRef, forwardRef, ReactElement } from "react";
 import { ColumnFilterHookProps, useColumnFilter } from "./useColumnFilter";
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { VuuTypeaheadInputHookProps } from "@vuu-ui/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeaheadInput";
 
 const classBase = "vuuColumnFilter";
 
 export interface ColumnFilterProps
   extends SegmentedButtonGroupProps,
+    Pick<VuuTypeaheadInputHookProps, "minCharacterCountToTriggerSuggestions">,
     ColumnFilterHookProps {
   /**
    * Display operator picker.
@@ -36,6 +38,7 @@ export const ColumnFilter = forwardRef(function ColumnFilter(
   {
     column,
     className,
+    minCharacterCountToTriggerSuggestions,
     onCommit: onCommitProp,
     operator = "=",
     showOperatorPicker = false,
@@ -104,6 +107,9 @@ export const ColumnFilter = forwardRef(function ColumnFilter(
       ) : null}
       {getDataItemEditControl({
         InputProps: { inputProps },
+        TypeaheadProps: {
+          minCharacterCountToTriggerSuggestions,
+        },
         commitOnBlur: false,
         commitWhenCleared: true,
         dataDescriptor: column,

vuu-ui/packages/vuu-filters/src/column-filter/useColumnFilter.ts

@@ -60,7 +60,7 @@ export type ColumnFilterHookProps = {
    * Filter value. Pair of values expected when operator is
    * 'between'
    */
-  value?: ColumnFilterValue;
+  value: ColumnFilterValue;
   /**
    * Filter change events.
    */

vuu-ui/packages/vuu-filters/src/filter-provider/FilterProvider.tsx

@@ -1,4 +1,4 @@
-import { FilterChangeHandler } from "@vuu-ui/vuu-filter-types";
+import { Filter, FilterChangeHandler } from "@vuu-ui/vuu-filter-types";
 import {
   createContext,
   ReactElement,
@@ -11,11 +11,21 @@ import { FilterMenuActionHandler } from "../filter-pill/FilterMenu";
 import { FilterDescriptor } from "../saved-filters/useSavedFilterPanel";
 import { FilterNamePrompt } from "../saved-filters/FilterNamePrompt";
 import { DeleteFilterPrompt } from "../saved-filters/DeleteFilterPrompt";
+import {
+  activateFilter,
+  findFilter,
+  insertOrReplaceFilter,
+  renameFilter,
+} from "./filter-descriptor-utils";
+
+const UNSAVED_FILTER = "unsaved-filter";
 
 export interface FilterContextProps {
   activeFilter: FilterDescriptor | undefined;
+  deleteFilter: (filterId: string) => void;
   saveFilter: (filter: FilterDescriptor) => void;
   savedFilters?: FilterDescriptor[];
+  // TODO do we need this ?
   onApplyFilter: FilterChangeHandler;
   onFilterMenuAction?: FilterMenuActionHandler;
   setActiveFilter: (filterId?: string) => void;
@@ -28,6 +38,11 @@ export const FilterContext = createContext<FilterContextProps>({
     console.warn(
       "[FilterContext] onApplyFilter, no FilterProvider has been configured",
     ),
+  deleteFilter: () =>
+    console.warn(
+      "[FilterContext] deleteFilter, no FilterProvider has been configured",
+    ),
+
   saveFilter: () =>
     console.warn(
       "[FilterContext] saveFilter, no FilterProvider has been configured",
@@ -53,20 +68,6 @@ export const FilterProvider = ({
     console.log("filter changed");
   }, []);
 
-  const findFilter = useCallback(
-    (filterId: string) => {
-      const filter = filterDescriptors.find(({ id }) => id === filterId);
-      if (filter) {
-        return filter;
-      } else {
-        throw Error(
-          `[FilterProvider] findFilter, filter not found ${filterId}`,
-        );
-      }
-    },
-    [filterDescriptors],
-  );
-
   const deleteFilter = useCallback(
     (filterId: string) => {
       setFilterDescriptors((filterDescriptors) => {
@@ -80,23 +81,14 @@ export const FilterProvider = ({
     [onFiltersSaved],
   );
 
-  const renameFilter = useCallback(
-    (filterId: string, filterName: string) => {
+  const applyNewName = useCallback(
+    (filterId: string, name: string) => {
       setFilterDescriptors((currentFilterDescriptors) => {
-        const newFilterDescriptors =
-          currentFilterDescriptors.map<FilterDescriptor>((f) => {
-            if (f.id === filterId) {
-              return {
-                ...f,
-                filter: {
-                  ...f.filter,
-                  name: filterName,
-                },
-              };
-            } else {
-              return f;
-            }
-          });
+        const newFilterDescriptors = renameFilter(
+          currentFilterDescriptors,
+          filterId,
+          name,
+        );
         onFiltersSaved?.(newFilterDescriptors);
         return newFilterDescriptors;
       });
@@ -115,13 +107,13 @@ export const FilterProvider = ({
           onConfirm={(name) => {
             setDialog(null);
             if (originalFilterName !== name) {
-              renameFilter(id, name);
+              applyNewName(id, name);
             }
           }}
         />,
       );
     },
-    [renameFilter],
+    [applyNewName],
   );
 
   const promptForConfirmationOfDelete = useCallback(
@@ -142,22 +134,26 @@ export const FilterProvider = ({
 
   const handleFilterMenuAction = useCallback<FilterMenuActionHandler>(
     (filterId, actionType) => {
-      const targetFilter = findFilter(filterId);
+      const targetFilter = findFilter(filterDescriptors, filterId);
       switch (actionType) {
         case "close":
-          console.log(`clode filter ${filterId}`);
+          console.log(`close filter ${filterId}`);
           break;
         case "edit":
           console.log(`edit filter ${filterId}`);
           break;
         case "remove":
-          promptForConfirmationOfDelete(targetFilter);
+          if (filterId === UNSAVED_FILTER) {
+            console.log("remove unsaved filter");
+          } else {
+            promptForConfirmationOfDelete(targetFilter);
+          }
           break;
         case "rename":
           return PromptForFilterName(targetFilter);
       }
     },
-    [findFilter, promptForConfirmationOfDelete, PromptForFilterName],
+    [filterDescriptors, promptForConfirmationOfDelete, PromptForFilterName],
   );
 
   const handleSaveFilter = useCallback(
@@ -179,38 +175,34 @@ export const FilterProvider = ({
     [onFiltersSaved],
   );
 
-  const setActiveFilter = useCallback(
-    (filterId?: string) => {
-      setFilterDescriptors((currentFilterDescriptors) => {
-        const targetFilter = filterId ? findFilter(filterId) : undefined;
-        const newFilterDescriptors =
-          currentFilterDescriptors.map<FilterDescriptor>((f) => {
-            if (f.id === filterId) {
-              return {
-                ...f,
-                active: !f.active,
-              };
-            } else if (!targetFilter?.active && f.active) {
-              return {
-                ...f,
-                active: false,
-              };
-            } else {
-              return f;
-            }
-          });
-        return newFilterDescriptors;
-      });
-    },
-    [findFilter],
-  );
+  /**
+   * Allows switching between saved filtere. ALternatively, an anonymous
+   * filter can be assigned. This is to allow for a dynamically created
+   * filter to be active.
+   */
+  const setActiveFilter = useCallback((filter?: string | Filter) => {
+    if (typeof filter === "string") {
+      setFilterDescriptors((currentFilterDescriptors) =>
+        activateFilter(currentFilterDescriptors, filter),
+      );
+    } else if (filter) {
+      setFilterDescriptors((currentFilterDescriptors) =>
+        insertOrReplaceFilter(currentFilterDescriptors, {
+          active: true,
+          filter,
+          id: UNSAVED_FILTER,
+        }),
+      );
+    }
+  }, []);
 
   return (
     <FilterContext.Provider
       value={{
         activeFilter: filterDescriptors.find((f) => f.active),
         onApplyFilter: handleApplyFilter,
         onFilterMenuAction: handleFilterMenuAction,
+        deleteFilter,
         saveFilter: handleSaveFilter,
         savedFilters: filterDescriptors,
         setActiveFilter,

vuu-ui/packages/vuu-filters/src/filter-provider/filter-descriptor-utils.ts

@@ -0,0 +1,88 @@
+import { FilterDescriptor } from "../saved-filters/useSavedFilterPanel";
+
+export function findFilter(
+  filterDescriptors: FilterDescriptor[],
+  filterId: string,
+  throwIfNotFound?: true,
+): FilterDescriptor;
+export function findFilter(
+  filterDescriptors: FilterDescriptor[],
+  filterId: string,
+  throwIfNotFound: false,
+): FilterDescriptor | undefined;
+export function findFilter(
+  filterDescriptors: FilterDescriptor[],
+  filterId: string,
+  throwIfNotFound = true,
+) {
+  const filter = filterDescriptors.find(({ id }) => id === filterId);
+  if (filter) {
+    return filter;
+  } else if (throwIfNotFound) {
+    throw Error(`[FilterProvider] findFilter, filter not found ${filterId}`);
+  }
+}
+
+export const deactivateFilter = (filterDescriptors: FilterDescriptor[]) =>
+  activateFilter(filterDescriptors, undefined);
+
+export const activateFilter = (
+  filterDescriptors: FilterDescriptor[],
+  activeFilterId?: string,
+) =>
+  filterDescriptors.map<FilterDescriptor>((f) => {
+    if (f.id === activeFilterId) {
+      return {
+        ...f,
+        active: !f.active,
+      };
+    } else if (f.active) {
+      return {
+        ...f,
+        active: false,
+      };
+    } else {
+      return f;
+    }
+  });
+
+export const insertOrReplaceFilter = (
+  filterDescriptors: FilterDescriptor[],
+  filterDescriptor: FilterDescriptor,
+) => {
+  if (!filterDescriptors.some(({ id }) => id === filterDescriptor.id)) {
+    return deactivateFilter(filterDescriptors).concat(filterDescriptor);
+  } else {
+    return filterDescriptors.map<FilterDescriptor>((f) => {
+      if (f.id === filterDescriptor.id) {
+        return filterDescriptor;
+      } else if (f.active) {
+        return {
+          ...f,
+          active: false,
+        };
+      } else {
+        return f;
+      }
+    });
+  }
+};
+
+export const renameFilter = (
+  filterDescriptors: FilterDescriptor[],
+  filterId: string,
+  name: string,
+) =>
+  filterDescriptors.map<FilterDescriptor>((f) => {
+    if (f.id === filterId) {
+      return {
+        ...f,
+        filter: {
+          ...f.filter,
+          name,
+        },
+      };
+    } else {
+      return f;
+    }
+  });

vuu-ui/packages/vuu-ui-controls/src/__tests__/__component__/vuu-typeahead-input/VuuTypeaheadInput.cy.tsx

@@ -2,6 +2,7 @@ import { LocalDataSourceProvider } from "@vuu-ui/vuu-data-test";
 import {
   CurrencyWithTypeaheadAllowFreeText,
   CurrencyWithTypeaheadDisallowFreeText,
+  ShowsSuggestionsNoTextRequired,
 } from "../../../../../../showcase/src/examples/UiControls/VuuTypeaheadInput.examples";
 import { CommitHandler } from "@vuu-ui/vuu-utils";
 
@@ -237,4 +238,24 @@ describe("VuuTypeaheadInput", () => {
         );
     });
   });
+  describe("Given a TypeaheadInput that shows suggestions with no text input", () => {
+    it("Then clicking the inut shows suggestions", () => {
+      cy.mount(
+        <LocalDataSourceProvider>
+          <ShowsSuggestionsNoTextRequired />
+        </LocalDataSourceProvider>,
+      );
+      cy.findByRole("combobox").realClick();
+      cy.findAllByRole("option").should("have.length", 5);
+    });
+    it("Then clicking the trigger shows suggestions", () => {
+      cy.mount(
+        <LocalDataSourceProvider>
+          <ShowsSuggestionsNoTextRequired />
+        </LocalDataSourceProvider>,
+      );
+      cy.findByRole("button", { name: "Show options" }).realClick();
+      cy.findAllByRole("option").should("have.length", 5);
+    });
+  });
 });