@lobehub/ui/es/SortableList/components/SortableItem.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import FlexBasic_default from "../../Flex/FlexBasic.mjs";
import { variants } from "../style.mjs";
import { createContext, memo, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { cx } from "antd-style";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

//#region src/SortableList/components/SortableItem.tsx
const SortableItemContext = createContext({
	attributes: {},
	listeners: void 0,
	ref() {}
});
const SortableItem = memo(({ variant = "borderless", className, children, id, style, ...rest }) => {
	const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({ id });
	return /* @__PURE__ */ jsx(SortableItemContext, {
		value: useMemo(() => ({
			attributes,
			listeners,
			ref: setActivatorNodeRef
		}), [
			attributes,
			listeners,
			setActivatorNodeRef
		]),
		children: /* @__PURE__ */ jsx(FlexBasic_default, {
			align: "center",
			as: "li",
			className: cx(variants({ variant }), className),
			gap: 4,
			horizontal: true,
			ref: setNodeRef,
			style: {
				opacity: isDragging ? .4 : void 0,
				transform: CSS.Translate.toString(transform),
				transition,
				...style
			},
			...rest,
			children
		})
	});
});
SortableItem.displayName = "SortableItem";
var SortableItem_default = SortableItem;

//#endregion
export { SortableItemContext, SortableItem_default as default };
//# sourceMappingURL=SortableItem.mjs.map