🔧 ui(autoMate): Refactor CategoryItem component and useCategory hook

ui/autoMate/src/renderer/src/components/CategoryItem/index.tsx

@@ -13,8 +13,7 @@ export const CategoryItem = ({ category }: Props) => {
   const fetcher = useFetcher()
   const setEditCategoryId = useStore(state => state.setEditCategoryId)
   const editCategoryId = useStore(state => state.editCategoryId)
-  const { contextMenu } = useCategory()
-  const { updateContentCategory } = useContent()
+  const { contextMenu, dragHandle } = useCategory(category)
   return (
     <>
       {editCategoryId == category.id ? (
@@ -33,8 +32,8 @@ export const CategoryItem = ({ category }: Props) => {
             }
           />
         </div>
-      ) :
-        (<NavLink
+      ) : (
+      <NavLink
           onDoubleClick={
             (_e) => {
               setEditCategoryId(category.id)
@@ -45,19 +44,8 @@ export const CategoryItem = ({ category }: Props) => {
           className={({ isActive }) => {
             return isActive ? styles.active : styles.link
           }}
-          onContextMenu={contextMenu(category)}
-          onDragOver={(e)=>{
-            e.preventDefault()
-            e.currentTarget.classList.add(styles.draging)
-          }}
-          onDragLeave={(e)=>{
-            e.currentTarget.classList.remove(styles.draging)
-          }}
-          onDrop={(e)=>{
-            e.currentTarget.classList.remove(styles.draging)
-            const id = e.dataTransfer.getData("id")
-            updateContentCategory(Number(id), category.id)
-          }}
+          onContextMenu={contextMenu()}
+          {...dragHandle}
         >
           <div className="flex items-center gap-1">
             <FolderClose theme="outline" size="12" strokeWidth={3}></FolderClose>

ui/autoMate/src/renderer/src/components/CategoryItem/styles.module.scss

@@ -25,7 +25,3 @@ $height: 32px;
         @apply h-full w-full rounded-md px-2 border outline-none;
     }
 }
-
-.draging{
-    @apply bg-slate-400 text-white;
-}

ui/autoMate/src/renderer/src/hooks/useCategory.tsx

@@ -1,23 +0,0 @@
-import { Delete } from "@icon-park/react"
-import { useContextMenu } from "mantine-contextmenu"
-import { useSubmit } from "react-router-dom"
-
-export default ()=>{
-    const submit = useSubmit()
-    const { showContextMenu } = useContextMenu()
-
-    const contextMenu = (category: CategoryType) => {
-        return showContextMenu([
-            {
-              key: 'remove',
-              icon: <Delete theme="outline" size="18" strokeWidth={3} />,
-              title: '删除动作',
-              onClick: () => {
-                submit({ id: category.id }, { method: 'DELETE' })
-              },
-            }
-          ],
-            { className: 'contextMenu' })
-        }
-    return {contextMenu}
-}

ui/autoMate/src/renderer/src/hooks/useCategory/index.tsx

@@ -0,0 +1,45 @@
+import { Delete } from "@icon-park/react"
+import { useContextMenu } from "mantine-contextmenu"
+import { useSubmit } from "react-router-dom"
+import styles from "./styles.module.scss"
+import useContent from "../useContent"
+import { DragEvent } from "react"
+export default (category: CategoryType)=>{
+    const submit = useSubmit()
+    const { showContextMenu } = useContextMenu()
+    const {updateContentCategory} = useContent()
+
+    const contextMenu = () => {
+        return showContextMenu([
+            {
+              key: 'remove',
+              icon: <Delete theme="outline" size="18" strokeWidth={3} />,
+              title: '删除动作',
+              onClick: () => {
+                submit({ id: category.id }, { method: 'DELETE' })
+              },
+            }
+          ],
+            { className: 'contextMenu' })
+        }
+
+    const dragHandle = {
+      onDragOver: (e: DragEvent)=>{
+        e.preventDefault()
+        e!.dataTransfer!.dropEffect= 'move'
+        const el = e.currentTarget as HTMLDivElement
+        el.classList.add(styles.draging)
+      },
+      onDragLeave: (e: DragEvent)=>{
+        const el = e.currentTarget as HTMLDivElement
+        el.classList.remove(styles.draging)
+      },
+      onDrop: (e: DragEvent)=>{
+        const el = e.currentTarget as HTMLDivElement
+        el.classList.remove(styles.draging)
+        const id = e.dataTransfer!.getData("id")
+        updateContentCategory(Number(id), category.id)
+      }
+    }
+    return {contextMenu, dragHandle}
+}

ui/autoMate/src/renderer/src/hooks/useCategory/styles.module.scss

@@ -0,0 +1,4 @@
+
+.draging{
+    @apply bg-slate-400 text-white;
+}