src/components/Lists/UserMenu/UserMenu.jsx - master - DevDenzo/ERP

src/components/Lists/UserMenu/UserMenu.jsx
101 строка5 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Основные зависимости React
import React, { useState, useContext } from 'react';

// - React: ядро библиотеки для создания компонентов
// - useState: хук для управления локальным состоянием компонента
// - useContext: хук для работы с контекстом React

// Компонент портала пользовательского списка
import { UserListPortal } from "../UserList/index.js";
// Навбар пользовательского меню
import { UserMenuNavbar } from "./index.js";

// Контексты приложения
import { IsFormAuthVisibleContext } from '../../../contexts/IsFormAuthVisibleContext.js';
// Контекст для управления видимостью форм авторизации (login/register) в приложении

// Иконки из библиотеки react-bootstrap-icons
import { ChevronDown } from 'react-bootstrap-icons';
// - ChevronDown: стрелка вниз (используется в выпадающих списках)

// Стили компонента
import './styles/_user-menu.less';

// Список аутентификации
const UserMenu = () => {
    // Локальное состояние для управления видимостью списка аутентификации
    // true — список скрыт, false — список виден
    const [isUserMenuVisible, setIsUserMenuVisible] = useState(false);

    // Получение текущего состояния видимости формы авторизации из контекста
    // - Используем опциональную цепочку (?.) для безопасной работы с контекстом
    // - ?? "" — значение по умолчанию, если контекст не предоставлен
    const isFormVisible = useContext(IsFormAuthVisibleContext)?.isFormAuthVisible ?? "";

    // Получение функции для изменения состояния видимости форм из контекста
    // Позволяет дочерним компонентам управлять видимостью форм авторизации
    const setIsFormVisible = useContext(IsFormAuthVisibleContext)?.setIsFormAuthVisible;

    // Обработчик для отображения формы регистрации
    // При вызове устанавливает состояние формы авторизации в режим "register"
    const handleVisibleRegisterForm = () => {
        setIsFormVisible("register");
    };

    // Обработчик для отображения формы авторизации (логина)
    // При вызове устанавливает состояние формы авторизации в режим "login"
    const handleVisibleLoginForm = () => {
        setIsFormVisible("login");
    };

    // Обработчик для скрытия списка аутентификации
    // При вызове переводит локальное состояние в режим true (список скрыт)
    const handleUserMenuVisible = () => {
        setIsUserMenuVisible(true);
    };

    // отображаем представление списка аутентификации
    return (
        <UserListPortal
            userMenuVisible={isUserMenuVisible}
            setUserMenuVisible={setIsUserMenuVisible}
        >
            <UserMenuNavbar handleVisibleMenu={handleUserMenuVisible} />
            <ul className="list-group list-group-flush user-menu">
                <li
                    className={`user-menu__item ${isFormVisible === 'register' ? 'is-active' : ''}`}
                    onClick={handleVisibleRegisterForm}
                >
                    <span className="user-menu__item-text">Регистрация</span>
                </li>
                <li
                    className={`user-menu__item ${isFormVisible === 'login' ? 'is-active' : ''}`}
                    onClick={handleVisibleLoginForm}
                >
                    <span className="user-menu__item-text">Авторизация</span>
                </li>
                <li
                    className={`user-menu__item ${isFormVisible === 'personalData' ? 'is-active' : ''}`}
                    onClick={() => setIsFormVisible('personalData')}
                >
                    <div className="user-menu__item-title">Личные данные</div>
                    <span className="user-menu__item-text">ФИО, день рождения, пол</span>
                </li>
                <li
                    className={`user-menu__item ${isFormVisible === 'contacts' ? 'is-active' : ''}`}
                >
                    <div className="user-menu__item-title">Телефон</div>
                    <span className="user-menu__item-text">+7 (918)-***-**-</span>
                </li>
                <li className="user-menu__item user-menu__item--language-selected">
                    <div className="user-menu__content">Язык интерфейса</div>
                    <span className="user-menu__dropdown-toggle">
                      <ChevronDown size={18} />
                    </span>
                </li>
            </ul>
        </UserListPortal>
    );
};

export default UserMenu;