51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
|
|
import { ControlKeyIcon } from './icons/ControlKeyIcon';
|
|
import { SearchIcon } from './icons/SearchIcon';
|
|
|
|
const ACTION_KEY_DEFAULT = 'Ctrl';
|
|
const ACTION_KEY_APPLE = '⌘';
|
|
|
|
function isAppleDevice() {
|
|
if (typeof navigator === 'undefined') {
|
|
return ACTION_KEY_DEFAULT;
|
|
}
|
|
|
|
return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
|
|
}
|
|
|
|
export const DocSearchButton = React.forwardRef<
|
|
HTMLButtonElement,
|
|
React.DetailedHTMLProps<
|
|
React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
HTMLButtonElement
|
|
>
|
|
>((props, ref) => {
|
|
const [key, setKey] = useState(() =>
|
|
isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (isAppleDevice()) {
|
|
setKey(ACTION_KEY_APPLE);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="DocSearch DocSearch-Button"
|
|
aria-label="Search"
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<SearchIcon />
|
|
<span className="DocSearch-Button-Placeholder">Search</span>
|
|
|
|
<span className="DocSearch-Button-Key">
|
|
{key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
|
|
</span>
|
|
<span className="DocSearch-Button-Key">K</span>
|
|
</button>
|
|
);
|
|
});
|