39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { IconGripVertical } from "@tabler/icons-react";
|
|
import { Box, Divider, Stack } from "@mantine/core";
|
|
import OptionTableRow from "@/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionTableRow";
|
|
import { useSelectEditorContext } from "@/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext";
|
|
import SortableDnd from "@/components/dnd/SortableDnd";
|
|
|
|
const OptionsTable = () => {
|
|
const { options } = useSelectEditorContext();
|
|
const { onDragEnd } = useSelectEditorContext();
|
|
|
|
const renderDraggable = () => (
|
|
<Box p={"xs"}>
|
|
<IconGripVertical />
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<Stack gap={0}>
|
|
<Divider />
|
|
<SortableDnd
|
|
initialItems={options}
|
|
onDragEnd={onDragEnd}
|
|
renderItem={(item, renderDraggable) => (
|
|
<OptionTableRow
|
|
option={item}
|
|
renderDraggable={renderDraggable}
|
|
/>
|
|
)}
|
|
renderDraggable={renderDraggable}
|
|
dragHandleStyle={{ width: "auto" }}
|
|
vertical
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default OptionsTable;
|