lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
31 lines • 4.19 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DraggableReorderList = DraggableReorderList;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
const lucide_react_1 = require("lucide-react");
const utils_1 = require("@/components/lib/utils");
function Item({ item, onRemove, removable, }) {
const dragControls = (0, framer_motion_1.useDragControls)();
return ((0, jsx_runtime_1.jsx)(framer_motion_1.Reorder.Item, { value: item, id: item.id, dragListener: false, dragControls: dragControls, className: "relative", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { layout: true, initial: { opacity: 0, y: -8, scale: 0.98 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, scale: 0.95, transition: { duration: 0.15 } }, whileDrag: {
scale: 1.03,
boxShadow: "0 16px 40px rgba(0,0,0,0.15)",
zIndex: 50,
}, transition: { type: "spring", stiffness: 350, damping: 30 }, onPointerDown: (e) => e.preventDefault(), className: (0, utils_1.cn)("flex items-center gap-3 rounded-xl border bg-background px-4 py-3", "shadow-sm hover:shadow-md transition-shadow cursor-default select-none"), children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { onPointerDown: (e) => dragControls.start(e), className: "flex-shrink-0 cursor-grab active:cursor-grabbing touch-none text-muted-foreground/40 hover:text-muted-foreground transition-colors", whileHover: { scale: 1.1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { className: "h-4 w-4" }) }), item.icon && ((0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 flex h-8 w-8 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: item.icon })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0 pointer-events-none", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium truncate select-none text-foreground", children: item.label }), item.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted-foreground truncate mt-0.5 select-none", children: item.description }))] }), removable && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.button, { type: "button", onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, className: "flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground/40 hover:text-destructive hover:bg-destructive/10 transition-colors focus:outline-none", whileHover: { scale: 1.15 }, whileTap: { scale: 0.9 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3.5 w-3.5" }) }))] }) }));
}
function DraggableReorderList({ items: initialItems, onReorder, removable = true, className, }) {
const [items, setItems] = (0, react_1.useState)(initialItems);
const handleReorder = (newOrder) => {
setItems(newOrder);
onReorder?.(newOrder);
};
const handleRemove = (id) => {
const next = items.filter((item) => item.id !== id);
setItems(next);
onReorder?.(next);
};
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("w-full select-none", className), style: { userSelect: "none" }, children: [(0, jsx_runtime_1.jsx)(framer_motion_1.Reorder.Group, { axis: "y", values: items, onReorder: handleReorder, className: "flex flex-col gap-2", as: "div", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: false, children: items.map((item) => ((0, jsx_runtime_1.jsx)(Item, { item: item, onRemove: handleRemove, removable: removable }, item.id))) }) }), items.length === 0 && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, className: "flex flex-col items-center justify-center rounded-xl border border-dashed py-10 text-muted-foreground gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "h-5 w-5 opacity-40" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: "All items removed" })] }))] }));
}
//# sourceMappingURL=draggable-reorder-list.js.map