src/presentation/Layouts/Layout/Layout.jsx - master - DevDenzo/ERP

src/presentation/Layouts/Layout/Layout.jsx
77 строк3 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Подключаем библиотеку React для взаимодействия с виртуальным DOM
import React, { memo, useEffect, useState } from 'react';
// Подключаем библиотеку объединения классов
import classNames from "classnames";
// Подключаем библиотеку валидации параметров компонента
import PropTypes from 'prop-types';

// Подключаем компонент рабочего стола
import { Desktop } from "../../../components/DesktopLayout/index.js";

import CommonTable from "../../../components/ProductionTables/CommonTable/CommonTable.jsx";

// Подключаем функцию вычисления высоты экрана
import { getScreenHeight } from "../../../helpers/data/ui/getScreenHeight.js";

// Подключаем стили шаблона рабочего стола
import "./_layout.less";

// Презентационный компонент шаблона рабочего стола
const Layout = memo(({ desktopTitle, dataDisplay }) => {
    // Создаем состояние для хранения и изменения высоты экрана
    const [screenHeight, setScreenHeight] = useState(0);

    if (!dataDisplay) {
        dataDisplay = [
            {
                id: 1,
                name: "OOO ТЗН"
            }
        ];
    }

    // Вызываем эффект при первом монтировании компонента
    useEffect(() => {
        // Изменяем значение высоты экрана
        setScreenHeight(getScreenHeight());

        // Добавляем обработчик изменения высоты экрана
        document.addEventListener("resize", () => {
            setScreenHeight(getScreenHeight());
        });

        // Вызываем функцию очистки
        return () => {
            // Удаляем обработчик изменения высоты экрана
            document.removeEventListener("resize", () => {
                setScreenHeight(getScreenHeight());
            });
        };
    }, []);

    return (
        <div className={classNames("motion-gradients-content")}>
            <Desktop desktopBaseKey={desktopTitle}>
                <div
                    className={classNames("common-table-container")}
                    style={{
                        // Задаем максимальную высоту таблицы с учетом корректировки
                        maxHeight: `${screenHeight - 60}px`
                    }}
                >
                    <CommonTable tableData={dataDisplay} />
                </div>
            </Desktop>
        </div>
    );
});

// Проверка параметров шаблона рабочего стола
PropTypes.Layout = {
    // Обязательный заголовок рабочего стола
    desktopTitle: PropTypes.string.isRequired,
    // Обязательный массив данных для отображения
    dataDisplay: PropTypes.array.isRequired
};

export default Layout;