import { TextInput , TextInputProps } from '@primer/components' ; import { SearchIcon } from '@primer/octicons-react' ; import { useConfigs } from 'containers/ConfigsContext' ; import * as React from 'react' ; import { cx } from 'utils/cx' ; import { isValidRegexpSource } from 'utils/general' ; import { SearchMode } from './searchModes' ; type Props = { value : string ; onSearch : ( searchKey : string , searchMode : SearchMode ) => void ; } & Required < Pick < TextInputProps , 'onFocus' > > ; export function SearchBar ( { onSearch , onFocus , value } ) { const configs = useConfigs ( ) ; const { searchMode } = configs . value ; const toggleButtonDescription = `${ searchMode === 'regex' ? 'Match file name with regular expression.' : 'Match file path sequence with input.' } Click to toggle.` ; return ( < div className = { 'search-input-wrapper' } > < TextInput backgroundColor = "white" icon = { SearchIcon as any } onFocus = { e => { onFocus ( e ) ; e . target . select ( ) ; } } tabIndex = { 0 } className = { cx ( 'search-input' , { error : searchMode === 'regex' && ! isValidRegexpSource ( value ) , } ) } aria - label = "search files" placeholder = { `Search files` } onChange = { ( { target : { value } } ) => onSearch ( value , searchMode ) } value = { value } / > < div className = { `actions` } > < button className = { `toggle-search-mode` } title = { toggleButtonDescription } onClick = { ( ) => { const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex' ; configs . onChange ( { searchMode : newMode , } ) ; onSearch ( value , newMode ) ; } } aria - label = { toggleButtonDescription } > { searchMode === 'regex' ? '.*' : 'path' } < /button> < /div> < /div>); }