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

src/components/AddedModals/AddedModals.jsx
107 строк5 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
import React, { memo } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';

import AddedModalPortal from './AddedModalPortal.jsx';

import './_added-modal.less';

import { X, Check } from 'react-bootstrap-icons';

const AddedRowModal = memo(({ item, closeModalAdded }) => {
    return (
        <AddedModalPortal>
            <div className="added-modal">
                <div className="added-modal__header">
                    <h5 className="added-modal__title">
                        {item.name}
                    </h5>
                    <button
                        type="button"
                        className={classNames('btn', 'btn-light', 'added-modal__button')}
                        onClick={closeModalAdded}
                    >
                        <X size={22} />
                    </button>
                </div>
                <div className="added-modal__content">
                    <div className="added-modal__controls-bar">
                        <div className="btn-group">
                            <button
                                type="button"
                                className="btn btn-light mr-2"
                                style={{
                                    borderRadius: '8px',
                                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
                                }}
                            >
                                Сохранить и закрыть
                            </button>
                            <button
                                type="button"
                                className="btn btn-light"
                                onClick={closeModalAdded}
                                style={{
                                    borderRadius: '8px',
                                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
                                }}
                            >
                                Закрыть
                            </button>
                        </div>
                    </div>
                    <div className="overlay-form">
                        <form>
                            <div className="form-group">
                                <label className="overlay-form__input-field-text">
                                    Полное наименование
                                </label>
                                <input
                                    type="text"
                                    className="form-control overlay-form__input-field"
                                />
                            </div>
                            <div className="form-group form-check overlay-form__checkbox">
                                <input
                                    type="checkbox"
                                    className="form-check-input overlay-form__input"
                                />
                                <label className="form-check-label overlay-form__custom-checkbox">
                                    <Check size={22} />
                                </label>
                                <label className="overlay-form__checkbox-label">
                                    Выполнено на производстве
                                </label>
                            </div>
                            <div className="form-group">
                                <label className="overlay-form__input-field-text">
                                    Тип элемента
                                </label>
                                <input
                                    type="text"
                                    className="form-control overlay-form__input-field"
                                />
                            </div>
                            <div className="form-group">
                                <label className="overlay-form__input-field-text">
                                    Единица измерения
                                </label>
                                <input
                                    type="text"
                                    className="form-control overlay-form__input-field"
                                />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </AddedModalPortal>
    );
});

AddedRowModal.propTypes = {
    item: PropTypes.object.isRequired,
    closeModalAdded: PropTypes.func.isRequired,
};

export default AddedRowModal;