src/components/ProjectTree/TreeItem.tsx - master - Cybran65/Project_0

src/components/ProjectTree/TreeItem.tsx
92 строки3 KB
Cybran65
feat: интерактивный прототип интерфейса МИСИ-САПР
08 авг 2026, 22:59
08 авг 2026, 22:596df5b61
import styles from './ProjectTree.module.css';
import type { TreeNode } from '../../types';

interface Props {
  node: TreeNode;
  depth: number;
  filter: string;
  selectedId: string;
  expandedIds: string[];
  /** Количество заметок по идентификатору объекта. */
  noteCounts: Record<string, number>;
  onSelect: (id: string) => void;
  onToggle: (id: string) => void;
}

/** Проверка попадания ветки под фильтр (совпадение узла или потомка). */
function matches(node: TreeNode, filter: string): boolean {
  if (!filter) return true;
  if (node.label.toLowerCase().includes(filter)) return true;
  return (node.children ?? []).some((child) => matches(child, filter));
}

export default function TreeItem({
  node,
  depth,
  filter,
  selectedId,
  expandedIds,
  noteCounts,
  onSelect,
  onToggle,
}: Props) {
  if (!matches(node, filter)) return null;

  const hasChildren = Boolean(node.children?.length);
  // При активном фильтре ветки раскрываются автоматически.
  const expanded = filter ? true : expandedIds.includes(node.id);
  const selected = node.id === selectedId;

  return (
    <div className={styles.item}>
      <div
        className={selected ? styles.rowSelected : styles.row}
        style={{ paddingLeft: 4 + depth * 13 }}
        onClick={() => onSelect(node.id)}
        onDoubleClick={() => hasChildren && onToggle(node.id)}
      >
        {hasChildren ? (
          <button
            type="button"
            className={styles.twisty}
            title={expanded ? 'Свернуть' : 'Развернуть'}
            onClick={(event) => {
              event.stopPropagation();
              onToggle(node.id);
            }}
          >
            {expanded ? '▾' : '▸'}
          </button>
        ) : (
          <span className={styles.twistyEmpty} />
        )}
        <span className={styles.glyph}>{node.glyph}</span>
        <span className={styles.label}>{node.label}</span>
        {noteCounts[node.id] > 0 && (
          <span className={styles.notes} title={`Заметок: ${noteCounts[node.id]}`}>
            ✎ {noteCounts[node.id]}
          </span>
        )}
        <span className={styles.kind}>{node.kind}</span>
      </div>

      {hasChildren && expanded && (
        <div>
          {node.children?.map((child) => (
            <TreeItem
              key={child.id}
              node={child}
              depth={depth + 1}
              filter={filter}
              selectedId={selectedId}
              expandedIds={expandedIds}
              noteCounts={noteCounts}
              onSelect={onSelect}
              onToggle={onToggle}
            />
          ))}
        </div>
      )}
    </div>
  );
}