fix(ux): various ux fixes

unigraph-dev · Jan 10, 2022 · 0007ed0 · 0007ed0
1 parent 9182955
commit 0007ed0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 32 deletions.
diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx
@@ -193,7 +193,7 @@ export function AutoDynamicView({
             };
         }
         return () => {};
-    }, [object.uid]);
+    }, [object?.uid]);
 
     const [{ isDragging }, drag] = useDrag(() => ({
         type: object?.type?.['unigraph.id'] || '$/schema/any',
@@ -278,7 +278,7 @@ export function AutoDynamicView({
 
             if (!noDrag) drag(domElement);
             if (!noDrop) drop(domElement);
-            if (isMobile()) handlers.ref(domElement);
+            if (isMobile() && !noContextMenu) handlers.ref(domElement);
             viewEl.current = domElement;
         },
         [isDragging, drag, callbacks],

diff --git a/packages/unigraph-dev-explorer/src/components/UnigraphCore/InlineSearchPopup.tsx b/packages/unigraph-dev-explorer/src/components/UnigraphCore/InlineSearchPopup.tsx
@@ -121,31 +121,33 @@ export function InlineSearch() {
     }, [searchResults, state]);
 
     React.useEffect(() => {
-        document.addEventListener(
-            'keydown',
-            (ev) => {
-                if (ctxMenuState.value.show && ev.key === 'ArrowDown') {
-                    console.log('D');
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    setCurrentAction((ca) => ca + 1);
-                } else if (ctxMenuState.value.show && ev.key === 'ArrowUp') {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    setCurrentAction((ca) => ca - 1);
-                } else if (ctxMenuState.value.show && ev.key === 'Enter') {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    actionItems[currentAction]?.[1]?.();
-                } else if (ctxMenuState.value.show && ev.key === 'Escape') {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    ctxMenuState.setValue({ show: false });
-                }
-            },
-            { capture: true },
-        );
-    }, []);
+        const handler = (ev: any) => {
+            if (ctxMenuState.value.show && ev.key === 'ArrowDown') {
+                console.log('D');
+                ev.preventDefault();
+                ev.stopPropagation();
+                setCurrentAction((ca) => ca + 1);
+            } else if (ctxMenuState.value.show && ev.key === 'ArrowUp') {
+                ev.preventDefault();
+                ev.stopPropagation();
+                setCurrentAction((ca) => ca - 1);
+            } else if (ctxMenuState.value.show && ev.key === 'Enter') {
+                ev.preventDefault();
+                ev.stopPropagation();
+                actionItems[currentAction]?.[1]?.(ev);
+            } else if (ctxMenuState.value.show && ev.key === 'Escape') {
+                ev.preventDefault();
+                ev.stopPropagation();
+                ctxMenuState.setValue({ show: false });
+            }
+        };
+
+        document.addEventListener('keydown', handler, { capture: true });
+
+        return function cleanup() {
+            document.removeEventListener('keydown', handler, { capture: true });
+        };
+    }, [currentAction, actionItems]);
 
     return (
         <div>
@@ -177,14 +179,15 @@ export function InlineSearch() {
                 {actionItems.map((el: any, index: number) => (
                     <div
                         onPointerDown={el[1]}
-                        style={
-                            index === currentAction
+                        style={{
+                            ...(index === currentAction
                                 ? {
                                       borderRadius: '6px',
                                       backgroundColor: 'gainsboro',
                                   }
-                                : {}
-                        }
+                                : {}),
+                            cursor: 'pointer',
+                        }}
                         id={`globalSearchItem_${
                             index === currentAction ? 'current' : ''
                         }`}

diff --git a/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx b/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx
@@ -429,7 +429,7 @@ export function DetailedNoteBlock({
                 let tail;
                 const focusedState =
                     window.unigraph.getState('global/focused').value;
-                const el = textInput.current.firstChild || textInput.current;
+                const el = textInput.current?.firstChild || textInput.current;
                 if (focusedState.tail) tail = el.textContent.length;
                 setCaret(document, el, tail || focusedState.caret);
             }, 0);