src/components/forms/BaseForm/BaseForm.jsx - master - DevDenzo/ERP

src/components/forms/BaseForm/BaseForm.jsx
152 строки6 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Подключаем библиотеку React
import React, {
    useState, // Подключаем хук управления состоянием компонента
    useEffect, // Подключаем хук побочных эффектов
    useContext, // Подключаем хук распространения состояния по дереву
    memo // Подключаем хук оптимизации параметров компонента
} from "react";

// Подключаем библиотеку объединения классов
import classNames from "classnames";

// Подключаем контекст состояния управления активной формой
import { FormStateContext } from "../../../contexts/FormStateContext.js";

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

// Подключаем переключатель состояний
import { Switcher } from "../../Switchers/index.js";

// Подключаем иконку X для использования внутри кнопки закрытия
import { X } from "react-bootstrap-icons";

// Базовая форма
const BaseForm = memo(({ props, children }) => {
    // Создаем состояние для хранения высоты экрана
    const [screenHeight, setScreenHeight] = useState(0);

    // Достаем функцию управления активной формой
    const { setIsFormActive } = useContext(FormStateContext);

    // Получаем объекты состояний и функций управления
    const { visible, functions } = props;

    // Достаем свойства управления состояниями
    const { activeSwitch, isEditing } = visible;
    // Получаем функции управления состояниями
    const { setActiveSwitch, setIsEditing } = functions;

    // Вызываем эффект при монтировании компонента
    useEffect(() => {
        // Задаем начальную высоту экрана
        setScreenHeight(getScreenHeight());

        // Обновляем высоту экрана при изменении окна
        const handleResize = () => {
            setScreenHeight(getScreenHeight());
        };

        // Добавляем обработчик изменения размеров окна
        window.addEventListener("resize", handleResize);

        // Удаляем все ресурсы при размонтировании компонента
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    // отображаем представление базовой формы
    return (
        <div className={classNames("container-add-form")}>
            <form
                className={classNames(
                    "form-entry",
                    {
                        "is-active-switch": activeSwitch
                    }
                )}
            >
                <div className={classNames("form-entry__header")}>
                    <h5
                        className={classNames(
                            "form-entry__title",
                            {
                                "is-active-switch": activeSwitch
                            }
                        )}
                    >
                        Добавить
                    </h5>
                    <Switcher
                        activeMode={activeSwitch}
                        setActiveMode={setActiveSwitch}
                    />
                    <button
                        type="button"
                        className={classNames(
                            "btn",
                            "btn-light",
                            "form-entry__button-close",
                            {
                                "is-active-switch": activeSwitch
                            }
                        )}
                        onClick={() => setIsFormActive(false)}
                    >
                        <X size={18} />
                    </button>
                </div>
                <div
                    className={classNames("form-entry__body")}
                    style={{ maxHeight: `${screenHeight * 0.75}px` }}
                >
                    { children }
                </div>
                <div className={classNames("form-entry__footer")}>
                    <button
                        type="button"
                        className={classNames(
                            "btn",
                            "btn-info",
                            "form-entry__button-edited",
                            {
                                "is-active-switch": activeSwitch
                            }
                        )}
                        onClick={() => setIsEditing(prevState => !prevState)}
                    >
                        {isEditing ? "Закончить" : "Редактировать"}
                    </button>
                    <button
                        type="button"
                        className={classNames(
                            "btn",
                            "btn-light",
                            "form-entry__button-cancel",
                            {
                                "is-active-switch": activeSwitch
                            }
                        )}
                        onClick={() => setIsFormActive(false)}
                    >
                        Отмена
                    </button>
                    <button
                        type="button"
                        className={classNames(
                            "btn",
                            "btn-light",
                            "form-entry__button-submit",
                            {
                                "is-active-switch": activeSwitch
                            }
                        )}
                    >
                        Отправить
                    </button>
                </div>
            </form>
        </div>
    );
});

export default BaseForm;