gitscope
/
← marzneshin / dashboard/src/components/ui/sortable/item.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/ui/sortable/item.tsx · v0.3.2
Source
1 0178858 Dawsh 2y ago import React from "react"
2 0178858 Dawsh 2y ago import { CSS } from "@dnd-kit/utilities"
3 0178858 Dawsh 2y ago import { Slot, type SlotProps } from "@radix-ui/react-slot"
4 0178858 Dawsh 2y ago import { useSortable } from "@dnd-kit/sortable"
5 0178858 Dawsh 2y ago import { composeRefs, cn } from "@marzneshin/utils"
6 0178858 Dawsh 2y ago import type {
7 0178858 Dawsh 2y ago UniqueIdentifier,
8 0178858 Dawsh 2y ago } from "@dnd-kit/core"
9 0178858 Dawsh 2y ago
10 0178858 Dawsh 2y ago import { SortableItemContext } from "./context"
11 0178858 Dawsh 2y ago
12 0178858 Dawsh 2y ago interface SortableItemProps extends SlotProps {
13 0178858 Dawsh 2y ago value: UniqueIdentifier
14 0178858 Dawsh 2y ago asChild?: boolean
15 0178858 Dawsh 2y ago }
16 0178858 Dawsh 2y ago
17 0178858 Dawsh 2y ago export const SortableItem = React.forwardRef<HTMLDivElement, SortableItemProps>(
18 0178858 Dawsh 2y ago ({ asChild, className, value, ...props }, ref) => {
19 0178858 Dawsh 2y ago const {
20 0178858 Dawsh 2y ago attributes,
21 0178858 Dawsh 2y ago listeners,
22 0178858 Dawsh 2y ago setNodeRef,
23 0178858 Dawsh 2y ago transform,
24 0178858 Dawsh 2y ago transition,
25 0178858 Dawsh 2y ago isDragging,
26 0178858 Dawsh 2y ago } = useSortable({ id: value })
27 0178858 Dawsh 2y ago
28 0178858 Dawsh 2y ago const context = React.useMemo(
29 0178858 Dawsh 2y ago () => ({
30 0178858 Dawsh 2y ago attributes,
31 0178858 Dawsh 2y ago listeners,
32 0178858 Dawsh 2y ago }),
33 0178858 Dawsh 2y ago [attributes, listeners]
34 0178858 Dawsh 2y ago )
35 0178858 Dawsh 2y ago const style: React.CSSProperties = {
36 0178858 Dawsh 2y ago opacity: isDragging ? 0.4 : undefined,
37 0178858 Dawsh 2y ago transform: CSS.Translate.toString(transform),
38 0178858 Dawsh 2y ago transition,
39 0178858 Dawsh 2y ago }
40 0178858 Dawsh 2y ago
41 0178858 Dawsh 2y ago const Comp = asChild ? Slot : "div"
42 0178858 Dawsh 2y ago
43 0178858 Dawsh 2y ago return (
44 0178858 Dawsh 2y ago <SortableItemContext.Provider value={context}>
45 0178858 Dawsh 2y ago <Comp
46 0178858 Dawsh 2y ago className={cn(isDragging && "cursor-grabbing", className)}
47 0178858 Dawsh 2y ago ref={composeRefs(ref, setNodeRef as React.Ref<HTMLDivElement>)}
48 0178858 Dawsh 2y ago style={style}
49 0178858 Dawsh 2y ago {...props}
50 0178858 Dawsh 2y ago />
51 0178858 Dawsh 2y ago </SortableItemContext.Provider>
52 0178858 Dawsh 2y ago )
53 0178858 Dawsh 2y ago }
54 0178858 Dawsh 2y ago )
55 0178858 Dawsh 2y ago SortableItem.displayName = "SortableItem"