forked from github/cinny
d5ff55e23e
* use hotkey using key instead of which (default) * remove shift from block formatting hotkeys * smartly exit formatting with backspace * set markdown to off by default * exit formatting with escape
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import FocusTrap from 'focus-trap-react';
|
|
import { isKeyHotkey } from 'is-hotkey';
|
|
import { Header, Menu, Scroll, config } from 'folds';
|
|
|
|
import * as css from './AutocompleteMenu.css';
|
|
import { preventScrollWithArrowKey } from '../../../utils/keyboard';
|
|
|
|
type AutocompleteMenuProps = {
|
|
requestClose: () => void;
|
|
headerContent: ReactNode;
|
|
children: ReactNode;
|
|
};
|
|
export function AutocompleteMenu({ headerContent, requestClose, children }: AutocompleteMenuProps) {
|
|
return (
|
|
<div className={css.AutocompleteMenuBase}>
|
|
<div className={css.AutocompleteMenuContainer}>
|
|
<FocusTrap
|
|
focusTrapOptions={{
|
|
initialFocus: false,
|
|
onDeactivate: () => requestClose(),
|
|
returnFocusOnDeactivate: false,
|
|
clickOutsideDeactivates: true,
|
|
allowOutsideClick: true,
|
|
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
|
|
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
|
|
}}
|
|
>
|
|
<Menu className={css.AutocompleteMenu}>
|
|
<Header className={css.AutocompleteMenuHeader} size="400">
|
|
{headerContent}
|
|
</Header>
|
|
<Scroll style={{ flexGrow: 1 }} onKeyDown={preventScrollWithArrowKey}>
|
|
<div style={{ padding: config.space.S200 }}>{children}</div>
|
|
</Scroll>
|
|
</Menu>
|
|
</FocusTrap>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|