src/components/DesktopLayout/DesktopLayout.jsx - master - DevDenzo/ERP

src/components/DesktopLayout/DesktopLayout.jsx
198 строк11 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
/**
 * Раздел 1: Базовые зависимости React и вспомогательные библиотеки
 */

// Основной импорт React с хуками memo и useState
// - React: ядро библиотеки для построения UI
// - memo: оптимизация рендеринга путём мемоизации компонентов
// - useState: хук для управления локальным состоянием компонента
// - useContext: хук для передачи состояния компоненту глубоко в DOM
import React, { memo, useState, useContext } from 'react';

// Библиотека для удобного формирования CSS-классов
// Позволяет комбинировать классы, использовать условные выражения
import classNames from "classnames";

// Библиотека для типизации пропсов компонентов
// Обеспечивает валидацию входящих props и улучшает читаемость кода
import PropTypes from 'prop-types';

/**
 * Раздел 2: Компоненты панели управления
 * Базовые элементы интерфейса для навигации и управления рабочим пространством
 */

// Панель инструментов рабочего пространства
// Содержит кнопки действий, настройки и элементы управления контекстом
import { WorkspaceToolbar } from '../Panels/index.js';


// Экспресс-панель боковой навигации
// Предоставляет быстрый доступ к основным разделам и функциям приложения
import { ExpressSidebar } from '../Panels/index.js';

/**
 * Раздел 3: Компоненты карусели и заголовка
 * Элементы для отображения контента и навигации в верхней части интерфейса
 */

// Портальная карусель основного контента
// Отвечает за переключение и отображение дополнительных блоков
import { DropdownPanelTop } from "../Carousel/index.js";

// Панель заголовка интерфейса
// Отображает название текущего раздела, системные уведомления и элементы управления окном
import TitleBar from './components/TitleBar.jsx';

// Карусель рабочего пространства
// Компонент для переключения между рабочими областями/видами
import { WorkspaceCarousel } from './index.js';

// Окно формы регистрации
import { RegisterWindow } from "../modals/index.js";
// Окно формы авторизации
import { LoginWindow } from "../modals/index.js";
// Форма регистрации
import { SignUpForm } from "../forms/index.js";
// Форма регистрации
import { LoginForm } from "../forms/index.js";

// Контекст React для управления цветовыми темами интерфейса
import { ThemesContext } from "../../contexts/ThemesContext.js";
// Контекст для управления состоянием форм аутентификации
import { IsFormAuthVisibleProvider } from "../../providers/IsFormAuthVisibleProvider.jsx";

// Импорт кастомного хука для управления переключателями
import { useToggleButton } from '../../hooks/ui/useToggleButton.js';

// Импорт анимаций интерфейса для серой темы рабочего стола
// Содержит:
// - ключевые кадры анимаций (keyframes) для морфинга элементов;
// - миксины для плавных переходов состояний;
// - стили анимации фоновых элементов и панелей;
// - параметры скорости и функций плавности (easing) для серой темы.
import './theme-animations/_animated-gray-theme.less';

// Импорт анимаций интерфейса для тёмной темы рабочего стола
// Содержит:
// - ключевые кадры анимаций (keyframes), адаптированные под тёмную цветовую схему;
// - миксины с корректировкой цветов/прозрачности для контраста на тёмном фоне;
// - анимации интерактивных элементов (наведение, фокус, активация);
// - специфические эффекты (свечение, затухание), уместные в тёмном режиме.
import './theme-animations/_animated-dark-theme.less';

/**
 * Компонент DesktopLayout — основное представление рабочего пространства
 *
 * Отображает структуру рабочего стола с:
 * - панелью инструментов сверху;
 * - заголовком и основным контентом в центре;
 * - боковой панелью ExpressSidebar;
 * - модальной каруселью (при активации).
 *
 * @param {Object} props - Пропсы компонента
 * @param {string} props.desktopBaseKey - Базовый ключ для заголовка рабочего стола
 * @param {ReactNode} props.children - Основной контент рабочего пространства
 * @returns {JSX.Element} Отрендеренный компонент
 */
const DesktopLayout = memo(({ desktopBaseKey, children }) => {
    // Состояние для управления переключателем кнопок (из кастомного хука)
    const { buttonToggle, setButtonToggle, handleButtonToggle } = useToggleButton();
    // Получаем состояние выбранной темы
    const { loadedThemes } = useContext(ThemesContext);

    // Храним состояние выпадающей панели
    const [dropdownExpanded, setDropdownExpanded] = useState(false);
    // Локальное состояние для отображения форм аутентификации
    const [isFormAuthVisible, setIsFormAuthVisible] = useState(null);

    return (
        <>
            {/* Провайдер состояния форм аутентификации */}
            <IsFormAuthVisibleProvider
                isFormAuthVisible={isFormAuthVisible}
                setIsFormAuthVisible={setIsFormAuthVisible}
            >
                <div
                    className={classNames(
                    'Desktop',
                        'desktop', {
                            'desktop--white': loadedThemes['white'],
                            'desktop--gray': loadedThemes['gray'],
                            'desktop--dark': loadedThemes['dark']
                        }
                    )}
                >
                    {/* Панель инструментов с кнопками управления */}
                    <WorkspaceToolbar
                        handleToggle={handleButtonToggle}
                        showCarousel={setDropdownExpanded}
                    />

                    {/* Контейнер для заголовка, основного контента и боковой панели */}
                    <div className="desktop-title-box desktop__title-box">
                        <div className="container-fluid">
                            <div className="row">
                                {/* Левая колонка: заголовок и основной контент */}
                                <div className="col-11">
                                    <TitleBar generalTitle={desktopBaseKey} />
                                    { children }
                                </div>

                                {/* Правая часть: модальная карусель (отображается при carouselOpen=true) */}
                                {dropdownExpanded && (
                                    <DropdownPanelTop setDropdownTopExpanded={setDropdownExpanded} />
                                )}

                                {/* Боковая панель с переключаемым содержимым */}
                                <ExpressSidebar
                                    buttonToggle={buttonToggle}
                                    setButtonToggle={setButtonToggle}
                                />
                            </div>
                        </div>
                    </div>
                </div>
                {isFormAuthVisible === 'register' && (
                    <>
                        {/* Окно формы регистрации */}
                        <RegisterWindow setIsFormVisible={setIsFormAuthVisible}>
                            {/* Собственно форма регистрации с полями ввода */}
                            <SignUpForm setIsFormVisible={setIsFormAuthVisible} />
                        </RegisterWindow>
                    </>
                )}

                {isFormAuthVisible === 'login' && (
                    <>
                        {/* Окно формы авторизации */}
                        <LoginWindow setIsFormVisible={setIsFormAuthVisible}>
                            {/* Форма авторизации с полями логина/пароля */}
                            <LoginForm setIsFormVisible={setIsFormAuthVisible} />
                        </LoginWindow>
                    </>
                )}
            </IsFormAuthVisibleProvider>
        </>
    );
});

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

/**
 * Экспорт мемоизированного компонента
 *
 * memo() предотвращает лишние перерендеры при неизменных пропсах,
 * что оптимизирует производительность для часто используемых компонентов.
 */
export default DesktopLayout;