feat: collapse tags on click outside

This commit is contained in:
Antonella Sgarlatta
2021-05-31 17:58:46 -03:00
parent b54de00b40
commit b5906ecf78
4 changed files with 66 additions and 39 deletions

View File

@@ -1,8 +1,8 @@
import { AppState } from '@/ui_models/app_state';
import { toDirective, useCloseOnBlur } from './utils';
import { toDirective, useCloseOnBlur, useCloseOnClickOutside } from './utils';
import { observer } from 'mobx-react-lite';
import { NotesOptions } from './NotesOptions';
import { useCallback, useEffect, useRef } from 'preact/hooks';
import { useRef } from 'preact/hooks';
type Props = {
appState: AppState;
@@ -15,18 +15,10 @@ const NotesContextMenu = observer(({ appState }: Props) => {
(open: boolean) => appState.notes.setContextMenuOpen(open)
);
const closeOnClickOutside = useCallback((event: MouseEvent) => {
if (!contextMenuRef.current?.contains(event.target as Node)) {
appState.notes.setContextMenuOpen(false);
}
}, [appState]);
useEffect(() => {
document.addEventListener('click', closeOnClickOutside);
return () => {
document.removeEventListener('click', closeOnClickOutside);
};
}, [closeOnClickOutside]);
useCloseOnClickOutside(
contextMenuRef,
(open: boolean) => appState.notes.setContextMenuOpen(open)
);
return appState.notes.contextMenuOpen ? (
<div