diff --git a/src/common/Menu/Menu.tsx b/src/common/Menu/Menu.tsx index 0aefbd473..bca6bb98b 100644 --- a/src/common/Menu/Menu.tsx +++ b/src/common/Menu/Menu.tsx @@ -9,8 +9,8 @@ import styles from './styles.less'; type Props = { children: JSX.Element, className: string, - shortcut: string, - position: MenuPosition, + shortcut?: string, + position?: MenuPosition, }; const createId = () => (Math.random() + 1).toString(36).substring(7); @@ -27,22 +27,23 @@ const Menu = ({ children, className, shortcut, position }: Props) => { useEffect(() => { const parent = element.current?.parentElement; - parent.addEventListener('click', onToggle); - - menu.create({ - id: id.current, - className, - parent, - position, - }); + if (parent) { + parent.addEventListener('click', onToggle); + menu.create({ + id: id.current, + className, + parent, + position, + }); + } return () => { - parent.removeEventListener('click', onToggle); + parent && parent.removeEventListener('click', onToggle); menu.remove(id.current); }; }, []); - useKeyboardEvent(shortcut, onToggle, !shortcut); + shortcut && useKeyboardEvent(shortcut, onToggle, !shortcut); return <>
diff --git a/src/common/Menu/MenuProvider.tsx b/src/common/Menu/MenuProvider.tsx index 0a8b9524e..8dcba5c19 100644 --- a/src/common/Menu/MenuProvider.tsx +++ b/src/common/Menu/MenuProvider.tsx @@ -17,7 +17,7 @@ const MenuProvider = ({ children, className }: Props) => { const container = useRef(null); const [menus, setMenus] = useState([]); - const [style, setStyle] = useState(null); + const [style, setStyle] = useState({}); const active = useMemo(() => menus.find(({ open }) => open), [menus]); @@ -36,7 +36,7 @@ const MenuProvider = ({ children, className }: Props) => { }; const render = (content: JSX.Element) => { - return createPortal(content, container.current); + return container.current && createPortal(content, container.current); }; const toggle = (id: string) => { @@ -54,7 +54,7 @@ const MenuProvider = ({ children, className }: Props) => { }; useLayoutEffect(() => { - setStyle(null); + setStyle({}); if (container.current && active) { const menu = container.current.getBoundingClientRect(); @@ -71,7 +71,7 @@ const MenuProvider = ({ children, className }: Props) => { }, [active]); useKeyboardEvent('Escape', closeAll); - useOnClickOutside([container.current, active?.parent], closeAll); + useOnClickOutside(container.current && active?.parent ? [container.current, active.parent] : [], closeAll); return ( diff --git a/src/common/Menu/types.d.ts b/src/common/Menu/types.d.ts index ae808dd17..cccda409b 100644 --- a/src/common/Menu/types.d.ts +++ b/src/common/Menu/types.d.ts @@ -4,6 +4,6 @@ export type Menu = { id: string, className: string, parent: HTMLElement, - position: MenuPosition, + position?: MenuPosition, open: boolean, }; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 0dc286754..c0d1562ca 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,7 @@ "allowJs": true, "checkJs": false, "noEmit": false, - "strict": false + "strict": true }, "include": [ "./src",