feat: modal resize and draggable to absolute position

Signed-off-by: Innei <i@innei.in>
RSSNext · Aug 10, 2024 · aad5eba · aad5eba
1 parent 71712f4
commit aad5eba
Show file tree

Hide file tree

Showing 5 changed files with 412 additions and 329 deletions.
diff --git a/src/renderer/src/components/ui/modal/stacked/hooks.tsx b/src/renderer/src/components/ui/modal/stacked/hooks.tsx
@@ -1,6 +1,8 @@
 import { getUISettings } from "@renderer/atoms/settings/ui"
 import { jotaiStore } from "@renderer/lib/jotai"
-import { useCallback, useContext, useId, useRef } from "react"
+import { useCallback, useContext, useId, useRef, useState } from "react"
+import { flushSync } from "react-dom"
+import { useEventCallback } from "usehooks-ts"
 
 import { modalStackAtom } from "./atom"
 import { CurrentModalContext } from "./context"
@@ -73,3 +75,42 @@ const actions = {
 }
 
 export const useCurrentModal = () => useContext(CurrentModalContext)
+
+export const useResizeableModal = (
+  modalElementRef: React.RefObject<HTMLDivElement>,
+  {
+    enableResizeable,
+  }: {
+    enableResizeable: boolean
+  },
+) => {
+  const [resizeableStyle, setResizeableStyle] = useState(
+    {} as React.CSSProperties,
+  )
+  const [isResizeable, setIsResizeable] = useState(false)
+
+  const handlePointDown = useEventCallback(() => {
+    if (!enableResizeable) return
+    if (isResizeable) return
+    const $modalElement = modalElementRef.current
+    if (!$modalElement) return
+
+    const rect = $modalElement.getBoundingClientRect()
+    const { x, y } = rect
+
+    flushSync(() => {
+      setIsResizeable(true)
+      setResizeableStyle({
+        position: "fixed",
+        top: `${y}px`,
+        left: `${x}px`,
+      })
+    })
+  })
+
+  return {
+    resizeableStyle,
+    isResizeable,
+    handlePointDown,
+  }
+}