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

src/components/ProjectTree/ProjectTree.tsx
108 строк3 KB
Cybran65
style: выравнивание модели, масштаб ленты и векторные иконки
09 авг 2026, 01:10
09 авг 2026, 01:109ead2b4
import { useState } from 'react';
import styles from './ProjectTree.module.css';
import TreeItem from './TreeItem';
import type { TreeNode } from '../../types';

interface Props {
  root: TreeNode;
  selectedId: string;
  expandedIds: string[];
  noteCounts: Record<string, number>;
  onSelect: (id: string) => void;
  onToggle: (id: string) => void;
  onClose: () => void;
}

/** Демонстрационные разделы вкладки «Библиотеки». */
const LIBRARIES = [
  'Конструкции — типовые',
  'Проёмы — двери и окна',
  'Материалы отделки',
  'Условные обозначения',
];

/** Правая панель: структура проекта, библиотеки и листы. */
export default function ProjectTree({
  root,
  selectedId,
  expandedIds,
  noteCounts,
  onSelect,
  onToggle,
  onClose,
}: Props) {
  const [tab, setTab] = useState<'structure' | 'libraries'>('structure');
  const [filter, setFilter] = useState('');

  return (
    <aside className={styles.panel}>
      <div className="panel-caption">
        <span>Структура</span>
        <button type="button" className={styles.close} title="Скрыть панель" onClick={onClose}>
          ✕
        </button>
      </div>

      <div className={styles.filter}>
        <input
          type="text"
          placeholder="Фильтр по названию"
          value={filter}
          onChange={(event) => setFilter(event.target.value)}
        />
      </div>

      <div className={styles.body}>
        {tab === 'structure' ? (
          <TreeItem
            node={root}
            depth={0}
            filter={filter.trim().toLowerCase()}
            selectedId={selectedId}
            expandedIds={expandedIds}
            noteCounts={noteCounts}
            onSelect={onSelect}
            onToggle={onToggle}
          />
        ) : (
          <ul className={styles.libraries}>
            {LIBRARIES.map((item) => (
              <li key={item}>{item}</li>
            ))}
            <li className={styles.librariesNote}>Состав библиотек уточняется</li>
          </ul>
        )}
      </div>

      <div className={styles.tabs}>
        <button
          type="button"
          className={tab === 'structure' ? styles.tabActive : styles.tab}
          onClick={() => setTab('structure')}
        >
          Структура
        </button>
        <button
          type="button"
          className={tab === 'libraries' ? styles.tabActive : styles.tab}
          onClick={() => setTab('libraries')}
        >
          Библиотеки
        </button>
      </div>

      <div className="panel-caption">
        <span>Листы</span>
      </div>

      <div className={styles.sheets}>
        <div className={styles.sheetsRow}>
          <span className={styles.sheetsGlyph}>❧</span> Листы
        </div>
        <div className={styles.sheetsRowNested}>
          <span className={styles.sheetsGlyph}>❧</span> Чертежи
        </div>
      </div>
    </aside>
  );
}