Skip to content
Snippets Groups Projects
Select Git revision
  • 1480c5008abf11ee8ce8b8fdcd0f6682b88afd07
  • master default protected
2 results

AnnouncementEditModal.jsx

Blame
  • Forked from TO / cf-online-ui
    Source project has a limited visibility.
    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;