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

src/components/forms/FormEntryMaterial/FormEntryMaterial.jsx
151 строка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 { formMaterialsMapping } from "./formMaterialsMapping.js";

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

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

// Подключаем стили для формы добавления
import '../styles/_form-entry.less';

// Форма добавления материалов
const FormEntryMaterial = memo(({ materials }) => {
    // Определяем состояние высоты экрана
    const [screenHeight, setScreenHeight] = useState(0);

    // Получаем подписи полей формы
    const materialsKeys = Object.keys(materials[0]);

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

    // Вызываем побочный эффект при монтировании компонента
    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")}>
                <div className={classNames("form-entry__header")}>
                    <h5 className={classNames("form-entry__title")}>
                        Добавить материал
                    </h5>
                    <button
                        type="button"
                        className={classNames(
                        "btn",
                            "btn-light",
                            "form-entry__close-button"
                        )}
                        onClick={() => setIsFormActive(false)}
                    >
                        <X size={18} />
                    </button>
                </div>
                <div
                    className={classNames("form-entry__body")}
                    style={{
                        // Вычисляем максимальную высоту содержимого
                        maxHeight: `${screenHeight * 0.75}px`
                    }}
                >
                    {materialsKeys.map(item => {
                        if (item === "id") return null;

                        return (
                            <div
                                className={classNames(
                                "input-group mb-3",
                                    "form-group"
                                )}
                            >
                                <label
                                    className={classNames(
                                    "form-label",
                                        "form-group__label"
                                    )}
                                >
                                    { formMaterialsMapping[item] }
                                </label>
                                <input
                                    type="text"
                                    className={classNames(
                                    "form-control",
                                        "form-group__input"
                                    )}
                                />
                            </div>
                        );
                    })}
                </div>
                <div className={classNames("form-entry__footer")}>
                    <button
                        type="button"
                        className={classNames(
                        "btn",
                            "btn-light",
                            "form-entry__button-edited"
                        )}
                    >
                        Редактировать
                    </button>
                    <button
                        type="button"
                        className={classNames(
                        "btn",
                            "btn-light",
                            "form-entry__button-cancel"
                        )}
                    >
                        Отмена
                    </button>
                    <button
                        type="button"
                        className={classNames(
                        "btn",
                            "btn-light",
                            "form-entry__button-submit"
                        )}
                    >
                        Отправка
                    </button>
                </div>
            </form>
        </div>
    );
});

export default FormEntryMaterial;