nikon/docsearch
1
0
Fork 0
Code Activity Actions

feat(docusaurus): import DocSearch modal on hover

Browse source
This commit is contained in:
François Chalifour 2020-05-14 14:16:11 +02:00
parent 65a98b07ed
commit 4b007b67c8
1 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/DocSearchButton.tsx
View file

@ -2,10 +2,6 @@ import React, { useState, useEffect } from 'react';
import { SearchIcon } from './icons/SearchIcon';
interface SearchButtonProps {
onClick(): void;
}
const ACTION_KEY_DEFAULT = 'Ctrl';
const ACTION_KEY_APPLE = '⌘';
@ -17,7 +13,12 @@ function isAppleDevice() {
return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
}
export function DocSearchButton(props: SearchButtonProps) {
export function DocSearchButton(
props: React.DetailedHTMLProps<
React.ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
>
) {
const [key, setKey] = useState(() =>
isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT
);
@ -29,11 +30,7 @@ export function DocSearchButton(props: SearchButtonProps) {
}, []);
return (
<button
type="button"
className="DocSearch-SearchButton"
onClick={props.onClick}
>
<button type="button" className="DocSearch-SearchButton" {...props}>
<SearchIcon />
<span className="DocSearch-SearchButton-Placeholder">Search</span>
<span className="DocSearch-SearchButton-Key">{key}</span>