src/components/ReferenceTables/RefExecutions/RefTableExecutions.jsx - master - DevDenzo/ERP

src/components/ReferenceTables/RefExecutions/RefTableExecutions.jsx
94 строки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 { FrozenColumn } from '../index.js';         // Компонент зафиксированного первого столбца
import { DataTableBody } from '../index.js';       // Компонент тела таблицы (данные + чекбоксы строк)


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

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

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

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

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

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

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