613e6d6503* add commands hook * add commands in editor * add command auto complete menu * add commands in room input * remove old reply code from room input * fix video component css * do not auto focus input on android or ios * fix crash on enable block after selection * fix circular deps in editor * fix autocomplete return focus move editor cursor * remove unwanted keydown from room input * fix emoji alignment in editor * test ipad user agent * refactor isAndroidOrIOS to mobileOrTablet * update slate & slate-react * downgrade slate-react to 0.98.4 0.99.0 has breaking changes with ReactEditor.focus * add sql to readable ext mimetype * fix empty editor formatting gets saved as draft * add option to use enter for newline * remove empty msg draft from atom family * prevent msg ctx menu from open on text selection
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import FocusTrap from 'focus-trap-react';
|
|
import isHotkey 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) => isHotkey('arrowdown', evt),
|
|
isKeyBackward: (evt: KeyboardEvent) => isHotkey('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>
|
|
);
|
|
}
|