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

src/components/FullScreen/FullScreen.jsx
72 строки3 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Подключаем библиотеку React и хук состояния
import React, { useState } from 'react';
// Подключаем библиотеку работы с шаблонными строками
import classNames from "classnames";

// Подключаем стили широкоэкранного формата
import './styles/components/_full-screen.less';
import './styles/generated/_full-screen-reset.less';

// Компонент входа в полноэкранный режим
const FullScreen = () => {
    // инициализируем состояние входа в полноэкранный режим
    const [isFullScreen, setIsFullScreen] = useState(false);

    const exitFullScreen = () => {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { /* Firefox */
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { /* IE/Edge */
            document.msExitFullscreen();
        }
    };

    const openFullScreen = (nodeElem) => {
        if (nodeElem.requestFullscreen) {
            nodeElem.requestFullscreen();
        } else if (nodeElem.mozRequestFullScreen) { /* Firefox */
            nodeElem.mozRequestFullScreen();
        } else if (nodeElem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
            nodeElem.webkitRequestFullscreen();
        } else if (nodeElem.msRequestFullscreen) { /* IE/Edge */
            nodeElem.msRequestFullscreen();
        }
    };

    // обработчик входа в полноэкранный режим
    const handleToggleFullScreen = () => {
        setIsFullScreen(!isFullScreen);

        // Выход из полноэкранного режима
        if (isFullScreen) {
            exitFullScreen();
        } else {
            openFullScreen();
        }

    };

    return (
        <div className={`full-screen-container ${isFullScreen ? 'full-screen' : ''}`}>
            <button
                type="button"
                className={classNames(
                'btn',
                    'btn-light',
                    'full-screen-button'
                )}
                onClick={handleToggleFullScreen}
            >
                {isFullScreen ? "Выход из полноэкранного режима" : "Вход в полноэкранный режим"}
            </button>
            <div className={classNames('content')}>
                В этом месте размещается основной контент приложения
            </div>
        </div>
    );
};

export default FullScreen;