64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { Modal, Button, Form } from 'react-bootstrap';
|
||
|
||
const GenreModal = ({ show, onHide, onSave }) => {
|
||
const [genreName, setGenreName] = useState('');
|
||
|
||
// Сбрасываем форму при открытии/закрытии
|
||
useEffect(() => {
|
||
if (show) {
|
||
setGenreName('');
|
||
}
|
||
}, [show]);
|
||
|
||
const handleSubmit = (e) => {
|
||
e.preventDefault();
|
||
if (!genreName.trim()) {
|
||
alert('Введите название жанра');
|
||
return;
|
||
}
|
||
onSave({ name: genreName.trim() });
|
||
setGenreName('');
|
||
};
|
||
|
||
const handleClose = () => {
|
||
setGenreName('');
|
||
onHide();
|
||
};
|
||
|
||
return (
|
||
<Modal show={show} onHide={handleClose}>
|
||
<Modal.Header closeButton>
|
||
<Modal.Title>➕ Добавить жанр</Modal.Title>
|
||
</Modal.Header>
|
||
<Modal.Body>
|
||
<Form onSubmit={handleSubmit}>
|
||
<Form.Group className="mb-3">
|
||
<Form.Label>Название жанра *</Form.Label>
|
||
<Form.Control
|
||
type="text"
|
||
value={genreName}
|
||
onChange={(e) => setGenreName(e.target.value)}
|
||
placeholder="Например: Фантастика, Детектив, Роман"
|
||
required
|
||
autoFocus
|
||
/>
|
||
<Form.Text className="text-muted">
|
||
Введите уникальное название для нового жанра
|
||
</Form.Text>
|
||
</Form.Group>
|
||
<Modal.Footer>
|
||
<Button variant="secondary" onClick={handleClose}>
|
||
Отмена
|
||
</Button>
|
||
<Button variant="primary" type="submit" disabled={!genreName.trim()}>
|
||
Добавить жанр
|
||
</Button>
|
||
</Modal.Footer>
|
||
</Form>
|
||
</Modal.Body>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default GenreModal; |