Select Git revision
-
Tomáš Valenta authoredTomáš Valenta authored
AnnouncementEditModal.jsx 2.18 KiB
import React, { useState } from "react";
import Button from "components/Button";
import { Card, CardActions, CardBody, CardHeadline } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import Modal from "components/modals/Modal";
const AnnouncementEditModal = ({
announcement,
onCancel,
onConfirm,
confirming,
error,
...props
}) => {
const [text, setText] = useState(announcement.content);
const onTextInput = (evt) => {
setText(evt.target.value);
};
const confirm = (evt) => {
if (!!text) {
onConfirm(text);
}
};
return (
<Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
<Card>
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>Upravit oznámení</CardHeadline>
<button onClick={onCancel}>
<i className="ico--close"></i>
</button>
</div>
<div className="form-field">
<label className="form-field__label" htmlFor="field">
Nový text oznámení
</label>
<div className="form-field__wrapper form-field__wrapper--shadowed">
<textarea
className="text-input form-field__control text-base"
value={text}
rows="8"
placeholder="Vyplňte text oznámení"
onChange={onTextInput}
></textarea>
</div>
</div>
{error && (
<ErrorMessage className="mt-2">
Při editaci došlo k problému: {error}
</ErrorMessage>
)}
</CardBody>
<CardActions right className="space-x-1">
<Button
hoverActive
color="blue-300"
className="text-sm"
loading={confirming}
onClick={confirm}
>
Uložit
</Button>
<Button
hoverActive
color="red-600"
className="text-sm"
onClick={onCancel}
>
Zrušit
</Button>
</CardActions>
</Card>
</Modal>
);
};
export default AnnouncementEditModal;