geoffsee/yachtpit
1
0
Fork 0
mirror of https://github.com/seemueller-io/yachtpit.git synced 2025-09-08 22:46:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add key event handlers for search and result selection in App.tsx

Browse Source
This commit is contained in:
geoffsee
2025-07-21 16:41:56 -04:00
parent 6fadc296e4
commit 2383684acb
1 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
crates/base-map/map/src/App.tsx
View File

@@ -288,6 +288,7 @@ function App() {
}, []); }, []);
const handleSearchClick = useCallback(async () => { const handleSearchClick = useCallback(async () => {
console.log("calling hsc")
if (isSearchOpen && searchInput.length > 1) { if (isSearchOpen && searchInput.length > 1) {
try { try {
console.log(`Trying to geocode: ${searchInput}`); console.log(`Trying to geocode: ${searchInput}`);
@@ -433,6 +434,12 @@ function App() {
w="200px" w="200px"
transform={`translateX(${isSearchOpen ? "0" : "100%"})`} transform={`translateX(${isSearchOpen ? "0" : "100%"})`}
opacity={isSearchOpen ? 1 : 0} opacity={isSearchOpen ? 1 : 0}
onKeyDown={(e) => {
console.log(e);
if(e.key === 'Escape') {
setIsSearchOpen(false)
}
}}
backdropFilter="blur(10px)" backdropFilter="blur(10px)"
{...getNeumorphicStyle(colorMode as 'light' | 'dark', 'pressed')} {...getNeumorphicStyle(colorMode as 'light' | 'dark', 'pressed')}
> >
@@ -441,6 +448,12 @@ function App() {
size="sm" size="sm"
value={searchInput} value={searchInput}
onChange={e => setSearchInput(e.target.value)} onChange={e => setSearchInput(e.target.value)}
onKeyPress={async (e) => {
console.log(e);
if (e.key === 'Enter' && searchResults.length === 0 && searchInput.length > 2) {
await handleSearchClick()
}
}}
border="none" border="none"
{...getNeumorphicStyle(colorMode as 'light' | 'dark', 'pressed')} {...getNeumorphicStyle(colorMode as 'light' | 'dark', 'pressed')}
/> />
@@ -452,6 +465,7 @@ function App() {
w="200px" w="200px"
zIndex={2} zIndex={2}
mt={2} mt={2}
backdropFilter="blur(10px)" backdropFilter="blur(10px)"
{...getNeumorphicStyle(colorMode as 'light' | 'dark')} {...getNeumorphicStyle(colorMode as 'light' | 'dark')}
> >
@@ -464,6 +478,15 @@ function App() {
cursor="pointer" cursor="pointer"
borderRadius="8px" borderRadius="8px"
transition="all 0.2s ease-in-out" transition="all 0.2s ease-in-out"
onKeyPress={async (e) => {
console.log(e.key)
if (e.key === 'Enter' && searchResults.length > 0) {
console.log(`Selecting result ${result.lat}, ${result.lon}`);
await selectSearchResult(result);
setSearchResults([]);
setIsSearchOpen(false);
}
}}
_hover={{ _hover={{
bg: colors.accent + '20', bg: colors.accent + '20',
transform: 'translateY(-1px)', transform: 'translateY(-1px)',