#638 Press enter in new row creates new row

atomicdata-dev · Nov 7, 2023 · b2481fd · b2481fd
1 parent ee96969
commit b2481fd
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 11 deletions.
diff --git a/browser/data-browser/src/components/TableEditor/Cell.tsx b/browser/data-browser/src/components/TableEditor/Cell.tsx
@@ -24,6 +24,7 @@ export interface CellProps {
   role?: string;
   onClearCell?: () => void;
   onEnterEditModeWithCharacter?: (key: string) => void;
+  onEditNextRow?: () => void;
 }
 
 interface IndexCellProps extends CellProps {
@@ -39,6 +40,7 @@ export function Cell({
   align,
   role,
   onEnterEditModeWithCharacter = () => undefined,
+  onEditNextRow,
 }: React.PropsWithChildren<CellProps>): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -123,16 +125,28 @@ export function Cell({
 
       activeCellRef.current = ref.current;
 
-      const unregister = registerEventListener(
-        TableEvent.EnterEditModeWithCharacter,
-        onEnterEditModeWithCharacter,
-      );
+      const unregisters = [
+        registerEventListener(
+          TableEvent.EnterEditModeWithCharacter,
+          onEnterEditModeWithCharacter,
+        ),
+        registerEventListener(TableEvent.InteractionsFired, interactions => {
+          if (
+            interactions.includes(KeyboardInteraction.EditNextRow) &&
+            isActive
+          ) {
+            onEditNextRow?.();
+          }
+        }),
+      ];
 
       return () => {
-        unregister();
+        for (const unregister of unregisters) {
+          unregister();
+        }
       };
     }
-  }, [isActive, onEnterEditModeWithCharacter]);
+  }, [isActive, onEnterEditModeWithCharacter, onEditNextRow]);
 
   return (
     <CellWrapper

diff --git a/browser/data-browser/src/components/TableEditor/TableEditor.tsx b/browser/data-browser/src/components/TableEditor/TableEditor.tsx
@@ -187,6 +187,7 @@ function FancyTableInner<T>({
       <VisuallyHidden id={ariaUsageId}>
         <p>{ARIA_TABLE_USAGE}</p>
       </VisuallyHidden>
+      {/* @ts-ignore */}
       <Table
         aria-labelledby={labelledBy}
         aria-rowcount={itemCount}
@@ -234,6 +235,7 @@ interface TableProps {
   totalContentHeight: number;
 }
 
+// @ts-ignore
 const Table = styled.div.attrs<TableProps>(p => ({
   style: {
     '--table-template-columns': p.gridTemplateColumns,

diff --git a/browser/data-browser/src/components/TableEditor/TableEditorContext.tsx b/browser/data-browser/src/components/TableEditor/TableEditorContext.tsx
@@ -7,12 +7,14 @@ export enum TableEvent {
   EnterEditModeWithCharacter = 'enterEditModeWithCharacter',
   ClearCell = 'clearCell',
   ClearRow = 'clearRow',
+  InteractionsFired = 'interactionsFired',
 }
 
 export type TableEventHandlers = {
   enterEditModeWithCharacter: (key: string) => void;
   clearCell: () => void;
   clearRow: (index: number) => void;
+  interactionsFired: (interactions: KeyboardInteraction[]) => void;
 };
 
 export enum CursorMode {
@@ -55,7 +57,8 @@ export interface TableEditorContext {
   registerEventListener<T extends TableEvent>(
     event: T,
     cb: TableEventHandlers[T],
-  );
+  ): () => void;
+  emitInteractionsFired(interactions: KeyboardInteraction[]): void;
 }
 
 const initial = {
@@ -80,7 +83,8 @@ const initial = {
   clearCell: () => undefined,
   clearRow: (_: number) => undefined,
   enterEditModeWithCharacter: (_: string) => undefined,
-  registerEventListener: () => undefined,
+  registerEventListener: () => () => undefined,
+  emitInteractionsFired: () => undefined,
 };
 
 const TableEditorContext = React.createContext<TableEditorContext>(initial);
@@ -146,6 +150,13 @@ export function TableEditorContextProvider({
     [eventManager],
   );
 
+  const emitInteractionsFired = useCallback(
+    (interactions: KeyboardInteraction[]) => {
+      eventManager.emit(TableEvent.InteractionsFired, interactions);
+    },
+    [eventManager],
+  );
+
   const context = useMemo(
     () => ({
       tableRef,
@@ -170,6 +181,7 @@ export function TableEditorContextProvider({
       clearCell,
       clearRow,
       enterEditModeWithCharacter,
+      emitInteractionsFired,
     }),
     [
       disabledKeyboardInteractions,
@@ -182,6 +194,7 @@ export function TableEditorContextProvider({
       setMultiSelectCorner,
       isDragging,
       cursorMode,
+      emitInteractionsFired,
     ],
   );
 

diff --git a/browser/data-browser/src/components/TableEditor/hooks/useTableEditorKeyboardNavigation.tsx b/browser/data-browser/src/components/TableEditor/hooks/useTableEditorKeyboardNavigation.tsx
@@ -43,15 +43,14 @@ export function useTableEditorKeyboardNavigation(
     multiSelectCornerColumn,
     setActiveCell,
     listRef,
+    emitInteractionsFired,
   } = tableContext;
 
   const hasControlLock = useHasControlLock();
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
       if (hasControlLock || tableHeaderHasFocus(headerRef)) {
-        console.warn('Control lock enabled, can not use keyboard.');
-
         return;
       }
 
@@ -102,6 +101,8 @@ export function useTableEditorKeyboardNavigation(
 
         handler.handler(context);
       }
+
+      emitInteractionsFired(handlers.map(h => h.id));
     },
     [
       disabledKeyboardInteractions,
@@ -114,6 +115,7 @@ export function useTableEditorKeyboardNavigation(
       commands.undo,
       commands.expand,
       hasControlLock,
+      emitInteractionsFired,
     ],
   );
 

diff --git a/browser/data-browser/src/views/TablePage/TableCell.tsx b/browser/data-browser/src/views/TablePage/TableCell.tsx
@@ -65,6 +65,7 @@ export function TableCell({
   const store = useStore();
 
   const [markForInvalidate, setMarkForInvalidate] = useState(false);
+  const { setActiveCell } = useTableEditorContext();
   const { addItemsToHistoryStack } = useContext(TablePageContext);
   const [save, savePending] = useDebouncedCallback(
     async () => {
@@ -116,21 +117,41 @@ export function TableCell({
     [onChange, dataType],
   );
 
+  const handleEditNextRow = useCallback(() => {
+    if (markForInvalidate && !savePending) {
+      startTransition(() => {
+        setMarkForInvalidate(false);
+        invalidateTable?.();
+        setTimeout(() => {
+          setActiveCell(rowIndex + 1, columnIndex);
+        }, 0);
+      });
+    }
+  }, [
+    markForInvalidate,
+    savePending,
+    invalidateTable,
+    setActiveCell,
+    rowIndex,
+    columnIndex,
+  ]);
+
   useEffect(() => {
     if (markForInvalidate && !isEditing && !savePending) {
       startTransition(() => {
         setMarkForInvalidate(false);
         invalidateTable?.();
       });
     }
-  }, [isEditing, markForInvalidate, savePending]);
+  }, [isEditing, markForInvalidate, savePending, invalidateTable]);
 
   return (
     <Cell
       rowIndex={rowIndex}
       columnIndex={columnIndex}
       align={alignment}
       onEnterEditModeWithCharacter={handleEnterEditModeWithCharacter}
+      onEditNextRow={handleEditNextRow}
     >
       {isEditing ? (
         <Editor.Edit