misc_pterodactyl-panel/resources/scripts/components/dashboard/search/SearchContainer.tsx

30 lines
1.1 KiB
TypeScript
Raw Normal View History

import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2020-07-05 01:46:09 +00:00
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import useEventListener from '@/plugins/useEventListener';
import SearchModal from '@/components/dashboard/search/SearchModal';
import Tooltip from '@/components/elements/tooltip/Tooltip';
export default () => {
const [visible, setVisible] = useState(false);
useEventListener('keydown', (e: KeyboardEvent) => {
if (['input', 'textarea'].indexOf(((e.target as HTMLElement).tagName || 'input').toLowerCase()) < 0) {
if (!visible && e.metaKey && e.key.toLowerCase() === '/') {
setVisible(true);
}
}
});
return (
<>
{visible && <SearchModal appear visible={visible} onDismissed={() => setVisible(false)} />}
<Tooltip placement={'bottom'} content={'Search'}>
<div className={'navigation-link'} onClick={() => setVisible(true)}>
<FontAwesomeIcon icon={faSearch} />
</div>
</Tooltip>
</>
);
};