prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: input clear button

Browse source
This commit is contained in:
EnixCoda 2022-12-23 00:41:07 +08:00
parent 20ed9b9a59
commit 0492784b70
1 changed files with 21 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/SearchBar.tsx
View file

@ -1,4 +1,4 @@
import { SearchIcon } from '@primer/octicons-react'
import { SearchIcon, XIcon } from '@primer/octicons-react'
import { TextInput, TextInputProps } from '@primer/react'
import { useConfigs } from 'containers/ConfigsContext'
import * as React from 'react'
@ -48,20 +48,26 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
value={value}
validationStatus={validationStatus}
trailingAction={
<TextInput.Action
aria-label={toggleButtonDescription}
sx={{ color: 'fg.subtle' }}
onClick={() => {
const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
configs.onChange({
searchMode: newMode,
})
// Skip search if no input to prevent resetting folder expansions
if (value) onSearch(value, newMode)
}}
>
{searchMode === 'regex' ? '.*$' : 'a/b'}
</TextInput.Action>
<>
<TextInput.Action
disabled={!value}
onClick={() => onSearch('', searchMode)}
icon={XIcon}
aria-label="Clear"
/>
<TextInput.Action
aria-label={toggleButtonDescription}
sx={{ color: 'fg.subtle' }}
onClick={() => {
const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
configs.onChange({ searchMode: newMode })
// Skip search if no input to prevent resetting folder expansions
if (value) onSearch(value, newMode)
}}
>
{searchMode === 'regex' ? '.*$' : 'a/b'}
</TextInput.Action>
</>
}
/>
)