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

src/components/AppContainers/MenuAppContainer/MenuAppContainer.jsx
106 строк5 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Импорт базовых инструментов React
import React, {
    useState,    // Хук для управления локальным состоянием компонента
    useEffect,    // Хук для выполнения побочных эффектов (например, подписка на события)
    memo         // Хук для мемоизации компонента (оптимизация перерендера)
} from 'react';

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

// Импорт библиотеки для типизации и валидации пропсов
import PropTypes from 'prop-types';

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

// Импорт стилей компонента (LESS)
import './styles/_menu-app-container.less';

/**
 * Компонент меню приложений рабочего пространства
 *
 * Отвечает за:
 * - отображение и управление состоянием меню приложений;
 * - динамическое вычисление высоты контейнера на основе размера окна;
 * - обработку событий скролла для актуализации высоты;
 * - переключение активного состояния меню по клику.
 *
 * @param {Object} props - Пропсы компонента
 * @param {ReactNode} props.children - Содержимое меню (обязательный параметр)
 * @returns {JSX.Element} Отрендеренный контейнер меню приложений
 */
const MenuAppContainer = memo(({ children }) => {
    // Состояние активности меню (открыто/закрыто)
    const [active, setActive] = useState(false);

    // Получаем текущие значения высоты окна и функцию её обновления
    const { changeHeight, handleChangeHeight } = useChangeHeight();

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

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

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

    /**
     * Обработчик переключения состояния меню
     *
     * Инвертирует текущее состояние активности (true ↔ false)
     */
    const handleActiveState = () => {
        setActive((prevState) => !prevState);
    };

    /**
     * Рендеринг контейнера меню приложений
     *
     * - Применяет CSS-классы: базовый ('menu-app-container') и условный ('has-active' при active=true);
     * - Динамически задаёт высоту контейнера на основе changeHeight;
     * - Ограничивает максимальную высоту (800px);
     * - Обрабатывает клик для переключения состояния меню.
     */
    return (
        <div
            className={classNames('menu-app-container', {
                'has-active': active,
            })}
            style={{
                // Максимальная допустимая высота контейнера
                // Ограничивает рост элемента до полной высоты окна (changeHeight)
                // Предотвращает выход за границы видимой области при большом контенте
                maxHeight: `${changeHeight * .5}px`,

                // Вертикальная прокрутка при превышении максимальной высоты
                // Автоматически добавляет скроллбар, если содержимое не помещается в контейнер
                overflowY: 'auto'
            }}

            onClick={handleActiveState} // Переключение состояния по клику
        >
            { children }
        </div>
    );
});

/**
 * Валидация пропсов компонента
 *
 * Гарантирует, что:
 * - компонент получает обязательный пропс `children` (любой React-узел);
 * - при отсутствии `children` будет выдано предупреждение в разработке.
 */
MenuAppContainer.propTypes = {
    children: PropTypes.node.isRequired, // Обязательный пропс: содержимое меню
};

export default MenuAppContainer;