src/components/ProductionTables/CommonTable/CommonTable.jsx - master - DevDenzo/ERP

src/components/ProductionTables/CommonTable/CommonTable.jsx
137 строк8 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Импорты базовых зависимостей
import React, { memo, useContext } from 'react';                // Основной импорт React и хука memo для мемоизации компонента
import classNames from 'classnames';                 // Утилита для гибкого формирования className
import PropTypes from 'prop-types';                  // Библиотека для типизации пропсов компонента

// Импорт UI‑компонентов из общей точки входа
import { DesktopTableContainer } from '../../NavSections/components/index.js';
import { HorizontalFrozenColumn } from '../../NavSections/components/index.js';
import { DesktopPagesNavigator } from '../../NavSections/components/index.js';

// Хранилище состояния активных тем (white, gray, dark) для всего приложения
import { ThemesContext } from "../../../contexts/ThemesContext.js";

// Импорт иконок из react-bootstrap
import { Check } from 'react-bootstrap-icons';      // Иконка галочки для чекбоксов

// Импорт стилей компонента
import './styles/_common-table.less';                        // Стили основной таблицы

/**
 * Компонент универсальной таблицы с замороженными колонками и пагинацией
 *
 * Реализует:
 * - мемоизацию для оптимизации рендеринга;
 * - отображение данных в табличном виде;
 * - чекбоксы в первой колонке;
 * - замороженную горизонтальную колонку;
 * - навигацию по страницам;
 * - гибкое управление высотой через пропс offset.
 *
 * @param {Object} props - Пропсы компонента
 * @param {Array} props.tableData - Массив объектов с данными для отображения в таблице
 * @param {number} [props.offset] - Смещение/высота для позиционирования элементов (передаётся дочерним компонентам)
 * @returns {JSX.Element} Отрендеренная таблица со всеми элементами интерфейса
 */
const CommonTable = memo(({ tableData, offset }) => {
    const { loadedThemes } = useContext(ThemesContext);

    // Рендеринг основной таблицы внутри контейнера с ограниченной высотой
    return (
            <DesktopTableContainer maxHeight={offset}>
                <table
                    className={classNames(
                        'table',
                        'table-borderless',
                        'text-center',
                        'common-table'
                    )}
                >
                    <tbody className={classNames('common-table__body')}>
                    {tableData.map((item) => (
                        <tr
                            key={item.id}
                            className={classNames('bg-transparent', 'common-table__row')}
                        >
                            {Object.values(item).map((value, index) => (
                                index === 0 ? (
                                    // Первая колонка: чекбокс для выбора строки
                                    <td
                                        key={`${item.id}-${index}`}
                                        className={classNames(
                                        'common-table__cell',
                                            {
                                                'common-table__cell--white': loadedThemes['white'],
                                                'common-table__cell--gray': loadedThemes['gray'],
                                                'common-table__cell--dark': loadedThemes['dark']
                                            }
                                        )}
                                    >
                                        <div
                                            className={classNames(
                                                'form-check',
                                                'common-table__checkbox-wrapper'
                                            )}
                                        >
                                            <input
                                                type="checkbox"
                                                className={classNames(
                                                    'form-check-input',
                                                    'common-table__checkbox-input'
                                                )}
                                            />
                                            <label
                                                className={classNames(
                                                    'checkbox-label',
                                                    'common-table__custom-checkbox',
                                                    {
                                                        'common-table__custom-checkbox--white': loadedThemes['white'],
                                                        'common-table__custom-checkbox--gray': loadedThemes['gray'],
                                                        'common-table__custom-checkbox--dark': loadedThemes['dark']
                                                    }
                                                )}
                                            >
                                                <Check size={22} />
                                            </label>
                                        </div>
                                    </td>
                                ) : (
                                    // Остальные колонки: текстовые значения
                                    <td
                                        key={`${item.id}-${index}`}
                                        className={classNames(
                                        'common-table__cell',
                                            {
                                                'common-table__cell--white': loadedThemes['white'],
                                                'common-table__cell--gray': loadedThemes['gray'],
                                                'common-table__cell--dark': loadedThemes['dark']
                                            }
                                        )}
                                    >
                                        <div className={classNames('common-table__cell-text')}>
                                            {value}
                                        </div>
                                    </td>
                                )
                            ))}
                        </tr>
                    ))}
                    </tbody>
                </table>

                {/* Замороженная горизонтальная колонка (например, для действий) */}
                <HorizontalFrozenColumn offset={offset} />

                {/* Навигатор по страницам таблицы */}
                <DesktopPagesNavigator offset={offset} />
            </DesktopTableContainer>
    );
});

// Типизация пропсов компонента
CommonTable.propTypes = {
    tableData: PropTypes.array.isRequired, // Обязательный массив данных для таблицы
    offset: PropTypes.number               // Необязательный числовой пропс для смещения/высоты
};

export default CommonTable;