src/components/ReferenceTables/RefItems/ItemsReferenceTable.jsx - master - DevDenzo/ERP

src/components/ReferenceTables/RefItems/ItemsReferenceTable.jsx
121 строка8 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Импорт базовых зависимостей
import React, { useEffect, useRef, useState } from 'react';
import classNames from 'classnames'; // Утилита для формирования комбинированных CSS‑классов

// Импорт компонентов таблицы из общего индекса
import { RefTableBase } from '../index.js';        // Базовый контейнер таблицы
import { ReferenceHeader } from '../index.js';    // Шапка таблицы (заголовки + чекбоксы)
import { FrozenColumn } from '../index.js';           // Зафиксированный первый столбец
import { DataTableBody } from '../index.js';       // Тело таблицы (данные + чекбоксы строк)

// Импорт хуков для интерактивности
import { useFrozenColumn } from '../../../hooks/ui/usefrozenColumn.js';      // Хук управления фиксацией столбца
import { useSelectableRows } from '../../../hooks/ui/useSelectableRows.js';  // Хук управления выбором строк

// Импорт данных справочника номенклатуры
import { materialItems } from '../../data/datasets/references/materialItems.js';

// Импорт стилей таблицы
import '../styles/_ref-data-table.less';

/**
 * Компонент справочника номенклатуры (ItemsReferenceTable)
 *
 * Назначение:
 * - отображение данных о номенклатуре в табличном формате;
 * - поддержка фиксации первого столбца при горизонтальной прокрутке;
 * - реализация механизма множественного выбора строк через чекбоксы;
 * - отслеживание горизонтальной прокрутки для возможных дополнительных эффектов.
 *
 * Основные компоненты:
 * - FrozenColumn: фиксирует первый столбец при прокрутке;
 * - RefTableBase: основной контейнер таблицы;
 * - ReferenceHeader: шапка с заголовками и чекбоксом выбора всех строк;
 * - DataTableBody: тело с данными и чекбоксами выбора строк.
 *
 * Используемые хуки:
 * - useRef: для получения ссылки на контейнер таблицы;
 * - useState: для хранения позиции горизонтальной прокрутки;
 * - useEffect: для подписки на события прокрутки;
 * - useFrozenColumn: управление фиксацией столбца;
 * - useSelectableRows: управление выбором строк.
 *
 * @returns {JSX.Element} Отрендеренная таблица с данными о номенклатуре
 */
const ItemsReferenceTable = () => {
    // Формируем список заголовков столбцов на основе ключей первой записи данных
    // Предполагается, что все объекты в materialItems имеют одинаковую структуру
    const materialItemsHeaders = Object.keys(materialItems[0]);

    // Ссылка на корневой контейнер таблицы для отслеживания прокрутки
    const containerRef = useRef(null);

    // Состояние для хранения текущей позиции горизонтальной прокрутки
    const [scrollX, setScrollX] = useState(0);

    // Хук для управления зафиксированным столбцом
    // Возвращает:
    // - isFrozenColumn: флаг активности фиксации столбца
    // - handleScrollFrozenColumn: обработчик прокрутки для поддержания фиксации
    const { isFrozenColumn, handleScrollFrozenColumn } = useFrozenColumn();

    // Хук для управления выбором строк
    // Возвращает:
    // - checkedRows: массив ID выбранных строк
    // - setCheckedRows: функция обновления списка выбранных строк
    // - handleCheckboxChange: обработчик изменения состояния чекбокса
    const { checkedRows, setCheckedRows, handleCheckboxChange } = useSelectableRows();


    // Эффект для подписки на событие прокрутки контейнера
    useEffect(() => {
        const handleScroll = () => {
            // Обновляем состояние с текущей позицией горизонтальной прокрутки
            setScrollX(containerRef.current.scrollLeft);
            // Логирование текущей позиции прокрутки (можно удалить/заменить при необходимости)
            console.log(scrollX);
        };

        // Подписываемся на событие прокрутки
        containerRef.current?.addEventListener('scroll', handleScroll);

        // Очищаем подписку при удалении компонента
        // eslint-disable-next-line react-hooks/exhaustive-deps
        return () => containerRef.current?.removeEventListener('scroll', handleScroll);
    }, [scrollX]); // Зависимость от scrollX — эффект будет перезапускаться при изменении


    return (
        <div
            ref={containerRef} // Привязываем ссылку к корневому контейнеру
            className={classNames('ref-table-container', {
                // Динамически добавляем класс при активации фиксации столбца
                'is-frozen-column': isFrozenColumn,
            })}
            onScroll={handleScrollFrozenColumn} // Обработчик прокрутки для фиксации столбца
        >
            {/* Компонент зафиксированного первого столбца */}
            <FrozenColumn items={materialItems} />

            {/* Основной контейнер таблицы */}
            <RefTableBase>
                {/* Шапка таблицы: заголовки и чекбокс выбора всех строк */}
                <ReferenceHeader
                    headerList={materialItemsHeaders}   // Список заголовков столбцов
                    checkedRows={checkedRows}           // Текущий список выбранных строк
                    setCheckedRows={setCheckedRows}     // Функция обновления выбора строк
                    items={materialItems}              // Данные для отображения
                />
                {/* Тело таблицы: строки данных с чекбоксами */}
                <DataTableBody
                    checkedRows={checkedRows}                     // Текущий список выбранных строк
                    handleCheckboxChange={handleCheckboxChange}    // Обработчик изменения чекбокса
                    renderItems={materialItems}                    // Данные для отрисовки строк
                />
            </RefTableBase>
        </div>
    );
};

// Экспорт компонента по умолчанию
export default ItemsReferenceTable;