andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SearchInput: Make device detection static

Browse Source
This commit is contained in:
rektdeckard
2021-03-07 13:47:07 -05:00
parent 62d0524f34
commit 61fe3d9de8
1 changed files with 8 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/SearchInput/SearchInput.tsx
View File

@@ -8,21 +8,18 @@ import ReactGA from "react-ga";
import { searchQueryAtom } from "../../state/atoms"; import { searchQueryAtom } from "../../state/atoms";
import "./SearchInput.css"; import "./SearchInput.css";
const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i;
const isApple = apple.test(window.navigator.platform);
const mobile = /Android|iPhone|iPod|iPad|Opera Mini|IEMobile/i;
const isMobile = mobile.test(window.navigator.userAgent);
type SearchInputProps = {}; type SearchInputProps = {};
const SearchInput: React.FC<SearchInputProps> = () => { const SearchInput: React.FC<SearchInputProps> = () => {
const [value, setValue] = useState<string>(""); const [value, setValue] = useState<string>("");
const [query, setQuery] = useRecoilState(searchQueryAtom); const [query, setQuery] = useRecoilState(searchQueryAtom);
const inputRef = useRef<HTMLInputElement>() as MutableRefObject<HTMLInputElement>; const inputRef = useRef<HTMLInputElement>() as MutableRefObject<HTMLInputElement>;
const isMobile = useRef<boolean>(false) as MutableRefObject<boolean>;
const isApple = useRef<boolean>(false) as MutableRefObject<boolean>;
useEffect(() => {
const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i;
const mobile = /Android|iPhone|iPod|iPad|Opera Mini|IEMobile/i;
isApple.current = apple.test(window.navigator.platform);
isMobile.current = mobile.test(window.navigator.userAgent);
}, [isApple, isMobile]);
useHotkeys("ctrl+k,cmd+k", (e) => { useHotkeys("ctrl+k,cmd+k", (e) => {
e.preventDefault(); e.preventDefault();
@@ -55,7 +52,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
.getElementById("beacon") .getElementById("beacon")
?.scrollIntoView({ block: "start", behavior: "smooth" }); ?.scrollIntoView({ block: "start", behavior: "smooth" });
}, },
250, 500,
[value] [value]
); );
@@ -84,9 +81,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
key === "Enter" && currentTarget.blur() key === "Enter" && currentTarget.blur()
} }
/> />
{!value && !isMobile.current && ( {!value && !isMobile && <Keys>{isApple ? <Command /> : "Ctrl"} + K</Keys>}
<Keys>{isApple.current ? <Command /> : "Ctrl"} + K</Keys>
)}
{value ? ( {value ? (
isReady() ? ( isReady() ? (
<X className="clear-icon" size={18} onClick={handleCancelSearch} /> <X className="clear-icon" size={18} onClick={handleCancelSearch} />