src/app-core/Navigation/components/PrimaryNavWrapper/PrimaryNavWrapperView.jsx - master - DevDenzo/ERP

src/app-core/Navigation/components/PrimaryNavWrapper/PrimaryNavWrapperView.jsx
118 строк5 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
/**
 * Презентационный компонент контейнера навигационного списка (PrimaryNavWrapperView)
 *
 * Отвечает за:
 * - отображение загрузчика во время инициализации;
 * - условный рендеринг содержимого (спиннер или меню);
 * - динамическое применение стилей на основе контекста;
 * - отрисовку навигационного списка через компонент NavbarList.
 *
 * Является "глупым" компонентом — не управляет данными, а получает их через контекст.
 */

// Импортируем React и необходимые хуки
import React, {
    useState,    // Хук для управления локальным состоянием (загрузка)
    useEffect,    // Хук для побочных эффектов (таймер загрузки)
    useContext   // Хук для получения данных из контекста
} from 'react';

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

// Импортируем компонент навигационного списка
import { PrimaryNavList } from "../index.js";

// Импортируем спиннер-загрузчик
import { Spinner } from '../../../../components/Loaders/MainBootLoader/index.js';

// Импортируем контексты для получения состояния интерфейса
import { ButtonStretchMenuContext } from '../contexts/buttonStretchMenuContext.js';
// Подключаем контекст основной навигационной панели
import { PrimaryNavListContext } from '../contexts/primaryNavListContext.js';
// Подключаем контекст списка выбора темы
import { ThemesContext } from "../../../../contexts/ThemesContext.js";

// Импортируем стили компонента
import './style/_primary-nav-wrapper.less';

/**
 * Презентационный компонент контейнера навигационного списка
 *
 * @returns {JSX.Element} Отрендеренный контейнер меню с динамическими стилями
 */
const PrimaryNavWrapperView = () => {
    // Состояние загрузки компонента (по умолчанию — true)
    const [loading, setLoading] = useState(true);

    // Получаем из контекста:
    // - isStretched: флаг растянутого состояния меню
    // - visibleScrolling: флаг видимости скролла
    const { isStretched, visibleScrolling } = useContext(ButtonStretchMenuContext);
    const { loadedThemes } = useContext(ThemesContext);

    // Получаем данные навигационного списка из контекста
    const { listItems } = useContext(PrimaryNavListContext);

    /**
     * Эффект-таймер для имитации загрузки данных
     *
     * Через 500мс скрывает спиннер, имитируя завершение загрузки.
     * Используется для визуального фидбэка пользователю.
     */
    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 500);
    }, []);

    // Если идёт загрузка — отображаем спиннер
    if (loading) {
        return <Spinner />;
    }

    // Если список пуст после загрузки — также отображаем спиннер
    // (защита от состояния «нет данных»)
    if (listItems.length === 0) {
        return <Spinner />;
    }

    /**
     * Возвращаем JSX-разметку контейнера меню
     *
     * Применяем динамические стили:
     * - width: 275px (если меню растянуто) или 100px (иначе);
     * - transition: анимация изменения ширины;
     * - overflowY: скролл если visibleScrolling=true, иначе hidden;
     * - overflowX: всегда hidden (запрет горизонтального скролла).
     */
    return (
        <div
            className={classNames(
                'primary-nav-wrapper',
                {
                    'primary-nav-wrapper--white': loadedThemes['white'],
                    'primary-nav-wrapper--gray': loadedThemes['gray'],
                    'primary-nav-wrapper--dark': loadedThemes['dark']
                }
            )}
            style={{
                width: isStretched ? '275px' : '100px',
                transition: 'width 0.5s ease-in-out',
                overflowY: visibleScrolling ? 'scroll' : 'hidden',
                overflowX: 'hidden'
            }}
        >
            {/* Компонент навигационного списка */}
            <PrimaryNavList />
        </div>
    );
};

/**
 * Экспорт компонента по умолчанию
 *
 * Позволяет импортировать компонент как:
 * import PrimaryNavWrapperView from './PrimaryNavWrapperView';
 */
export default PrimaryNavWrapperView;