resources/js/components/tournament/ScoreChartDialog.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Modal } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import Loading from '../common/Loading';
   7 import i18n from '../../i18n';
   8
   9 const ScoreChart = React.lazy(() => import('./ScoreChart'));
  10
  11 const ScoreChartDialog = ({
  12         onHide,
  13         show,
  14         tournament,
  15 }) =>
  16 <Modal className="score-chart-dialog" dialogClassName="modal-90w" onHide={onHide} show={show}>
  17         <Modal.Header closeButton>
  18                 <Modal.Title>
  19                         {i18n.t('tournaments.scoreChart')}
  20                 </Modal.Title>
  21         </Modal.Header>
  22         <Modal.Body style={{ height: '80vh' }}>
  23                 <React.Suspense fallback={<Loading />}>
  24                         <ScoreChart tournament={tournament} />
  25                 </React.Suspense>
  26         </Modal.Body>
  27         <Modal.Footer>
  28                 <Button onClick={onHide} variant="secondary">
  29                         {i18n.t('button.close')}
  30                 </Button>
  31         </Modal.Footer>
  32 </Modal>;
  33
  34 ScoreChartDialog.propTypes = {
  35         onHide: PropTypes.func,
  36         show: PropTypes.bool,
  37         tournament: PropTypes.shape({
  38         }),
  39 };
  40
  41 export default withTranslation()(ScoreChartDialog);