[enhancement]: support reordering homepage (#494)

* [enhancement]: support reordering homepage --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>
2026-06-12 07:12:58 +02:00 · 2024-02-14 01:56:08 +00:00
parent 83d5fee442
commit f796a35f5c
7 changed files with 345 additions and 175 deletions
@@ -0,0 +1,51 @@
+import { Group } from '@mantine/core';
+import { useDragControls, Reorder } from 'framer-motion';
+import { MdDragIndicator } from 'react-icons/md';
+import { Checkbox } from '/@/renderer/components';
+
+const DragHandle = ({ dragControls }: any) => {
+    return (
+        <MdDragIndicator
+            color="white"
+            style={{ cursor: 'grab' }}
+            onPointerDown={(event) => dragControls.start(event)}
+        />
+    );
+};
+
+interface SidebarItem {
+    disabled: boolean;
+    id: string;
+}
+
+export interface DraggableItemProps {
+    handleChangeDisabled: (id: string, e: boolean) => void;
+    item: SidebarItem;
+    value: string;
+}
+
+export const DraggableItem = ({ item, value, handleChangeDisabled }: DraggableItemProps) => {
+    const dragControls = useDragControls();
+
+    return (
+        <Reorder.Item
+            as="div"
+            dragControls={dragControls}
+            dragListener={false}
+            value={item}
+        >
+            <Group
+                noWrap
+                h="3rem"
+                style={{ boxShadow: '0 1px 3px rgba(0,0,0,.1)' }}
+            >
+                <Checkbox
+                    checked={!item.disabled}
+                    onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
+                />
+                <DragHandle dragControls={dragControls} />
+                {value}
+            </Group>
+        </Reorder.Item>
+    );
+};