From dd0ed065455a1833ae3a0329d6a970501d27e728 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 8 Jun 2024 01:43:09 +0900
Subject: [PATCH] refactor(cli): changed SearchBox component to support generic
 types

The SearchBox component in the CLI package now supports generic types, enhancing its flexibility. The onChange method now returns selected item details, instead of just returning the key. The SearchBox props have been modified to support the generic type T.
---
 packages/cli/src/components/SearchBox.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/cli/src/components/SearchBox.tsx b/packages/cli/src/components/SearchBox.tsx
index 6913bfb..5b80749 100644
--- a/packages/cli/src/components/SearchBox.tsx
+++ b/packages/cli/src/components/SearchBox.tsx
@@ -5,18 +5,18 @@ import {Divider} from './Divider.js'
 import Spinner from 'ink-spinner'
 import {Box, Text, useInput, useApp, type Key} from 'ink'
 
-export function SearchBox({
+export function SearchBox<T extends {key: string; displayName: string}>({
   components,
   helper,
   initialQuery,
   onKeyDown,
   onChange,
 }: {
-  components: {key: string; displayName: string}[]
+  components: T[]
   helper: string
   initialQuery?: string
   onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void
-  onChange?: (key: string) => void
+  onChange?: (item: T) => void
 }) {
   const [query, setQuery] = useState<string>(initialQuery ?? '')
   const [isLoading, setLoading] = useState<boolean>(false)
@@ -38,7 +38,10 @@ export function SearchBox({
   }, [query])
 
   useEffect(() => {
-    onChange?.(suggestions[selected])
+    if (onChange) {
+      const found = components.find(({key}) => key === suggestions[selected])
+      found && onChange(found)
+    }
   }, [selected, onChange])
 
   const app = useApp()