gitscope
/
← marzneshin / dashboard/src/common/components/ui/sortable/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/common/components/ui/sortable/index.tsx · v0.6.4
Source
1 0178858 Dawsh 2y ago import React from "react"
2 0178858 Dawsh 2y ago import type {
3 0178858 Dawsh 2y ago DndContextProps,
4 0178858 Dawsh 2y ago UniqueIdentifier,
5 0178858 Dawsh 2y ago } from "@dnd-kit/core";
6 0178858 Dawsh 2y ago import {
7 0178858 Dawsh 2y ago closestCenter,
8 0178858 Dawsh 2y ago DndContext,
9 0178858 Dawsh 2y ago KeyboardSensor,
10 0178858 Dawsh 2y ago MouseSensor,
11 0178858 Dawsh 2y ago TouchSensor,
12 0178858 Dawsh 2y ago useSensor,
13 0178858 Dawsh 2y ago useSensors,
14 0178858 Dawsh 2y ago } from "@dnd-kit/core";
15 0178858 Dawsh 2y ago import {
16 0178858 Dawsh 2y ago restrictToParentElement,
17 0178858 Dawsh 2y ago restrictToVerticalAxis,
18 0178858 Dawsh 2y ago } from "@dnd-kit/modifiers";
19 0178858 Dawsh 2y ago import {
20 0178858 Dawsh 2y ago arrayMove,
21 0178858 Dawsh 2y ago SortableContext,
22 0178858 Dawsh 2y ago verticalListSortingStrategy,
23 0178858 Dawsh 2y ago type SortableContextProps,
24 0178858 Dawsh 2y ago } from "@dnd-kit/sortable";
25 0178858 Dawsh 2y ago import { SortableDragHandle } from "./drag-handle";
26 0178858 Dawsh 2y ago import { SortableItem } from "./item";
27 0178858 Dawsh 2y ago import { SortableOverlay } from "./overlay";
28 0178858 Dawsh 2y ago
29 0178858 Dawsh 2y ago interface SortableProps<TData extends { id: UniqueIdentifier }>
30 0178858 Dawsh 2y ago extends DndContextProps {
31 0178858 Dawsh 2y ago /**
32 0178858 Dawsh 2y ago * An array of data items that the sortable component will render.
33 0178858 Dawsh 2y ago * @example
34 0178858 Dawsh 2y ago * value={[
35 0178858 Dawsh 2y ago * { id: 1, name: 'Item 1' },
36 0178858 Dawsh 2y ago * { id: 2, name: 'Item 2' },
37 0178858 Dawsh 2y ago * ]}
38 0178858 Dawsh 2y ago */
39 0178858 Dawsh 2y ago value: TData[]
40 0178858 Dawsh 2y ago
41 0178858 Dawsh 2y ago /**
42 0178858 Dawsh 2y ago * An optional callback function that is called when the order of the data items changes.
43 0178858 Dawsh 2y ago * It receives the new array of items as its argument.
44 0178858 Dawsh 2y ago * @example
45 0178858 Dawsh 2y ago * onValueChange={(items) => console.log(items)}
46 0178858 Dawsh 2y ago */
47 0178858 Dawsh 2y ago onValueChange?: (items: TData[]) => void
48 0178858 Dawsh 2y ago
49 0178858 Dawsh 2y ago /**
50 0178858 Dawsh 2y ago * An optional callback function that is called when an item is moved.
51 0178858 Dawsh 2y ago * It receives an event object with `activeIndex` and `overIndex` properties, representing the original and new positions of the moved item.
52 0178858 Dawsh 2y ago * This will override the default behavior of updating the order of the data items.
53 0178858 Dawsh 2y ago * @type (event: { activeIndex: number; overIndex: number }) => void
54 0178858 Dawsh 2y ago * @example
55 0178858 Dawsh 2y ago * onMove={(event) => console.log(`Item moved from index ${event.activeIndex} to index ${event.overIndex}`)}
56 0178858 Dawsh 2y ago */
57 0178858 Dawsh 2y ago onMove?: (event: { activeIndex: number; overIndex: number }) => void
58 0178858 Dawsh 2y ago
59 0178858 Dawsh 2y ago /**
60 0178858 Dawsh 2y ago * A collision detection strategy that will be used to determine the closest sortable item.
61 0178858 Dawsh 2y ago * @default closestCenter
62 0178858 Dawsh 2y ago * @type DndContextProps["collisionDetection"]
63 0178858 Dawsh 2y ago */
64 0178858 Dawsh 2y ago collisionDetection?: DndContextProps["collisionDetection"]
65 0178858 Dawsh 2y ago
66 0178858 Dawsh 2y ago /**
67 0178858 Dawsh 2y ago * An array of modifiers that will be used to modify the behavior of the sortable component.
68 0178858 Dawsh 2y ago * @default
69 0178858 Dawsh 2y ago * [restrictToVerticalAxis, restrictToParentElement]
70 0178858 Dawsh 2y ago * @type Modifier[]
71 0178858 Dawsh 2y ago */
72 0178858 Dawsh 2y ago modifiers?: DndContextProps["modifiers"]
73 0178858 Dawsh 2y ago
74 0178858 Dawsh 2y ago /**
75 0178858 Dawsh 2y ago * A sorting strategy that will be used to determine the new order of the data items.
76 0178858 Dawsh 2y ago * @default verticalListSortingStrategy
77 0178858 Dawsh 2y ago * @type SortableContextProps["strategy"]
78 0178858 Dawsh 2y ago */
79 0178858 Dawsh 2y ago strategy?: SortableContextProps["strategy"]
80 0178858 Dawsh 2y ago
81 0178858 Dawsh 2y ago /**
82 0178858 Dawsh 2y ago * An optional React node that is rendered on top of the sortable component.
83 0178858 Dawsh 2y ago * It can be used to display additional information or controls.
84 0178858 Dawsh 2y ago * @default null
85 0178858 Dawsh 2y ago * @type React.ReactNode | null
86 0178858 Dawsh 2y ago * @example
87 0178858 Dawsh 2y ago * overlay={<Skeleton className="w-full h-8" />}
88 0178858 Dawsh 2y ago */
89 0178858 Dawsh 2y ago overlay?: React.ReactNode | null
90 0178858 Dawsh 2y ago }
91 0178858 Dawsh 2y ago
92 0178858 Dawsh 2y ago function Sortable<TData extends { id: UniqueIdentifier }>({
93 0178858 Dawsh 2y ago value,
94 0178858 Dawsh 2y ago onValueChange,
95 0178858 Dawsh 2y ago collisionDetection = closestCenter,
96 0178858 Dawsh 2y ago modifiers = [restrictToVerticalAxis, restrictToParentElement],
97 0178858 Dawsh 2y ago strategy = verticalListSortingStrategy,
98 0178858 Dawsh 2y ago onMove,
99 0178858 Dawsh 2y ago children,
100 0178858 Dawsh 2y ago overlay,
101 0178858 Dawsh 2y ago ...props
102 0178858 Dawsh 2y ago }: SortableProps<TData>) {
103 0178858 Dawsh 2y ago const [activeId, setActiveId] = React.useState<UniqueIdentifier | null>(null)
104 0178858 Dawsh 2y ago
105 0178858 Dawsh 2y ago const sensors = useSensors(
106 0178858 Dawsh 2y ago useSensor(MouseSensor),
107 0178858 Dawsh 2y ago useSensor(TouchSensor),
108 0178858 Dawsh 2y ago useSensor(KeyboardSensor)
109 0178858 Dawsh 2y ago )
110 0178858 Dawsh 2y ago
111 0178858 Dawsh 2y ago return (
112 0178858 Dawsh 2y ago <DndContext
113 0178858 Dawsh 2y ago modifiers={modifiers}
114 0178858 Dawsh 2y ago sensors={sensors}
115 0178858 Dawsh 2y ago onDragStart={({ active }) => setActiveId(active.id)}
116 0178858 Dawsh 2y ago onDragEnd={({ active, over }) => {
117 0178858 Dawsh 2y ago if (over && active.id !== over?.id) {
118 0178858 Dawsh 2y ago const activeIndex = value.findIndex((item) => item.id === active.id)
119 0178858 Dawsh 2y ago const overIndex = value.findIndex((item) => item.id === over.id)
120 0178858 Dawsh 2y ago
121 0178858 Dawsh 2y ago if (onMove) {
122 0178858 Dawsh 2y ago onMove({ activeIndex, overIndex })
123 0178858 Dawsh 2y ago } else {
124 0178858 Dawsh 2y ago onValueChange?.(arrayMove(value, activeIndex, overIndex))
125 0178858 Dawsh 2y ago }
126 0178858 Dawsh 2y ago }
127 0178858 Dawsh 2y ago setActiveId(null)
128 0178858 Dawsh 2y ago }}
129 0178858 Dawsh 2y ago onDragCancel={() => setActiveId(null)}
130 0178858 Dawsh 2y ago collisionDetection={collisionDetection}
131 0178858 Dawsh 2y ago {...props}
132 0178858 Dawsh 2y ago >
133 0178858 Dawsh 2y ago <SortableContext items={value} strategy={strategy}>
134 0178858 Dawsh 2y ago {children}
135 0178858 Dawsh 2y ago </SortableContext>
136 0178858 Dawsh 2y ago {overlay ? (
137 0178858 Dawsh 2y ago <SortableOverlay activeId={activeId}>{overlay}</SortableOverlay>
138 0178858 Dawsh 2y ago ) : null}
139 0178858 Dawsh 2y ago </DndContext>
140 0178858 Dawsh 2y ago )
141 0178858 Dawsh 2y ago }
142 0178858 Dawsh 2y ago
143 0178858 Dawsh 2y ago
144 0178858 Dawsh 2y ago export { Sortable, SortableDragHandle, SortableItem, SortableOverlay }