frontend/src/components/Modals/CreateListModal.js - master - Krams/nodemon

frontend/src/components/Modals/CreateListModal.js
67 строк2 KB
Krams
first_commit
08 июн 2025, 12:17
08 июн 2025, 12:1725d7395
// Модальное окно для создания нового списка узлов
import React, { useState } from 'react';
import { Modal, Form, Button } from 'react-bootstrap';


const CreateListModal = ({ show, onClose, onCreate }) => {
  // Состояние для хранения названия списка
  const [listName, setListName] = useState('');

  // Обработчик создания списка
  const handleCreate = () => {
    if (listName.trim()) {
      onCreate(listName);
      setListName('');
      onClose();
    }
  };

  return (
    <Modal 
      data-bs-theme="dark" 
      show={show} 
      onHide={onClose} 
      centered
    >
      {/* Заголовок модального окна */}
      <Modal.Header closeButton>
        <Modal.Title>Создать список узлов</Modal.Title>
      </Modal.Header>

      {/* Тело модального окна с формой */}
      <Modal.Body>
        <Form onSubmit={(e) => {
          e.preventDefault();
          handleCreate();
        }}>
          <Form.Group className="mb-3">
            <Form.Label>Название списка</Form.Label>
            <Form.Control
              type="text"
              value={listName}
              onChange={(e) => setListName(e.target.value)}
              placeholder="Введите название списка"
              className="bg-dark text-light border-secondary"
            />
          </Form.Group>
        </Form>
      </Modal.Body>

      {/* Кнопки управления */}
      <Modal.Footer>
        <Button variant="secondary" onClick={onClose}>
          Отмена
        </Button>
        <Button 
          variant="primary" 
          onClick={handleCreate} 
          disabled={!listName.trim()}
        >
          Создать
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default CreateListModal;