@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
55 lines (54 loc) • 2.7 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { DndContext } from "@dnd-kit/core";
import { SortableContext } from "@dnd-kit/sortable";
import external_MultiSelectDisplayListItem_mjs_default from "./MultiSelectDisplayListItem.mjs";
import useLocalPagination_mjs_default from "../../../hooks/useLocalPagination.mjs";
import { Pagination } from "../../Pagination.mjs";
const MultiSelectDisplayList = ({ formData, schema, onRemoveClick, deletable = true, sortable = false, onUpdateFormData, pagination })=>{
const { dataToRender, handlePageChange, totalPages, pageIndex } = useLocalPagination_mjs_default(formData, pagination ? pagination.perPage ?? 20 : void 0);
const onDragEnd = (event)=>{
const { active, over } = event;
if (active.id !== over?.id) {
const activeIndex = formData.findIndex((value)=>value.value === active.id);
const overIndex = formData.findIndex((value)=>value.value === over?.id);
const newFormData = [
...formData
];
newFormData.splice(overIndex, 0, newFormData.splice(activeIndex, 1)[0]);
onUpdateFormData?.(newFormData);
}
};
const renderList = ()=>/*#__PURE__*/ jsxs("div", {
className: "flex flex-col gap-2",
children: [
/*#__PURE__*/ jsx("ul", {
className: "text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted space-y-2",
children: dataToRender?.map((value)=>/*#__PURE__*/ jsx(external_MultiSelectDisplayListItem_mjs_default, {
item: value,
onRemoveClick: onRemoveClick,
deletable: deletable,
sortable: sortable,
schema: schema
}, value.value))
}),
!!pagination && /*#__PURE__*/ jsx("div", {
className: "self-end",
children: /*#__PURE__*/ jsx(Pagination, {
currentPageIndex: pageIndex,
totalPageCount: totalPages,
onPageChange: handlePageChange
})
})
]
});
if (!sortable) return renderList();
return /*#__PURE__*/ jsx(DndContext, {
onDragEnd: onDragEnd,
children: /*#__PURE__*/ jsx(SortableContext, {
items: formData?.map((value)=>value.value) ?? [],
children: renderList()
})
});
};
const MultiSelect_MultiSelectDisplayList = MultiSelectDisplayList;
export { MultiSelect_MultiSelectDisplayList as default };