36 lines
917 B
TypeScript
36 lines
917 B
TypeScript
import React, { CSSProperties, ReactNode } from "react";
|
|
import { useDraggable } from "@dnd-kit/core";
|
|
|
|
type Props = {
|
|
id: number | string;
|
|
children: ReactNode;
|
|
style?: CSSProperties;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
const DragHandle = ({ id, children, style, disabled }: Props) => {
|
|
const { attributes, listeners, setNodeRef } = useDraggable({
|
|
id,
|
|
disabled,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
{...attributes}
|
|
{...listeners}
|
|
onTouchStart={e => !disabled && e.stopPropagation()}
|
|
onTouchMove={e => !disabled && e.stopPropagation()}
|
|
style={{
|
|
width: "100wv",
|
|
cursor: disabled ? "default" : "grab",
|
|
touchAction: disabled ? "auto" : "none",
|
|
...style,
|
|
}}
|
|
ref={setNodeRef}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DragHandle;
|