feat: refresh cursor style when split panel can't drag

Signed-off-by: Innei <i@innei.in>
RSSNext · Sep 10, 2024 · c9f70c0 · c9f70c0
1 parent 4ef7f8c
commit c9f70c0
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -113,7 +113,7 @@
     "react-hook-form": "7.53.0",
     "react-hotkeys-hook": "4.5.1",
     "react-intersection-observer": "9.13.1",
-    "react-resizable-layout": "0.7.2",
+    "react-resizable-layout": "npm:@innei/react-resizable-layout@0.7.3-fork.1",
     "react-router-dom": "6.26.1",
     "react-shadow": "20.5.0",
     "react-virtuoso": "4.10.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/renderer/src/components/ui/divider/PanelSpliter.tsx b/src/renderer/src/components/ui/divider/PanelSpliter.tsx
@@ -4,25 +4,26 @@ import * as React from "react"
 export const PanelSplitter = (
   props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     isDragging?: boolean
+    cursor?: string
   },
 ) => {
-  const { isDragging, ...rest } = props
+  const { isDragging, cursor, ...rest } = props
 
   React.useEffect(() => {
     if (!isDragging) return
     const $css = document.createElement("style")
 
     $css.innerHTML = `
       * {
-        cursor: ew-resize !important;
+        cursor: ${cursor} !important;
       }
     `
 
     document.head.append($css)
     return () => {
       $css.remove()
     }
-  }, [isDragging])
+  }, [cursor, isDragging])
 
   return (
     <div className="relative h-full w-0 shrink-0">

diff --git a/src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx b/src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx
@@ -16,7 +16,7 @@ export function Component() {
   const entryColWidth = useMemo(() => getUISettings().entryColWidth, [])
   const { feedId, view } = useRouteParms()
   const inWideMode = view ? views[view].wideMode : false
-  const { position, separatorProps, isDragging } = useResizable({
+  const { position, separatorProps, isDragging, separatorCursor } = useResizable({
     axis: "x",
     // FIXME: Less than this width causes grid images to overflow on safari
     min: isSafari() ? 356 : 300,
@@ -38,7 +38,9 @@ export function Component() {
       >
         <EntryColumn key={`${feedId}-${view}`} />
       </div>
-      {!inWideMode && <PanelSplitter {...separatorProps} isDragging={isDragging} />}
+      {!inWideMode && (
+        <PanelSplitter {...separatorProps} cursor={separatorCursor} isDragging={isDragging} />
+      )}
       <Outlet />
     </div>
   )

diff --git a/src/renderer/src/pages/(main)/layout.tsx b/src/renderer/src/pages/(main)/layout.tsx
@@ -126,7 +126,7 @@ const FeedResponsiveResizerContainer = ({
 }: {
   containerRef: React.RefObject<HTMLDivElement>
 } & PropsWithChildren) => {
-  const { isDragging, position, separatorProps } = useResizable({
+  const { isDragging, position, separatorProps, separatorCursor } = useResizable({
     axis: "x",
     min: 256,
     max: 300,
@@ -174,7 +174,7 @@ const FeedResponsiveResizerContainer = ({
   useEffect(() => {
     let timer: any
     if (feedColumnShow) {
-      // eslint-disable-next-line @eslint-react/web-api/no-leaked-timeout
+       
       timer = setTimeout(() => {
         setDelayShowSplitter(true)
       }, 200)
@@ -216,7 +216,9 @@ const FeedResponsiveResizerContainer = ({
         }}
       />
 
-      {delayShowSplitter && <PanelSplitter isDragging={isDragging} {...separatorProps} />}
+      {delayShowSplitter && (
+        <PanelSplitter isDragging={isDragging} cursor={separatorCursor} {...separatorProps} />
+      )}
     </>
   )
 }