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

src/components/TableEditForm/TableEditForm.jsx
153 строки6 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
import React, { memo, useState } from 'react';
import PropTypes from 'prop-types';
import { X } from 'react-bootstrap-icons';

import './styles/_table-edit-form.less';

const TableEditForm = memo(({ item, closeModalEdit, onSave }) => {
    // Состояние для редактируемых полей
    const [editedItem, setEditedItem] = useState({ ...item });


    // Обработчик изменения поля
    const handleChange = (field, value) => {
        setEditedItem(prev => ({
            ...prev,
            [field]: value
        }));
    };

    // Обработка сохранения
    const handleSave = () => {
        if (onSave) {
            onSave(editedItem);
        }
        closeModalEdit();
    };

    return (
        <div
            className="editing-modal-overlay"
            onClick={closeModalEdit} // Закрытие по клику на фон
        >
            <div
                className="row-edit-modal"
                onClick={(e) => e.stopPropagation()}
            >
                <div className="row-edit-modal__header">
                    <h3 className="row-edit-modal__title">
                        Редактирование строки #{item.id}
                    </h3>
                    <button
                        type="button"
                        className="row-edit-modal__close-btn"
                        onClick={closeModalEdit}
                        aria-label="Закрыть модальное окно"
                    >
                        <X size={22} />
                    </button>
                </div>

                <div className="row-edit-modal__body">
                    <div className="form-group">
                        <label htmlFor="name" className="form-label">
                            Название
                        </label>
                        <input
                            id="name"
                            type="text"
                            className="form-control"
                            value={editedItem.name || ''}
                            onChange={(e) => handleChange('name', e.target.value)}
                        />
                    </div>

                    <div className="form-group">
                        <label htmlFor="description" className="form-label">
                            Описание
                        </label>
                        <textarea
                            id="description"
                            className="form-control"
                            rows="3"
                            value={editedItem.description || ''}
                            onChange={(e) => handleChange('description', e.target.value)}
                        />
                    </div>

                    <div className="form-group">
                        <label htmlFor="status" className="form-label">
                            Статус
                        </label>
                        <select
                            id="status"
                            className="form-select"
                            value={editedItem.status || ''}
                            onChange={(e) => handleChange('status', e.target.value)}
                        >
                            <option value="">Выберите статус</option>
                            <option value="active">Активен</option>
                            <option value="inactive">Неактивен</option>
                            <option value="pending">В ожидании</option>
                        </select>
                    </div>

                    <div className="form-group">
                        <label className="form-label">
                            Активно
                        </label>
                        <div className="checkbox-wrapper">
                            <input
                                type="checkbox"
                                id="is_active"
                                className="checkbox"
                                checked={editedItem.is_active || false}
                                onChange={(e) =>
                                    handleChange('is_active', e.target.checked)
                                }
                            />
                            <label htmlFor="is_active" className="checkbox-label">
                                Включить
                            </label>
                        </div>
                    </div>
                </div>

                <div className="row-edit-modal__footer">
                    <button
                        type="button"
                        className="btn btn-secondary"
                        onClick={closeModalEdit}
                    >
                        Отмена
                    </button>
                    <button
                        type="button"
                        className="btn btn-primary"
                        onClick={handleSave}
                    >
                        Сохранить
                    </button>
                </div>
            </div>
        </div>
    );
});

TableEditForm.propTypes = {
    item: PropTypes.shape({
        id: PropTypes.number.isRequired,
        name: PropTypes.string,
        description: PropTypes.string,
        status: PropTypes.string,
        is_active: PropTypes.bool
    }).isRequired,
    closeModalEdit: PropTypes.func.isRequired,
    onSave: PropTypes.func
};

TableEditForm.defaultProps = {
    onSave: () => {}
};

export default TableEditForm;