resources/js/components/techniques/Dialog.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Modal } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import Loading from '../common/Loading';
   7 import LanguageSwitcher from '../../app/LanguageSwitcher';
   8
   9 const Form = React.lazy(() => import('./Form'));
  10
  11 const Dialog = ({
  12         content,
  13         language,
  14         onHide,
  15         onSubmit,
  16         show,
  17 }) => {
  18         const { t } = useTranslation();
  19
  20         return <Modal onHide={onHide} show={show} size="lg">
  21                 <Modal.Header closeButton>
  22                         <Modal.Title>
  23                                 {t('content.edit')}
  24                         </Modal.Title>
  25                         <div className="mx-3">
  26                                 <LanguageSwitcher />
  27                         </div>
  28                 </Modal.Header>
  29                 <React.Suspense fallback={<Loading />}>
  30                         <Form
  31                                 content={content}
  32                                 language={language}
  33                                 onCancel={onHide}
  34                                 onSubmit={onSubmit}
  35                         />
  36                 </React.Suspense>
  37         </Modal>;
  38 };
  39
  40 Dialog.propTypes = {
  41         content: PropTypes.shape({
  42         }),
  43         language: PropTypes.string,
  44         onHide: PropTypes.func,
  45         onSubmit: PropTypes.func,
  46         show: PropTypes.bool,
  47 };
  48
  49 export default Dialog;