Extract shouldHandleClipboardEvent from Spreadsheet, improve and test

Fix util
iddan · Sep 20, 2021 · c3a8a0c · c3a8a0c
1 parent f4a6799
commit c3a8a0c
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 74 deletions.
diff --git a/src/Spreadsheet.tsx b/src/Spreadsheet.tsx
@@ -39,6 +39,7 @@ import {
   transformCoordToPoint,
   getCellRangeValue,
   getCellValue,
+  shouldHandleClipboardEvent,
 } from "./util";
 import "./Spreadsheet.css";
 
@@ -286,42 +287,51 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     [store]
   );
 
-  const isFocused = React.useCallback(() => {
-    const root = rootRef.current;
-    const { activeElement } = document;
-
-    return mode === "view" && root
-      ? root === activeElement || root.contains(activeElement)
-      : false;
-  }, [rootRef, mode]);
-
   const handleCut = React.useCallback(
     (event: ClipboardEvent) => {
-      if (isFocused()) {
+      if (
+        shouldHandleClipboardEvent(
+          document.activeElement,
+          rootRef.current,
+          mode
+        )
+      ) {
         event.preventDefault();
         event.stopPropagation();
         clip(event);
         cut();
       }
     },
-    [isFocused, clip, cut]
+    [mode, clip, cut]
   );
 
   const handleCopy = React.useCallback(
     (event: ClipboardEvent) => {
-      if (isFocused()) {
+      if (
+        shouldHandleClipboardEvent(
+          document.activeElement,
+          rootRef.current,
+          mode
+        )
+      ) {
         event.preventDefault();
         event.stopPropagation();
         clip(event);
         copy();
       }
     },
-    [isFocused, clip, copy]
+    [mode, clip, copy]
   );
 
   const handlePaste = React.useCallback(
-    async (event: ClipboardEvent) => {
-      if (mode === "view" && isFocused()) {
+    (event: ClipboardEvent) => {
+      if (
+        shouldHandleClipboardEvent(
+          document.activeElement,
+          rootRef.current,
+          mode
+        )
+      ) {
         event.preventDefault();
         event.stopPropagation();
         if (event.clipboardData) {
@@ -330,7 +340,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
         }
       }
     },
-    [mode, isFocused, paste]
+    [mode, paste]
   );
 
   const handleKeyDown = React.useCallback(

diff --git a/src/actions.ts b/src/actions.ts
@@ -123,10 +123,10 @@ export function cut(state: Types.StoreState): Partial<Types.StoreState> {
   };
 }
 
-export async function paste<Cell extends Types.CellBase>(
+export function paste<Cell extends Types.CellBase>(
   state: Types.StoreState<Cell>,
   text: string
-): Promise<Partial<Types.StoreState<Cell>> | null> {
+): Partial<Types.StoreState<Cell>> | null {
   const { active } = state;
   if (!active) {
     return null;