Latest changes

src/Griddy/features/tree/TreeExpandButton.tsx

@@ -0,0 +1,69 @@
+import { Loader } from '@mantine/core';
+import type { ReactNode } from 'react';
+
+import styles from '../../styles/griddy.module.css';
+
+interface TreeExpandButtonProps {
+  canExpand: boolean;
+  isExpanded: boolean;
+  isLoading?: boolean;
+  onToggle: () => void;
+  icons?: {
+    collapsed?: ReactNode;
+    expanded?: ReactNode;
+    leaf?: ReactNode;
+  };
+}
+
+const DEFAULT_ICONS = {
+  collapsed: '\u25B6', // ►
+  expanded: '\u25BC', // ▼
+  leaf: null,
+};
+
+export function TreeExpandButton({
+  canExpand,
+  isExpanded,
+  isLoading = false,
+  onToggle,
+  icons = DEFAULT_ICONS,
+}: TreeExpandButtonProps) {
+  const displayIcons = { ...DEFAULT_ICONS, ...icons };
+
+  // If loading, show spinner
+  if (isLoading) {
+    return (
+      <button
+        className={styles['griddy-tree-expand-button']}
+        disabled
+        style={{ cursor: 'wait' }}
+        type="button"
+      >
+        <Loader size="xs" />
+      </button>
+    );
+  }
+
+  // If can't expand (leaf node), show leaf icon or empty space
+  if (!canExpand) {
+    return (
+      <span className={styles['griddy-tree-expand-button']} style={{ cursor: 'default' }}>
+        {displayIcons.leaf || <span style={{ width: 20 }} />}
+      </span>
+    );
+  }
+
+  // Show expand/collapse icon
+  return (
+    <button
+      className={styles['griddy-tree-expand-button']}
+      onClick={(e) => {
+        e.stopPropagation();
+        onToggle();
+      }}
+      type="button"
+    >
+      {isExpanded ? displayIcons.expanded : displayIcons.collapsed}
+    </button>
+  );
+}