p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cli): update SearchBox component

Browse Source 
In the SearchBox component, a new onSubmit prop has been added for user's search input handling. The UI has also been updated: changed border styles, introduced color changes based on selection and added placeholder for search input.
This commit is contained in:
p-sw 2024-06-08 01:55:07 +09:00
parent dd0ed06545
commit d2a457d1c8
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/cli/src/components/SearchBox.tsx
View File

@ -11,12 +11,14 @@ export function SearchBox<T extends {key: string; displayName: string}>({
initialQuery, initialQuery,
onKeyDown, onKeyDown,
onChange, onChange,
onSubmit,
}: { }: {
components: T[] components: T[]
helper: string helper: string
initialQuery?: string initialQuery?: string
onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void
onChange?: (item: T) => void onChange?: (item: T) => void
onSubmit?: (value: string) => void
}) { }) {
const [query, setQuery] = useState<string>(initialQuery ?? '') const [query, setQuery] = useState<string>(initialQuery ?? '')
const [isLoading, setLoading] = useState<boolean>(false) const [isLoading, setLoading] = useState<boolean>(false)
@ -57,23 +59,23 @@ export function SearchBox<T extends {key: string; displayName: string}>({
}) })
return ( return (
<Box width={50} display={'flex'} flexDirection={'column'} columnGap={4}> <Box width={50} display={'flex'} flexDirection={'column'}>
<Text color={'gray'}>{helper}</Text> <Text color={'gray'}>{helper}</Text>
<Box display={'flex'} flexDirection={'row'} borderStyle={'double'}> <Box display={'flex'} flexDirection={'row'}>
<Box marginRight={2}> <Box marginRight={2} display={'flex'} flexDirection={'row'}>
<Text color={'greenBright'}>?</Text> <Text color={'greenBright'}>Search?</Text>
</Box> </Box>
<Input value={query} onChange={(v) => setQuery(v)} /> <Input value={query} onChange={(v) => setQuery(v)} showCursor placeholder={'query'} onSubmit={onSubmit} />
</Box> </Box>
<Divider title={isLoading ? 'Loading...' : `${suggestions.length} components found.`} /> <Divider title={isLoading ? 'Loading...' : `${suggestions.length} components found.`} />
{isLoading ? ( {isLoading ? (
<Spinner /> <Spinner />
) : ( ) : (
<Box display={'flex'} flexDirection={'column'} columnGap={1}> <Box display={'flex'} flexDirection={'column'}>
{suggestions.map((name, index) => { {suggestions.map((name, index) => {
return ( return (
<Box borderStyle={'round'} key={name}> <Box key={name}>
<Text backgroundColor={selected === index ? 'white' : undefined}> <Text color={selected === index ? undefined : 'gray'}>
{components[components.findIndex(({key}) => key === name)].displayName} {components[components.findIndex(({key}) => key === name)].displayName}
</Text> </Text>
</Box> </Box>