Object data

client/src/components/map/MapTree/MapTreeCheckbox.tsx

@@ -0,0 +1,39 @@
+import { Checkbox, Group, RenderTreeNodePayload } from "@mantine/core";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useEffect } from "react";
+
+export const MapTreeCheckbox = ({
+    node,
+    expanded,
+    hasChildren,
+    elementProps,
+    tree,
+}: RenderTreeNodePayload) => {
+    const checked = tree.isNodeChecked(node.value);
+    const indeterminate = tree.isNodeIndeterminate(node.value);
+
+    useEffect(() => {
+        console.log(node.value)
+    }, [checked])
+
+    return (
+        <Group gap="xs" {...elementProps}>
+            <Checkbox.Indicator
+                checked={checked}
+                indeterminate={indeterminate}
+                onClick={() => (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
+            />
+
+            <Group gap={5} onClick={() => tree.toggleExpanded(node.value)}>
+                <span>{node.label}</span>
+
+                {hasChildren && (
+                    <IconChevronDown
+                        size={14}
+                        style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
+                    />
+                )}
+            </Group>
+        </Group>
+    );
+};