src/components/AppContainers/TableContainer/TableContainer.jsx - master - DevDenzo/ERP

src/components/AppContainers/TableContainer/TableContainer.jsx
69 строк3 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Подключаем библиотеку React для взаимодействия с JSX
import React, {
    useEffect,
    memo
} from "react";

// Импорт утилиты для объединения CSS-классов
import classNames from 'classnames';

// Импорт кастомного хука для отслеживания и управления высотой окна браузера
import { useChangeHeight } from '../../../hooks/ui/useChangeHeight.js';

// Подключение стилей контейнера главной таблицы (LESS)
import './styles/_table-container.less';

/**
 * Контейнер основной таблицы для десктопной версии интерфейса
 *
 * Компонент отвечает за:
 * - отслеживание высоты окна браузера;
 * - динамическое вычисление максимальной высоты таблицы;
 * - обработку событий изменения размера окна;
 * - корректное размонтирование с очисткой обработчиков.
 *
 * @param {Object} props - Пропсы компонента
 * @param {ReactNode} props.children - Содержимое, оборачиваемое в контейнер
 * @returns {JSX.Element} Отрендеренный контейнер таблицы
 */
const TableContainer = memo(({ children }) => {
    // Получаем текущее значение высоты окна и функцию её обновления
    const { changeHeight, handleChangeHeight } = useChangeHeight();

    // Эффект для инициализации и отслеживания изменения высоты окна
    useEffect(() => {
        // Инициализируем начальное значение высоты при монтировании компонента
        handleChangeHeight();

        // Подписываемся на событие изменения размера окна
        document.addEventListener('resize', handleChangeHeight);

        // Функция очистки при размонтировании компонента
        return () => {
            // Отписываемся от события изменения размера окна
            document.removeEventListener('resize', handleChangeHeight);
        };
    }, [handleChangeHeight]); // Зависимость от функции обновления высоты

    /**
     * Рендеринг контейнера таблицы
     *
     * - Применяет CSS-класс контейнера через утилиту classNames;
     * - Динамически вычисляет максимальную высоту (высота окна минус 150px);
     * - Передаёт дочерние элементы внутрь контейнера.
     */
    return (
        <div
            className={classNames('desktop-table-container')}
            style={{
                // Вычисляем максимальную высоту контейнера
                // на основе текущей высоты окна за вычетом отступа (150px)
                maxHeight: `${changeHeight - 150}px`,
            }}
        >
            { children }
        </div>
    );
});

export default TableContainer;