feat: disable hotkeys when modal opened

RSSNext · Jul 20, 2024 · 95ad958 · 95ad958
1 parent 1a41f73
commit 95ad958
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 36 deletions.
diff --git a/src/renderer/src/components/ui/button/index.tsx b/src/renderer/src/components/ui/button/index.tsx
@@ -143,7 +143,10 @@ const HotKeyTrigger = ({
   fn: () => void
   options?: OptionsOrDependencyArray
 }) => {
-  useHotkeys(shortcut, fn, options)
+  useHotkeys(shortcut, fn, {
+    scopes: ["home"],
+    ...options,
+  })
   return null
 }
 export const MotionButtonBase = React.forwardRef<

diff --git a/src/renderer/src/components/ui/image/preview-image.tsx b/src/renderer/src/components/ui/image/preview-image.tsx
@@ -4,7 +4,7 @@ import { stopPropagation } from "@renderer/lib/dom"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import type { FC } from "react"
 import { useCallback, useState } from "react"
-import { Mousewheel, Scrollbar, Virtual } from "swiper/modules"
+import { Keyboard, Mousewheel, Scrollbar, Virtual } from "swiper/modules"
 import { Swiper, SwiperSlide } from "swiper/react"
 
 import { ActionButton } from "../button"
@@ -119,11 +119,14 @@ export const PreviewImageContent: FC<{
         mousewheel={{
           forceToAxis: true,
         }}
+        keyboard={{
+          enabled: true,
+        }}
         virtual
         onSlideChange={({ realIndex }) => {
           setCurrentSrc(images[realIndex])
         }}
-        modules={[Scrollbar, Mousewheel, Virtual]}
+        modules={[Scrollbar, Mousewheel, Virtual, Keyboard]}
         className="size-full"
       >
         {images.map((image, index) => (

diff --git a/src/renderer/src/components/ui/modal/stacked/modal.tsx b/src/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -20,6 +20,7 @@ import {
   useRef,
   useState,
 } from "react"
+import { useHotkeysContext } from "react-hotkeys-hook"
 import { useEventCallback } from "usehooks-ts"
 
 import { Divider } from "../../divider"
@@ -185,6 +186,17 @@ export const ModalInternal: Component<{
 
     const edgeElementRef = useRef<HTMLDivElement>(null)
 
+    const { enableScope, disableScope } = useHotkeysContext()
+
+    useEffect(() => {
+      enableScope("modal")
+      disableScope("home")
+      return () => {
+        enableScope("home")
+        disableScope("modal")
+      }
+    }, [])
+
     if (CustomModalComponent) {
       return (
         <Wrapper>

diff --git a/src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx b/src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx
@@ -4,7 +4,6 @@ import { views } from "@renderer/lib/constants"
 import { cn } from "@renderer/lib/utils"
 import { EntryColumn } from "@renderer/modules/entry-column"
 import { useMemo, useRef } from "react"
-import { HotkeysProvider } from "react-hotkeys-hook"
 import { useResizable } from "react-resizable-layout"
 import { Outlet } from "react-router-dom"
 
@@ -28,30 +27,28 @@ export function Component() {
   })
 
   return (
-    <HotkeysProvider initiallyActiveScopes={["home"]}>
-      <div ref={containerRef} className="flex min-w-0 grow">
-        <div
-          className={cn(
-            "h-full shrink-0 overflow-y-auto",
-            inWideMode ? "flex-1" : "border-r",
-            "will-change-[width]",
-          )}
-          style={{
-            width: position,
-          }}
-        >
-          <EntryColumn
-            key={`${feedId}-${view}`}
-          />
-        </div>
-        {!inWideMode && (
-          <div
-            {...separatorProps}
-            className="h-full w-px shrink-0 cursor-ew-resize hover:bg-border"
-          />
+    <div ref={containerRef} className="flex min-w-0 grow">
+      <div
+        className={cn(
+          "h-full shrink-0 overflow-y-auto",
+          inWideMode ? "flex-1" : "border-r",
+          "will-change-[width]",
         )}
-        <Outlet />
+        style={{
+          width: position,
+        }}
+      >
+        <EntryColumn
+          key={`${feedId}-${view}`}
+        />
       </div>
-    </HotkeysProvider>
+      {!inWideMode && (
+        <div
+          {...separatorProps}
+          className="h-full w-px shrink-0 cursor-ew-resize hover:bg-border"
+        />
+      )}
+      <Outlet />
+    </div>
   )
 }
diff --git a/src/renderer/src/providers/root-providers.tsx b/src/renderer/src/providers/root-providers.tsx
@@ -8,6 +8,7 @@ import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client
 import { LazyMotion, MotionConfig } from "framer-motion"
 import { Provider } from "jotai"
 import type { FC, PropsWithChildren } from "react"
+import { HotkeysProvider } from "react-hotkeys-hook"
 
 import { ContextMenuProvider } from "./context-menu-provider"
 import { StableRouterProvider } from "./stable-router-provider"
@@ -30,15 +31,17 @@ export const RootProviders: FC<PropsWithChildren> = ({ children }) => (
         client={queryClient}
       >
         <TooltipProvider>
-          <Provider store={jotaiStore}>
-            <UserProvider />
-            <SettingSync />
-            <ModalStackProvider />
-            <ContextMenuProvider />
-            <StableRouterProvider />
-            {import.meta.env.DEV && <Devtools />}
-            {children}
-          </Provider>
+          <HotkeysProvider initiallyActiveScopes={["home"]}>
+            <Provider store={jotaiStore}>
+              <UserProvider />
+              <SettingSync />
+              <ModalStackProvider />
+              <ContextMenuProvider />
+              <StableRouterProvider />
+              {import.meta.env.DEV && <Devtools />}
+              {children}
+            </Provider>
+          </HotkeysProvider>
         </TooltipProvider>
       </PersistQueryClientProvider>
     </MotionConfig>