Ported ConfirmModal and InviteMemberModal to React-Bootstrap

web/react/components/confirm_modal.jsx

@@ -1,70 +1,66 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+const Modal = ReactBootstrap.Modal;
+
 export default class ConfirmModal extends React.Component {
     constructor(props) {
         super(props);
 
         this.handleConfirm = this.handleConfirm.bind(this);
+    }
 
-        this.state = {};
-    }
     handleConfirm() {
-        $('#' + this.props.parent_id).attr('data-confirm', 'true');
-        $('#' + this.props.parent_id).modal('hide');
-        $('#' + this.props.id).modal('hide');
+        if (this.props.onConfirm) {
+            this.props.onConfirm();
+        }
     }
+
     render() {
         return (
-            <div
-                className='modal fade'
-                id={this.props.id}
-                tabIndex='-1'
-                role='dialog'
-                aria-hidden='true'
+            <Modal
+                className='modal-confirm'
+                show={this.props.show}
+                onHide={this.props.onCancel}
+                enforceFocus={false}
             >
-            <div className='modal-dialog'>
-                <div className='modal-content'>
-                        <div className='modal-header'>
-                            <h4 className='modal-title'>{this.props.title}</h4>
-                        </div>
-                        <div className='modal-body'>
-                            {this.props.message}
-                        </div>
-                        <div className='modal-footer'>
-                            <button
-                                type='button'
-                                className='btn btn-default'
-                                data-dismiss='modal'
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                onClick={this.handleConfirm}
-                                type='button'
-                                className='btn btn-primary'
-                            >
-                                {this.props.confirm_button}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
+                <Modal.Header closeButton={false}>
+                    <Modal.Title>{this.props.title}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    {this.props.message}
+                </Modal.Body>
+                <Modal.Footer>
+                    <button
+                        type='button'
+                        className='btn btn-default'
+                        onClick={this.props.onCancel}
+                    >
+                        {'Cancel'}
+                    </button>
+                    <button
+                        type='button'
+                        className='btn btn-primary'
+                        onClick={this.props.onConfirm}
+                    >
+                        {this.props.confirm_button}
+                    </button>
+                </Modal.Footer>
+            </Modal>
         );
     }
 }
 
 ConfirmModal.defaultProps = {
-    parent_id: '',
-    id: '',
     title: '',
     message: '',
     confirm_button: ''
 };
 ConfirmModal.propTypes = {
-    parent_id: React.PropTypes.string,
-    id: React.PropTypes.string,
+    show: React.PropTypes.bool.isRequired,
     title: React.PropTypes.string,
     message: React.PropTypes.string,
-    confirm_button: React.PropTypes.string
+    confirm_button: React.PropTypes.string,
+    onConfirm: React.PropTypes.func.isRequired,
+    onCancel: React.PropTypes.func.isRequired
 };