From d173d8e7b2ed3873382c1b86b1efd0f10e5df91e Mon Sep 17 00:00:00 2001 From: ruotongyu Date: Thu, 20 Jun 2024 20:38:11 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20ui(autoMate):=20Refactor=20Categ?= =?UTF-8?q?oryItem=20component=20and=20useCategory=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/CategoryItem/index.tsx | 22 +++------ .../CategoryItem/styles.module.scss | 4 -- .../src/renderer/src/hooks/useCategory.tsx | 23 ---------- .../renderer/src/hooks/useCategory/index.tsx | 45 +++++++++++++++++++ .../src/hooks/useCategory/styles.module.scss | 4 ++ 5 files changed, 54 insertions(+), 44 deletions(-) delete mode 100644 ui/autoMate/src/renderer/src/hooks/useCategory.tsx create mode 100644 ui/autoMate/src/renderer/src/hooks/useCategory/index.tsx create mode 100644 ui/autoMate/src/renderer/src/hooks/useCategory/styles.module.scss diff --git a/ui/autoMate/src/renderer/src/components/CategoryItem/index.tsx b/ui/autoMate/src/renderer/src/components/CategoryItem/index.tsx index 8acf6ea..2a64a4e 100644 --- a/ui/autoMate/src/renderer/src/components/CategoryItem/index.tsx +++ b/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) => { } /> - ) : - ( { 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} >
diff --git a/ui/autoMate/src/renderer/src/components/CategoryItem/styles.module.scss b/ui/autoMate/src/renderer/src/components/CategoryItem/styles.module.scss index 01e2ab2..3baf80a 100644 --- a/ui/autoMate/src/renderer/src/components/CategoryItem/styles.module.scss +++ b/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; -} \ No newline at end of file diff --git a/ui/autoMate/src/renderer/src/hooks/useCategory.tsx b/ui/autoMate/src/renderer/src/hooks/useCategory.tsx deleted file mode 100644 index 717be80..0000000 --- a/ui/autoMate/src/renderer/src/hooks/useCategory.tsx +++ /dev/null @@ -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: , - title: '删除动作', - onClick: () => { - submit({ id: category.id }, { method: 'DELETE' }) - }, - } - ], - { className: 'contextMenu' }) - } - return {contextMenu} -} \ No newline at end of file diff --git a/ui/autoMate/src/renderer/src/hooks/useCategory/index.tsx b/ui/autoMate/src/renderer/src/hooks/useCategory/index.tsx new file mode 100644 index 0000000..c9ea3ca --- /dev/null +++ b/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: , + 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} +} \ No newline at end of file diff --git a/ui/autoMate/src/renderer/src/hooks/useCategory/styles.module.scss b/ui/autoMate/src/renderer/src/hooks/useCategory/styles.module.scss new file mode 100644 index 0000000..7d7c2bf --- /dev/null +++ b/ui/autoMate/src/renderer/src/hooks/useCategory/styles.module.scss @@ -0,0 +1,4 @@ + +.draging{ + @apply bg-slate-400 text-white; +} \ No newline at end of file