Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-07 02:58:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix(typing): minor typing resolutions and convert SearchBar to TS (#766)

Browse source 
* refactor(SearchBar): convert to TS, useLocalize

* fix(typing): minor type issues

* chore(package.json): add 'reinstall:docker' script for rebuilding Docker environment in current branch
This commit is contained in:
Danny Avila 2023-08-06 21:30:16 -04:00 • committed by GitHub
parent 600a0d15b1
commit 68ad46a9be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 49 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

65
client/src/components/Nav/SearchBar.jsx
View file

@ -1,65 +0,0 @@
import { forwardRef, useState, useEffect } from 'react';
import { Search, X } from 'lucide-react';
import { useRecoilState, useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
const SearchBar = forwardRef((props, ref) => {
const { clearSearch } = props;
const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
const [showClearIcon, setShowClearIcon] = useState(false);
const lang = useRecoilValue(store.lang);
const handleKeyUp = (e) => {
const { value } = e.target;
if (e.keyCode === 8 && value === '') {
setSearchQuery('');
clearSearch();
}
};
const onChange = (e) => {
const { value } = e.target;
setSearchQuery(value);
setShowClearIcon(value.length > 0);
};
useEffect(() => {
if (searchQuery.length === 0) {
setShowClearIcon(false);
} else {
setShowClearIcon(true);
}
}, [searchQuery]);
return (
<div
ref={ref}
className="relative flex w-full cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
>
{<Search className="absolute left-3 h-4 w-4" />}
<input
type="text"
className="m-0 mr-0 w-full border-none bg-transparent p-0 pl-7 text-sm leading-tight outline-none"
value={searchQuery}
onChange={onChange}
onKeyDown={(e) => {
e.code === 'Space' ? e.stopPropagation() : null;
}}
placeholder={localize(lang, 'com_nav_search_placeholder')}
onKeyUp={handleKeyUp}
/>
<X
className={`absolute right-3 h-5 w-5 cursor-pointer ${
showClearIcon ? 'opacity-100' : 'opacity-0'
} transition-opacity duration-1000`}
onClick={() => {
setSearchQuery('');
clearSearch();
}}
/>
</div>
);
});
export default SearchBar;