feat(List): add auto submit to search (#1069)

mittwald · Dec 18, 2024 · 93bb0d6 · 93bb0d6
1 parent d7403d3
commit 93bb0d6
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/...s/components/src/components/List/components/Header/components/SearchField/SearchField.tsx b/...s/components/src/components/List/components/Header/components/SearchField/SearchField.tsx
@@ -1,5 +1,5 @@
 import type { FC, KeyboardEvent } from "react";
-import React, { createElement, useState } from "react";
+import React, { createElement, useEffect, useState } from "react";
 import type { PropsWithClassName } from "@/lib/types/props";
 import type { Search } from "@/components/List/model/search/Search";
 import type { SearchFieldRenderComponent } from "@/components/List/model/search/types";
@@ -10,11 +10,28 @@ interface Props extends PropsWithClassName {
   search: Search<never>;
 }
 
+const autoSubmitTimeout = 800;
+
 const DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {
-  const { className, onChange, value, ...searchFieldProps } = props;
+  const { className, onChange, value, autoSubmit, ...searchFieldProps } = props;
 
   const [searchString, setSearchString] = useState(value ?? "");
 
+  const submitSearch = () => {
+    if (searchString.trim() === "") {
+      onChange(undefined);
+    } else {
+      onChange(searchString);
+    }
+  };
+
+  useEffect(() => {
+    if (autoSubmit) {
+      const timeout = setTimeout(() => submitSearch(), autoSubmitTimeout);
+      return () => clearTimeout(timeout);
+    }
+  }, [searchString, autoSubmit]);
+
   useOnChange(value, () => {
     setSearchString(value ?? "");
   }, [searchString]);
@@ -26,11 +43,7 @@ const DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {
 
   const handleKeyPress = (e: KeyboardEvent) => {
     if (e.key === "Enter") {
-      if (searchString.trim() === "") {
-        onChange(undefined);
-      } else {
-        onChange(searchString);
-      }
+      submitSearch();
     } else if (e.key === "Escape") {
       clearSearch();
     }

diff --git a/packages/components/src/components/List/model/search/types.ts b/packages/components/src/components/List/model/search/types.ts
@@ -9,6 +9,7 @@ type SupportedSearchFieldProps = Pick<
 interface SearchFieldRenderProps extends SupportedSearchFieldProps {
   onChange: (value: SearchValue) => unknown;
   value: SearchValue;
+  autoSubmit?: boolean;
 }
 
 export type SearchFieldRenderComponent = ComponentType<SearchFieldRenderProps>;

diff --git a/packages/components/src/components/List/setupComponents/ListSearch.ts b/packages/components/src/components/List/setupComponents/ListSearch.ts
@@ -6,6 +6,7 @@ import type { ComponentType } from "react";
 
 type Props<T> = Omit<SearchShape<T>, "render" | "textFieldProps"> & {
   children?: SearchFieldRenderComponent;
+  autoSubmit?: boolean;
 } & SearchShape<T>["textFieldProps"];
 
 export function ListSearch<T = never>(ignoredProps: Props<T>) {

diff --git a/packages/components/src/components/List/stories/Default.stories.tsx b/packages/components/src/components/List/stories/Default.stories.tsx
@@ -71,7 +71,7 @@ const meta: Meta<typeof List> = {
             name="Typ"
             defaultSelected={["Domain"]}
           />
-          <DomainList.Search autoFocus />
+          <DomainList.Search autoFocus autoSubmit />
           <DomainList.Sorting property="domain" name="A-Z" />
           <DomainList.Sorting property="domain" name="Z-A" direction="desc" />
           <DomainList.Sorting property="type" name="Typ" defaultEnabled />

diff --git a/packages/docs/src/content/03-components/structure/list/overview.mdx b/packages/docs/src/content/03-components/structure/list/overview.mdx
@@ -27,6 +27,8 @@ Nutze `<List.Sorting />` innerhalb der List, um eine Sortiermethode anzulegen.
 
 Verwende `<List.Search />` innerhalb der List, um ein
 [SearchField](/03-components/form-controls/search-field) anzuzeigen.
+Standardmäßig wird die Suche bei Klick auf Enter gestartet. Um die Suche
+automatisch zu starten, kann das Property `autoSubmit` gesetzt werden.
 
 <LiveCodeEditor example="search" editorCollapsed />