acid-info/logos-press-engine
1
0
Fork 0
mirror of https://github.com/acid-info/logos-press-engine.git synced 2025-02-23 22:58:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix input in search bar

Browse Source
This commit is contained in:
amirhouieh 2023-04-27 15:31:38 +02:00
parent 7b8447fe98
commit 76559d9537
2 changed files with 14 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Searchbar/Search.module.css
View File

@ -6,12 +6,6 @@
border: none !important; border: none !important;
} }
/*if we use textfield*/ .searchBox{
/*.searchBox{*/
/* border: none !important;*/
/*}*/
/*if we use autocompete */
.searchBox > div{
border: none !important; border: none !important;
} }

30
src/components/Searchbar/Searchbar.tsx
View File

@ -24,11 +24,11 @@ export default function Searchbar(props: SearchbarProps) {
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [error, setError] = useState(false) const [error, setError] = useState(false)
const [query, setQuery] = useState<string | undefined>(undefined) const [query, setQuery] = useState<string>('')
const [filterTags, setFilterTags] = useState<string[]>([]) const [filterTags, setFilterTags] = useState<string[]>([])
const validateSearch = useCallback(() => { const validateSearch = useCallback(() => {
return (query !== undefined && query.length > 0) || filterTags.length > 0 return query.length > 0 || filterTags.length > 0
}, [query, filterTags]) }, [query, filterTags])
const performSearch = useCallback(() => { const performSearch = useCallback(() => {
@ -37,7 +37,7 @@ export default function Searchbar(props: SearchbarProps) {
const performClear = useCallback(() => { const performClear = useCallback(() => {
// TODO: clear input.value seems to be not working. When set to undefined, the input value is still there. // TODO: clear input.value seems to be not working. When set to undefined, the input value is still there.
setQuery(undefined) setQuery('')
setFilterTags([]) setFilterTags([])
}, [setQuery, setFilterTags]) }, [setQuery, setFilterTags])
@ -75,25 +75,21 @@ export default function Searchbar(props: SearchbarProps) {
const isCollapsed = validateSearch() && !active const isCollapsed = validateSearch() && !active
return ( const placeholder =
<SearchbarContainer onUnfocus={() => setActive(false)}>
<SearchBox>
<Autocomplete
className={styles.searchBox}
placeholder={
searchScope === ESearchScope.GLOBAL searchScope === ESearchScope.GLOBAL
? copyConfigs.search.searchbarPlaceholders.global() ? copyConfigs.search.searchbarPlaceholders.global()
: copyConfigs.search.searchbarPlaceholders.article() : copyConfigs.search.searchbarPlaceholders.article()
}
return (
<SearchbarContainer onUnfocus={() => setActive(false)}>
<SearchBox>
<TextField
className={styles.searchBox}
placeholder={placeholder}
value={query as string} value={query as string}
onFocus={() => setActive(true)} onFocus={() => setActive(true)}
clearButton={false} onChange={(e) => {
inputProps={{
onChange: (e) => {
setQuery(e.target.value) setQuery(e.target.value)
console.log(e.target.value)
},
onKeyUp: (e) => handleEnter(e),
}} }}
/> />
<div> <div>
@ -118,7 +114,7 @@ export default function Searchbar(props: SearchbarProps) {
className={isCollapsed ? 'enabled' : ''} className={isCollapsed ? 'enabled' : ''}
onClick={() => setActive(true)} onClick={() => setActive(true)}
dangerouslySetInnerHTML={{ __html: constructCollapseText() }} dangerouslySetInnerHTML={{ __html: constructCollapseText() }}
></Collapsed> />
</SearchbarContainer> </SearchbarContainer>
) )
} }