memos/web/src/components/MemoEditor/SortableItem.tsx

26 lines
611 B
TypeScript

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
interface Props {
id: string;
className: string;
children: React.ReactNode;
}
const SortableItem: React.FC<Props> = ({ id, className, children }: Props) => {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
const style = {
transform: CSS.Transform.toString(transform),
transition,
};
return (
<div ref={setNodeRef} style={style} {...attributes} {...listeners} className={className}>
{children}
</div>
);
};
export default SortableItem;