src/components/ReferenceTables/RefMaterialStrength/RefTableMaterialStrength.jsx - master - DevDenzo/ERP

src/components/ReferenceTables/RefMaterialStrength/RefTableMaterialStrength.jsx
98 строк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 { materialsStrength } from '../../data/datasets/references/materialStrengthList.js';

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

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


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

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

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