diff --git a/src/renderer/components/DatabaseTable/DatabaseSelection.tsx b/src/renderer/components/DatabaseTable/DatabaseSelection.tsx index 78d2add..538bde8 100644 --- a/src/renderer/components/DatabaseTable/DatabaseSelection.tsx +++ b/src/renderer/components/DatabaseTable/DatabaseSelection.tsx @@ -7,6 +7,7 @@ import Modal from '../Modal'; import ListView from '../ListView'; import Button from '../Button'; import { useSqlExecute } from 'renderer/contexts/SqlExecuteProvider'; +import TextField from '../TextField'; interface DatabaseSelectionModalProps { open: boolean; @@ -31,9 +32,16 @@ function DatabaseSelectionModal({ const [selectedDatabase, setSelectedDatabase] = useState( currentDatabase || undefined ); + const [searchTerm, setSearchTerm] = useState(''); const { common } = useSqlExecute(); + const filteredDatabaseList = useMemo(() => { + return databaseList.filter(database => + database.toLowerCase().includes(searchTerm.toLowerCase()) + ); + }, [databaseList, searchTerm]); + const openDatabase = useCallback( (databaseName: string) => { if (databaseName !== currentDatabase && databaseName) { @@ -59,23 +67,34 @@ function DatabaseSelectionModal({ return ( +
+ setSearchTerm(value)} + /> +
- setSelectedDatabase(item)} - items={databaseList} - onDoubleClick={(item) => { - openDatabase(item); - }} - extractMeta={(database) => ({ - text: database, - key: database, - icon: , - })} - /> + {filteredDatabaseList.length === 0 ? ( +

No matching databases found.

+ ) : ( + setSelectedDatabase(item)} + items={filteredDatabaseList} + onDoubleClick={(item) => { + openDatabase(item); + }} + extractMeta={(database) => ({ + text: database, + key: database, + icon: , + })} + /> + )}
diff --git a/src/renderer/components/DatabaseTable/styles.module.scss b/src/renderer/components/DatabaseTable/styles.module.scss index 4eebaac..5092d5d 100644 --- a/src/renderer/components/DatabaseTable/styles.module.scss +++ b/src/renderer/components/DatabaseTable/styles.module.scss @@ -46,3 +46,12 @@ border-radius: 50%; animation: ping 1s ease-out infinite; } + +.searchContainer { + margin-bottom: 10px; +} + +.noResultsText { + margin: 10px 10px 0; + opacity: 0.75; +} diff --git a/src/renderer/components/TextField/index.tsx b/src/renderer/components/TextField/index.tsx index d9a00b9..e5bcf2c 100644 --- a/src/renderer/components/TextField/index.tsx +++ b/src/renderer/components/TextField/index.tsx @@ -2,7 +2,7 @@ import { ReactElement } from 'react'; import styles from './styles.module.scss'; interface TextFieldProps { - label: string; + label?: string; value?: string; autoFocus?: boolean; placeholder?: string;