src/components/ReferenceTables/RefProdOperations/RefTableProdOperations.jsx - master - DevDenzo/ERP

src/components/ReferenceTables/RefProdOperations/RefTableProdOperations.jsx
95 строк6 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Импорт базовых зависимостей
import React from 'react';
import classNames from 'classnames'; // Библиотека для комбинированного назначения CSS-классов


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


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


// Импорт данных справочника производственных операций
import { prodOperations } from '../../data/datasets/references/productOperationsList.js';

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

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


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

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


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

                {/* Тело таблицы: строки данных с чекбоксами выбора */}
                <DataTableBody
                    checkedRows={checkedRows}                     // Текущий список выбранных строк
                    handleCheckboxChange={handleCheckboxChange}    // Обработчик изменения чекбокса строки
                    renderItems={prodOperations}                    // Данные для отрисовки строк таблицы
                />
            </RefTableBase>
        </div>
    );
};

// Экспорт компонента по умолчанию для использования в других модулях
export default RefTableProdOperations;