From 16ec2f082f0f1cfb2b7644e8aa464a6161fde268 Mon Sep 17 00:00:00 2001
From: gazedreamily <gazedreamily@gmail.com>
Date: Sun, 23 Apr 2023 18:08:25 +0800
Subject: [PATCH] feat: implement Ctrl+H to replace

---
 packages/core/src/context.ts                          | 3 ++-
 packages/core/src/events/keyboard.ts                  | 9 ++++-----
 packages/core/src/events/mouse.ts                     | 3 ++-
 packages/core/src/modules/toolbar.ts                  | 2 +-
 packages/react/src/components/SearchReplace/index.tsx | 5 +++--
 packages/react/src/components/SheetOverlay/index.tsx  | 2 +-
 packages/react/src/components/SheetTab/index.tsx      | 1 +
 packages/react/src/components/Workbook/index.tsx      | 6 ++++++
 stories/Features.stories.tsx                          | 8 ++++----
 9 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/context.ts b/packages/core/src/context.ts
index ac2f4e9..482710c 100644
--- a/packages/core/src/context.ts
+++ b/packages/core/src/context.ts
@@ -33,7 +33,8 @@ export type Context = {
   editingInsertedImgs?: Image;
   activeImg?: string;
   presences?: Presence[];
-  showSearchReplace?: boolean;
+  showSearch?: boolean;
+  showReplace?: boolean;
   linkCard?: LinkCardProps;
   rangeDialog?: RangeDialogProps; // 坐标选区鼠标选择
   // 提醒弹窗
diff --git a/packages/core/src/events/keyboard.ts b/packages/core/src/events/keyboard.ts
index d31b9ac..cc9e8ef 100644
--- a/packages/core/src/events/keyboard.ts
+++ b/packages/core/src/events/keyboard.ts
@@ -179,11 +179,10 @@ export function handleWithCtrlOrMetaKey(
     return;
   } else if (e.key === "f") {
     // Ctrl + F  查找
-    ctx.showSearchReplace = true;
-
-    // } else if (e.key === "h") {
-    //   // Ctrl + H  替换
-    //   searchReplace.createDialog(1);
+    ctx.showSearch = true;
+  } else if (e.key === "h") {
+    // Ctrl + H  替换
+    ctx.showReplace = true;
     //   searchReplace.init();
 
     //   $("#luckysheet-search-replace #searchInput input").focus();
diff --git a/packages/core/src/events/mouse.ts b/packages/core/src/events/mouse.ts
index 83edcc8..9381b63 100644
--- a/packages/core/src/events/mouse.ts
+++ b/packages/core/src/events/mouse.ts
@@ -77,7 +77,8 @@ export function handleGlobalWheel(
   scrollbarX: HTMLDivElement,
   scrollbarY: HTMLDivElement
 ) {
-  if (cache.searchDialog?.mouseEnter && ctx.showSearchReplace) return;
+  if (cache.searchDialog?.mouseEnter && ctx.showSearch && ctx.showReplace)
+    return;
   if (ctx.filterContextMenu != null) return;
   let { scrollLeft } = scrollbarX;
   const { scrollTop } = scrollbarY;
diff --git a/packages/core/src/modules/toolbar.ts b/packages/core/src/modules/toolbar.ts
index 6e0d1e9..3b6affe 100644
--- a/packages/core/src/modules/toolbar.ts
+++ b/packages/core/src/modules/toolbar.ts
@@ -1594,7 +1594,7 @@ const handlerMap: Record<string, ToolbarItemClickHandler> = {
   "clear-format": handleClearFormat,
   "format-painter": handleFormatPainter,
   search: (ctx: Context) => {
-    ctx.showSearchReplace = true;
+    ctx.showSearch = true;
   },
   link: handleLink,
 };
diff --git a/packages/react/src/components/SearchReplace/index.tsx b/packages/react/src/components/SearchReplace/index.tsx
index a020779..907c9c9 100644
--- a/packages/react/src/components/SearchReplace/index.tsx
+++ b/packages/react/src/components/SearchReplace/index.tsx
@@ -24,7 +24,7 @@ const SearchReplace: React.FC<{
   const { findAndReplace, button } = locale(context);
   const [searchText, setSearchText] = useState("");
   const [replaceText, setReplaceText] = useState("");
-  const [showReplace, setShowReplace] = useState(false);
+  const [showReplace, setShowReplace] = useState(context.showReplace);
   const [searchResult, setSearchResult] = useState<SearchResult[]>([]);
   const [selectedCell, setSelectedCell] = useState<{ r: number; c: number }>();
   const { showAlert } = useAlert();
@@ -37,7 +37,8 @@ const SearchReplace: React.FC<{
   const closeDialog = useCallback(() => {
     _.set(refs.globalCache, "searchDialog.mouseEnter", false);
     setContext((draftCtx) => {
-      draftCtx.showSearchReplace = false;
+      draftCtx.showSearch = false;
+      draftCtx.showReplace = false;
     });
   }, [refs.globalCache, setContext]);
 
diff --git a/packages/react/src/components/SheetOverlay/index.tsx b/packages/react/src/components/SheetOverlay/index.tsx
index c328a7f..e5374b7 100644
--- a/packages/react/src/components/SheetOverlay/index.tsx
+++ b/packages/react/src/components/SheetOverlay/index.tsx
@@ -397,7 +397,7 @@ const SheetOverlay: React.FC = () => {
         />
         <ColumnHeader />
       </div>
-      {context.showSearchReplace && (
+      {(context.showSearch || context.showReplace) && (
         <SearchReplace getContainer={() => containerRef.current!} />
       )}
       <div className="fortune-row-body">
diff --git a/packages/react/src/components/SheetTab/index.tsx b/packages/react/src/components/SheetTab/index.tsx
index 6df3fee..359cbc9 100644
--- a/packages/react/src/components/SheetTab/index.tsx
+++ b/packages/react/src/components/SheetTab/index.tsx
@@ -70,6 +70,7 @@ const SheetTab: React.FC = () => {
 
   useEffect(() => {
     const tabCurrent = tabContainerRef.current;
+    if (!tabCurrent) return;
     setIsShowScrollBtn(tabCurrent!.scrollWidth - 2 > tabCurrent!.clientWidth);
   }, [context.luckysheetfile]);
 
diff --git a/packages/react/src/components/Workbook/index.tsx b/packages/react/src/components/Workbook/index.tsx
index 2b62f1b..ea1601b 100644
--- a/packages/react/src/components/Workbook/index.tsx
+++ b/packages/react/src/components/Workbook/index.tsx
@@ -551,6 +551,12 @@ const Workbook = React.forwardRef<WorkbookInstance, Settings & AdditionalProps>(
           e.stopPropagation();
           return;
         }
+        if ((e.ctrlKey || e.metaKey) && e.key === "y") {
+          handleRedo();
+          e.stopPropagation();
+          e.preventDefault();
+          return;
+        }
         setContextWithProduce((draftCtx) => {
           handleGlobalKeyDown(
             draftCtx,
diff --git a/stories/Features.stories.tsx b/stories/Features.stories.tsx
index 0281070..478811d 100644
--- a/stories/Features.stories.tsx
+++ b/stories/Features.stories.tsx
@@ -62,8 +62,8 @@ export const MultiInstance: ComponentStory<typeof Workbook> = () => {
       <div
         style={{
           display: "inline-block",
-          width: "100%",
-          height: "50%",
+          width: "50%",
+          height: "100%",
           paddingRight: "12px",
           boxSizing: "border-box",
         }}
@@ -73,8 +73,8 @@ export const MultiInstance: ComponentStory<typeof Workbook> = () => {
       <div
         style={{
           display: "inline-block",
-          width: "100%",
-          height: "50%",
+          width: "50%",
+          height: "100%",
           paddingLeft: "12px",
           boxSizing: "border-box",
         }}