diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index 3c2025cc..e3deef5a 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/src/container/NodeRenderer/index.tsx @@ -81,14 +81,14 @@ function Node({ const childRect = useMemo(() => getRectOfNodes(childNodes), [childNodes]); const isParentNode = !!childNodes.length; - node.style = useMemo(() => { + const style = useMemo(() => { if (isParentNode) { return { ...node.style, width: Math.floor(childRect.width) + 20, height: Math.floor(childRect.height) + 20, boxSizing: 'border-box', - }; + } as React.CSSProperties; } return node.style; }, [childRect.width, childRect.height, isParentNode, node.style]); @@ -109,7 +109,7 @@ function Node({ ; type PressedKeys = Set; type KeyOrCode = 'key' | 'code'; export interface UseKeyPressOptions { - target: Document | HTMLElement | ShadowRoot; + target: Document | HTMLElement | ShadowRoot | null; } +const doc = typeof document !== 'undefined' ? document : null; + // the keycode can be a string 'a' or an array of strings ['a', 'a+d'] // a string means a single key 'a' or a combination when '+' is used 'a+d' // an array means different possibilites. Explainer: ['a', 'd+s'] here the // user can use the single key 'a' or the combination 'd' + 's' -export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { target: document }): boolean => { +export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { target: doc }): boolean => { const [keyPressed, setKeyPressed] = useState(false); // we need to remember the pressed keys in order to support combinations @@ -64,16 +66,16 @@ export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { setKeyPressed(false); }; - options.target.addEventListener('keydown', downHandler as EventListenerOrEventListenerObject); - options.target.addEventListener('keyup', upHandler as EventListenerOrEventListenerObject); - options.target.addEventListener('blur', resetHandler); + options?.target?.addEventListener('keydown', downHandler as EventListenerOrEventListenerObject); + options?.target?.addEventListener('keyup', upHandler as EventListenerOrEventListenerObject); + options?.target?.addEventListener('blur', resetHandler); return () => { pressedKeys.current.clear(); - options.target.removeEventListener('keydown', downHandler as EventListenerOrEventListenerObject); - options.target.removeEventListener('keyup', upHandler as EventListenerOrEventListenerObject); - options.target.removeEventListener('blur', resetHandler); + options?.target?.removeEventListener('keydown', downHandler as EventListenerOrEventListenerObject); + options?.target?.removeEventListener('keyup', upHandler as EventListenerOrEventListenerObject); + options?.target?.removeEventListener('blur', resetHandler); }; } }, [keyCode, setKeyPressed]);