resources/js/components/common/PngDialog.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Modal } from 'react-bootstrap';
   4
   5 import Loading from './Loading';
   6
   7 const PngPlayer = React.lazy(() => import('./PngPlayer'));
   8
   9 const PngDialog = ({ onHide, show, src, title }) => <Modal onHide={onHide} show={show} size="lg">
  10         {title ?
  11                 <Modal.Header closeButton>
  12                         <Modal.Title>
  13                                 {title}
  14                         </Modal.Title>
  15                 </Modal.Header>
  16         : null}
  17         <Modal.Body>
  18                 <React.Suspense fallback={<Loading />}>
  19                         <PngPlayer src={src} />
  20                 </React.Suspense>
  21         </Modal.Body>
  22 </Modal>;
  23
  24 PngDialog.propTypes = {
  25         onHide: PropTypes.func,
  26         show: PropTypes.bool,
  27         src: PropTypes.string,
  28         title: PropTypes.string,
  29 };
  30
  31 export default PngDialog;