Merge pull request #1296 from weseek/support/apply-bst4-form-fix-UserGroupUserModal.jsx

GW-425 UserGroupUserModal のモーダルBST4化

src/client/js/components/Admin/UserGroup/UserGroupDeleteModal.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-
-// import Modal from 'react-bootstrap/es/Modal';
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
@@ -150,20 +151,18 @@ class UserGroupDeleteModal extends React.Component {
 
     return (
       <Modal show={this.props.isShow} onHide={this.onHide}>
-        <Modal.Header className="modal-header bg-danger" closeButton>
-          <Modal.Title>
-            <i className="icon icon-fire"></i> {t('user_group_management.delete_group')}
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
+        <ModalHeader className="modal-header bg-danger" closeButton>
+          <i className="icon icon-fire"></i> {t('user_group_management.delete_group')}
+        </ModalHeader>
+        <ModalBody>
           <div>
             <span className="font-weight-bold">{t('user_group_management.group_name')}</span> : &quot;{this.props.deleteUserGroup.name}&quot;
           </div>
           <div className="text-danger mt-5">
             {t('user_group_management.group_and_pages_not_retrievable')}
           </div>
-        </Modal.Body>
-        <Modal.Footer>
+        </ModalBody>
+        <ModalFooter>
           <form className="d-flex justify-content-between" onSubmit={this.handleSubmit}>
             <div className="d-flex">
               {this.renderPageActionSelector()}
@@ -173,7 +172,7 @@ class UserGroupDeleteModal extends React.Component {
               <i className="icon icon-fire"></i> {t('Delete')}
             </button>
           </form>
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
     );
   }

src/client/js/components/Admin/UserGroupDetail/UserGroupUserModal.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-// import Modal from 'react-bootstrap/es/Modal';
+import {
+  Modal, ModalHeader, ModalBody,
+} from 'reactstrap';
 
 import UserGroupUserFormByInput from './UserGroupUserFormByInput';
 import { createSubscribedElement } from '../../UnstatedUtils';
@@ -15,12 +17,12 @@ class UserGroupUserModal extends React.Component {
 
     return (
       <Modal show={userGroupDetailContainer.state.isUserGroupUserModalOpen} onHide={userGroupDetailContainer.closeUserGroupUserModal}>
-        <Modal.Header closeButton>
-          <Modal.Title>{ t('user_group_management.add_user') }</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
+        <ModalHeader closeButton>
+          { t('user_group_management.add_user') }
+        </ModalHeader>
+        <ModalBody>
           <UserGroupUserFormByInput />
-        </Modal.Body>
+        </ModalBody>
       </Modal>
     );
   }

src/client/js/components/Admin/Users/UserInviteModal.jsx

@@ -5,7 +5,9 @@ import { withTranslation } from 'react-i18next';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 // import Button from 'react-bootstrap/es/Button';
-// import Modal from 'react-bootstrap/es/Modal';
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter, Button,
+} from 'reactstrap';
 
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -184,21 +186,20 @@ class UserInviteModal extends React.Component {
     const { t, adminUsersContainer } = this.props;
     const { invitedEmailList } = this.state;
 
+
     return (
       <Modal show={adminUsersContainer.state.isUserInviteModalShown} onHide={this.onToggleModal}>
-        <Modal.Header className="modal-header" closeButton>
-          <Modal.Title>
-            { t('user_management.invite_users') }
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
+        <ModalHeader className="modal-header" closeButton>
+          { t('user_management.invite_users') }
+        </ModalHeader>
+        <ModalBody>
           {invitedEmailList == null ? this.renderModalBody()
            : this.renderCreatedModalBody()}
-        </Modal.Body>
-        <Modal.Footer className="d-flex">
+        </ModalBody>
+        <ModalFooter className="d-flex">
           {invitedEmailList == null ? this.renderModalFooter()
            : this.renderCreatedModalFooter()}
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
     );
   }