migrate Modal

src/client/js/components/Page/TagEditor.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from 'react-bootstrap/es/Button';
-import Modal from 'react-bootstrap/es/Modal';
+
+import {
+  Button, Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
 
 import AppContainer from '../../services/AppContainer';
 
@@ -44,18 +46,18 @@ export default class TagEditor extends React.Component {
 
   render() {
     return (
-      <Modal show={this.state.isOpenModal} onHide={this.closeModalHandler} id="editTagModal">
-        <Modal.Header closeButton className="bg-primary">
-          <Modal.Title className="text-white">Edit Tags</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
+      <Modal isOpen={this.state.isOpenModal} toggle={this.closeModalHandler} id="editTagModal">
+        <ModalHeader closeButton className="bg-primary">
+          <span className="text-white">Edit Tags</span>
+        </ModalHeader>
+        <ModalBody>
           <TagsInput tags={this.state.tags} onTagsUpdated={this.onTagsUpdatedByTagsInput} />
-        </Modal.Body>
-        <Modal.Footer>
+        </ModalBody>
+        <ModalFooter>
           <Button variant="primary" onClick={this.handleSubmit}>
             Done
           </Button>
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
     );
   }

src/client/js/components/PageAttachment.jsx

@@ -108,9 +108,9 @@ class PageAttachment extends React.Component {
 
       deleteAttachmentModal = (
         <DeleteAttachmentModal
-          show={showModal}
+          isOpen={showModal}
           animation={false}
-          onHide={deleteModalClose}
+          toggle={deleteModalClose}
 
           attachmentToDelete={attachmentToDelete}
           inUse={deleteInUse}

src/client/js/components/PageAttachment/DeleteAttachmentModal.jsx

@@ -1,7 +1,9 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import Button from 'react-bootstrap/es/Button';
-import Modal from 'react-bootstrap/es/Modal';
+
+import {
+  Button, Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
 
 import UserPicture from '../User/UserPicture';
 import Username from '../User/Username';
@@ -70,13 +72,13 @@ export default class DeleteAttachmentModal extends React.Component {
 
     return (
       <Modal {...props} className="attachment-delete-modal" bsSize="large" aria-labelledby="contained-modal-title-lg">
-        <Modal.Header closeButton>
-          <Modal.Title id="contained-modal-title-lg">Delete attachment?</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
+        <ModalHeader closeButton>
+          <span id="contained-modal-title-lg">Delete attachment?</span>
+        </ModalHeader>
+        <ModalBody>
           {renderAttachment}
-        </Modal.Body>
-        <Modal.Footer>
+        </ModalBody>
+        <ModalFooter>
           <div className="mr-3 d-inline-block">
             {deletingIndicator}
           </div>
@@ -86,7 +88,7 @@ export default class DeleteAttachmentModal extends React.Component {
             disabled={this.props.deleting}
           >Delete!
           </Button>
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
     );
   }

src/client/js/components/PageComment/DeleteCommentModal.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from 'react-bootstrap/es/Button';
-import Modal from 'react-bootstrap/es/Modal';
+import {
+  Button, Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
 
 import { format } from 'date-fns';
 
@@ -35,25 +36,25 @@ export default class DeleteCommentModal extends React.Component {
     commentBody = <span style={{ whiteSpace: 'pre-wrap' }}>{commentBody}</span>;
 
     return (
-      <Modal show={this.props.isShown} onHide={this.props.cancel} className="page-comment-delete-modal">
-        <Modal.Header closeButton>
-          <Modal.Title>
+      <Modal isOpen={this.props.isShown} toggle={this.props.cancel} className="page-comment-delete-modal">
+        <ModalHeader toggle={this.props.cancel}>
+          <span>
             <i className="icon-fw icon-fire text-danger"></i>
             Delete comment?
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
+          </span>
+        </ModalHeader>
+        <ModalBody>
           <UserPicture user={comment.creator} size="xs" /> <strong><Username user={comment.creator}></Username></strong> wrote on {commentDate}:
           <p className="well well-sm comment-body m-t-5">{commentBody}</p>
-        </Modal.Body>
-        <Modal.Footer>
+        </ModalBody>
+        <ModalFooter>
           <span className="text-danger">{this.props.errorMessage}</span>&nbsp;
           <Button onClick={this.props.cancel} bsClass="btn btn-sm">Cancel</Button>
           <Button onClick={this.props.confirmedToDelete} bsClass="btn btn-sm btn-danger">
             <i className="icon icon-fire"></i>
             Delete
           </Button>
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
     );
   }

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Modal from 'react-bootstrap/es/Modal';
-import Button from 'react-bootstrap/es/Button';
 import urljoin from 'url-join';
 import * as codemirror from 'codemirror';
 
+import {
+  Button, Modal, ModalHeader, ModalBody,
+} from 'reactstrap';
+
 import { UnControlled as ReactCodeMirror } from 'react-codemirror2';
 
 import InterceptorManager from '@commons/service/interceptor-manager';
@@ -551,20 +553,20 @@ export default class CodeMirrorEditor extends AbstractEditor {
     };
 
     return (
-      <React.Fragment>
-        <Modal className="modal-gfm-cheatsheet" show={this.state.isCheatsheetModalShown} onHide={() => { hideCheatsheetModal() }}>
-          <Modal.Header closeButton>
-            <Modal.Title><i className="icon-fw icon-question" />Markdown Help</Modal.Title>
-          </Modal.Header>
-          <Modal.Body className="pt-1">
+      <>
+        <Modal className="modal-gfm-cheatsheet" isOpen={this.state.isCheatsheetModalShown} toggle={() => { hideCheatsheetModal() }}>
+          <ModalHeader toggle={() => { hideCheatsheetModal() }}>
+            <i className="icon-fw icon-question" />Markdown Help
+          </ModalHeader>
+          <ModalBody className="pt-1">
             { this.renderCheatsheetModalBody() }
-          </Modal.Body>
+          </ModalBody>
         </Modal>
 
         <button type="button" className="btn-link gfm-cheatsheet-modal-link text-muted small mr-3" onClick={() => { showCheatsheetModal() }}>
           <i className="icon-question" /> Markdown
         </button>
-      </React.Fragment>
+      </>
     );
   }
 

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap/es/Modal';
+
 import Button from 'react-bootstrap/es/Button';
 import ButtonGroup from 'react-bootstrap/es/ButtonGroup';
 import Collapse from 'react-bootstrap/es/Collapse';
+
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
 import Handsontable from 'handsontable';
 import { HotTable } from '@handsontable/react';
 import { debounce } from 'throttle-debounce';
 
+
 import MarkdownTableDataImportForm from './MarkdownTableDataImportForm';
 import MarkdownTable from '../../models/MarkdownTable';
 
@@ -412,12 +418,12 @@ export default class HandsontableModal extends React.PureComponent {
     const dialogClassName = dialogClassNames.join(' ');
 
     return (
-      <Modal show={this.state.show} onHide={this.cancel} bsSize="large" dialogClassName={dialogClassName}>
-        <Modal.Header closeButton>
+      <Modal isOpen={this.state.show} toggle={this.cancel} bsSize="large" dialogClassName={dialogClassName}>
+        <ModalHeader toggle={this.cancel}>
           { this.renderExpandOrContractButton() }
-          <Modal.Title>Edit Table</Modal.Title>
-        </Modal.Header>
-        <Modal.Body className="p-0 d-flex flex-column">
+          Edit Table
+        </ModalHeader>
+        <ModalBody className="p-0 d-flex flex-column">
           <div className="px-4 py-3 modal-navbar">
             <Button className="m-r-20 data-import-button" onClick={this.toggleDataImportArea}>
               Data Import<i className={this.state.isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
@@ -447,8 +453,8 @@ export default class HandsontableModal extends React.PureComponent {
               afterColumnMove={this.afterColumnMoveHandler}
             />
           </div>
-        </Modal.Body>
-        <Modal.Footer>
+        </ModalBody>
+        <ModalFooter>
           <div className="d-flex justify-content-between">
             <Button bsStyle="danger" onClick={this.reset}>Reset</Button>
             <div className="d-flex">
@@ -456,7 +462,7 @@ export default class HandsontableModal extends React.PureComponent {
               <Button bsStyle="primary" onClick={this.save}>Done</Button>
             </div>
           </div>
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
     );
   }

src/client/js/components/SavePageControls/GrantSelector.jsx

@@ -7,7 +7,9 @@ import FormGroup from 'react-bootstrap/es/FormGroup';
 import FormControl from 'react-bootstrap/es/FormControl';
 import ListGroup from 'react-bootstrap/es/ListGroup';
 import ListGroupItem from 'react-bootstrap/es/ListGroupItem';
-import Modal from 'react-bootstrap/es/Modal';
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
 
 import AppContainer from '../../services/AppContainer';
 
@@ -258,17 +260,15 @@ class GrantSelector extends React.Component {
       <Modal
         className="select-grant-group"
         container={this}
-        show={this.state.isSelectGroupModalShown}
-        onHide={this.hideSelectGroupModal}
+        isOpen={this.state.isSelectGroupModalShown}
+        toggle={this.hideSelectGroupModal}
       >
-        <Modal.Header closeButton>
-          <Modal.Title>
-              Select a Group
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
+        <ModalHeader toggle={this.hideSelectGroupModal}>
+          Select a Group
+        </ModalHeader>
+        <ModalBody>
           {content}
-        </Modal.Body>
+        </ModalBody>
       </Modal>
     );
   }

src/client/js/components/SearchPage/DeletePageListModal.jsx

@@ -2,9 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Button from 'react-bootstrap/es/Button';
-import Modal from 'react-bootstrap/es/Modal';
 import Checkbox from 'react-bootstrap/es/Checkbox';
 
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
 export default class DeletePageListModal extends React.Component {
 
   /*
@@ -27,16 +30,16 @@ export default class DeletePageListModal extends React.Component {
     });
 
     return (
-      <Modal show={this.props.isShown} onHide={this.props.cancel} className="page-list-delete-modal">
-        <Modal.Header closeButton>
-          <Modal.Title>Deleting pages:</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
+      <Modal isOpen={this.props.isShown} toggle={this.props.cancel} className="page-list-delete-modal">
+        <ModalHeader toggle={this.props.cancel}>
+          Deleting pages:
+        </ModalHeader>
+        <ModalBody>
           <ul>
             {listView}
           </ul>
-        </Modal.Body>
-        <Modal.Footer>
+        </ModalBody>
+        <ModalFooter>
           <div className="d-flex justify-content-between">
             <span className="text-danger">{this.props.errorMessage}</span>
             <span className="d-flex align-items-center">
@@ -46,7 +49,7 @@ export default class DeletePageListModal extends React.Component {
               </span>
             </span>
           </div>
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
     );
   }