fix(focus): focus with global state

unigraph-dev · Jan 1, 2022 · 6ddcf8f · 6ddcf8f
1 parent d3f55a2
commit 6ddcf8f
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 67 deletions.
diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx
@@ -40,7 +40,7 @@ export function AutoDynamicView({
     const [showSubentities, setShowSubentities] = React.useState(!!subentityExpandByDefault);
 
     const [isSelected, setIsSelected] = React.useState(false);
-    const [isFocused, setIsFocused] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(window.unigraph.getState('global/focused').value.uid === object?.uid && tabContext.isVisible());
 
     const [DynamicViews, setDynamicViews] = React.useState({ ...window.unigraph.getState('registry/dynamicView').value, ...(component || {}) });
 
@@ -198,9 +198,7 @@ export function AutoDynamicView({
             }}
             onClick={() => { window.wsnavigator(`/library/backlink?uid=${object?.uid}`); }}
         >
-            {noParents ? '' : `${backlinks?.[0]?.length} / `}
-            {' '}
-            {backlinks?.[1]?.length}
+            {(noParents ? 0 : backlinks?.[0]?.length || 0) + (backlinks?.[1]?.length || 0)}
         </div>
     );
 

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/DynamicObjectListView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/DynamicObjectListView.tsx
@@ -12,7 +12,9 @@ import { UnigraphObject } from 'unigraph-dev-common/lib/api/unigraph';
 import { buildGraph as buildGraphFn, getRandomInt } from 'unigraph-dev-common/lib/utils/utils';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { byElementIndex } from 'unigraph-dev-common/lib/utils/entityUtils';
-import { TransitionGroup } from 'react-transition-group';
+import {
+    TransitionGroup,
+} from 'react-transition-group';
 import { getDynamicViews } from '../../unigraph-react';
 import { AutoDynamicView } from './AutoDynamicView';
 import { DataContext, isMobile, TabContext } from '../../utils';
@@ -70,20 +72,19 @@ function DynamicListItem({
     reverse, listUid, item, index, context, callbacks, itemUids, itemRemover, noRemover, removeOnEnter, compact,
 }: any) {
     return (
-        <Slide direction={reverse ? 'down' : 'up'} in key={item?.uid}>
-            <ListItem style={{ ...(compact ? { paddingTop: '2px', paddingBottom: '2px' } : {}) }}>
-                <ListItemIcon
-                    onClick={() => {
+        <ListItem style={{ ...(compact ? { paddingTop: '2px', paddingBottom: '2px' } : {}) }}>
+            <ListItemIcon
+                onClick={() => {
                             itemRemover([item.uid]);
                         }}
-                    style={{ display: (itemRemover === _.noop || isMobile() || noRemover) ? 'none' : '' }}
-                >
-                    <ClearAll />
-                </ListItemIcon>
-                <AutoDynamicView
-                    object={new UnigraphObject(item)}
-                    withParent={!!listUid}
-                    callbacks={{
+                style={{ display: (itemRemover === _.noop || isMobile() || noRemover) ? 'none' : '' }}
+            >
+                <ClearAll />
+            </ListItemIcon>
+            <AutoDynamicView
+                object={new UnigraphObject(item)}
+                withParent={!!listUid}
+                callbacks={{
                             ...callbacks,
                             context,
                             removeOnEnter,
@@ -96,9 +97,8 @@ function DynamicListItem({
                                 itemRemover(uids);
                             },
                         }}
-                />
-            </ListItem>
-        </Slide>
+            />
+        </ListItem>
     );
 }
 
@@ -137,25 +137,31 @@ function DynamicListBasic({
 }: any) {
     const tabContext = React.useContext(TabContext);
     return (
-        <TransitionGroup>
-            <DragandDrop dndContext={tabContext.viewId} listId={context?.uid} isReverse={reverse} arrayId={listUid}>
-                {items.map((el: any, index: number) => (
-                    <DynamicListItem
-                        item={itemGetter(el)}
-                        index={index}
-                        context={context}
-                        listUid={listUid}
-                        compact={compact}
-                        callbacks={callbacks}
-                        itemUids={items.map((ell: any) => itemGetter(ell).uid)}
-                        itemRemover={itemRemover}
-                        reverse={reverse}
-                        noRemover={noRemover}
-                        removeOnEnter={removeOnEnter}
-                    />
-                ))}
-            </DragandDrop>
-        </TransitionGroup>
+        <DragandDrop
+            dndContext={tabContext.viewId}
+            listId={context?.uid}
+            isReverse={reverse}
+            arrayId={listUid}
+            Comp={TransitionGroup}
+            ChildrenComp={Slide}
+        >
+            {items.map((el: any, index: number) => (
+                <DynamicListItem
+                    key={itemGetter(el)?.uid}
+                    item={itemGetter(el)}
+                    index={index}
+                    context={context}
+                    listUid={listUid}
+                    compact={compact}
+                    callbacks={callbacks}
+                    itemUids={items.map((ell: any) => itemGetter(ell).uid)}
+                    itemRemover={itemRemover}
+                    reverse={reverse}
+                    noRemover={noRemover}
+                    removeOnEnter={removeOnEnter}
+                />
+            ))}
+        </DragandDrop>
     );
 }
 
@@ -199,26 +205,32 @@ function DynamicList({
             scrollableTarget={`scrollableDiv${parId}`}
             endMessage=""
         >
-            <TransitionGroup>
-                <DragandDrop dndContext={tabContext.viewId} listId={context?.uid} isReverse={reverse} arrayId={listUid}>
-                    {loadedItems.map((el: any, index: number) => (
-                        <DynamicListItem
-                            key={el?.uid || index}
-                            item={el}
-                            index={index}
-                            context={context}
-                            listUid={listUid}
-                            reverse={reverse}
-                            compact={compact}
-                            callbacks={callbacks}
-                            itemUids={items.map((ell: any) => itemGetter(ell).uid)}
-                            itemRemover={itemRemover}
-                            noRemover={noRemover}
-                            removeOnEnter={removeOnEnter}
-                        />
+
+            <DragandDrop
+                Comp={TransitionGroup}
+                dndContext={tabContext.viewId}
+                listId={context?.uid}
+                isReverse={reverse}
+                arrayId={listUid}
+                ChildrenComp={Slide}
+            >
+                {loadedItems.map((el: any, index: number) => (
+                    <DynamicListItem
+                        key={el?.uid || index}
+                        item={el}
+                        index={index}
+                        context={context}
+                        listUid={listUid}
+                        reverse={reverse}
+                        compact={compact}
+                        callbacks={callbacks}
+                        itemUids={items.map((ell: any) => itemGetter(ell).uid)}
+                        itemRemover={itemRemover}
+                        noRemover={noRemover}
+                        removeOnEnter={removeOnEnter}
+                    />
                     ))}
-                </DragandDrop>
-            </TransitionGroup>
+            </DragandDrop>
         </InfiniteScroll>
     );
 }

diff --git a/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx b/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx
@@ -253,16 +253,18 @@ export function DetailedNoteBlock({
     React.useEffect(() => {
         if (focused) {
             setIsEditing(true);
-            console.log(isEditing);
-            if (isEditing) editorRef.current.click();
+            if (isEditing) textInput.current.focus();
             setTimeout(() => {
                 let tail; const focusedState = window.unigraph.getState('global/focused').value;
                 const el = textInput.current.firstChild || textInput.current;
-                el?.click?.();
                 if (focusedState.tail) tail = el.textContent.length;
                 setCaret(document, el, tail || focusedState.caret);
             }, 0);
+        }
+    }, [focused]);
 
+    React.useEffect(() => {
+        if (focused) {
             window.unigraph.getState('global/focused/actions').setValue({
                 splitChild: () => {
                     const sel = document.getSelection();
@@ -273,7 +275,7 @@ export function DetailedNoteBlock({
                 unindentChild: callbacks['unindent-child-in-parent'],
             });
         }
-    }, [focused]);
+    }, [data, focused]);
 
     React.useEffect(commandFn, [command]);
 
@@ -305,7 +307,6 @@ export function DetailedNoteBlock({
                         }}
                         onBlur={(ev) => {
                             setIsEditing(false);
-                            console.log('onBlur');
                             inputDebounced.current.flush();
                             if (focused) {
                                 window.unigraph.getState('global/focused').setValue({ uid: '', caret: 0, type: '' });
@@ -523,7 +524,6 @@ export function DetailedNoteBlock({
                                                 createBelow={() => { addChild(dataref.current, editorContext); }}
                                             >
                                                 <AutoDynamicView
-                                                    key={el.uid}
                                                     noDrag
                                                     allowSubentity
                                                     noBacklinks={el.type?.['unigraph.id'] === '$/schema/note_block'}

diff --git a/packages/unigraph-dev-explorer/src/examples/notes/commands.ts b/packages/unigraph-dev-explorer/src/examples/notes/commands.ts
@@ -108,7 +108,6 @@ export const splitChild = (data: any, context: NoteEditorContext, index: number,
     // console.log(newChildren)
     window.unigraph.updateObject(data?._value?.uid, { children: { '_value[': newChildren } }, false, false, context.callbacks.subsId, parents);
     context.edited.current = true;
-    context.setCommand(() => () => focusUid(targetUid));
 };
 
 export const unsplitChild = async (data: any, context: NoteEditorContext, index: number) => {
@@ -216,7 +215,7 @@ export const indentChild = (data: any, context: NoteEditorContext, index: number
     window.unigraph.updateObject(data?._value?.uid, { children: { '_value[': finalChildren } }, false, false, context.callbacks.subsId, parents);
     context.edited.current = true;
 
-    context.setCommand(() => () => focusUid(newUid._value.uid));
+    // context.setCommand(() => () => focusUid(newUid._value.uid));
     // context.setCommand(() => noteBlockCommands['set-focus'].bind(this, data, {...context, childrenref: {current: context.childrenref.current.children[parent as number].children[0].children[0].children[1]}}, -1))
 };
 
@@ -271,7 +270,7 @@ export const unindentChild = async (data: any, context: NoteEditorContext, paren
     await window.unigraph.updateObject(data?._value?.uid, { ...data._value, children: { '_value[': newChildren } }, false, false, [], parents);
     await window.unigraph.deleteItemFromArray(delUidPar, delUidChild);
     context.edited.current = true;
-    context.setCommand(() => () => focusUid(newChildren[parent + 1]._value._value.uid));
+    // context.setCommand(() => () => focusUid(newChildren[parent + 1]._value._value.uid));
 };
 
 export const focusLastDFSNode = (data: any, context: NoteEditorContext, index: number, tail?: boolean) => {