first cut porting and using new react-bootstrap version

js/components/ascribe_buttons/acl_button.js

@@ -214,14 +214,13 @@ ${this.props.currentUser.username}
 
         return (
             <ModalWrapper
-                button={
+                trigger={
                     <button className={shouldDisplay ? 'btn btn-default btn-sm ' : 'hidden'}>
                         {this.sanitizeAction()}
                     </button>
                 }
                 handleSuccess={aclProps.handleSuccess}
-                title={aclProps.title}
+                title={aclProps.title}>
-                tooltip={aclProps.tooltip}>
                 {aclProps.form}
             </ModalWrapper>
         );

js/components/ascribe_buttons/delete_button.js

@@ -11,10 +11,10 @@ import PieceDeleteForm from '../ascribe_forms/form_delete_piece';
 import EditionRemoveFromCollectionForm from '../ascribe_forms/form_remove_editions_from_collection';
 import PieceRemoveFromCollectionForm from '../ascribe_forms/form_remove_piece_from_collection';
 
-import AscribeModal from '../ascribe_modal/ascribe_modal';
+import ModalWrapper from '../ascribe_modal/modal_wrapper';
 
 import { getAvailableAcls } from '../../utils/acl_utils';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang_utils.js';
 
 
 let DeleteButton = React.createClass({
@@ -66,14 +66,14 @@ let DeleteButton = React.createClass({
             return null;
         }
         return (
-            <AscribeModal
+            <ModalWrapper
                 trigger={btnDelete}
+                handleSuccess={this.props.handleSuccess}
                 title={title}>
                 {content}
-            </AscribeModal>
+            </ModalWrapper>
         );
     }
 });
 
 export default DeleteButton;
-

js/components/ascribe_buttons/submit_to_prize_button.js

@@ -27,7 +27,7 @@ let SubmitToPrizeButton = React.createClass({
     render() {
         return (
             <ModalWrapper
-                button={this.getSubmitButton()}
+                trigger={this.getSubmitButton()}
                 handleSuccess={this.props.handleSuccess}
                 title={getLangText('Submit to prize')}>
                 <PieceSubmitToPrizeForm

js/components/ascribe_buttons/unconsign_request_button.js

@@ -21,14 +21,13 @@ let UnConsignRequestButton = React.createClass({
     render: function () {
         return (
             <ModalWrapper
-                button={
+                trigger={
                     <Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
                         REQUEST UNCONSIGN
                     </Button>
                 }
                 handleSuccess={this.props.handleSuccess}
-                title='Request to Un-Consign'
+                title='Request to Un-Consign'>
-                tooltip='Ask the consignee to return the ownership of the work back to you'>
                 <UnConsignRequestForm
                     url={apiUrls.ownership_unconsigns_request}
                     id={{'bitcoin_id': this.props.edition.bitcoin_id}}

js/components/ascribe_forms/form_loan.js

@@ -88,20 +88,6 @@ let LoanForm = React.createClass({
         }
     },
 
-    onRequestHide() {
-        // Since the modal can be opened without sending it to the server
-        // and therefore clearing the store,
-        // we'll need to make sure to flush the store once the
-        // modal unmounts
-        LoanContractActions.updateLoanContract({
-            contractUrl: null,
-            contractEmail: null,
-            contractKey: null
-        });
-
-        this.props.onRequestHide();
-    },
-
     render() {
 
         return (
@@ -119,7 +105,7 @@ let LoanForm = React.createClass({
                             <Button
                                 className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
                                 style={{marginLeft: '0'}}
-                                onClick={this.onRequestHide}>{getLangText('CLOSE')}</Button>
+                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
                         </p>
                     </div>}
                 spinner={

js/components/ascribe_modal/ascribe_modal.js

@@ -1,63 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-import Modal from 'react-bootstrap/lib/Modal';
-
-let AscribeModal = React.createClass({
-
-    propTypes: {
-        trigger: React.PropTypes.element.isRequired,
-        title: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element,
-            React.PropTypes.string
-        ]).isRequired,
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ]).isRequired,
-        footer: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element,
-            React.PropTypes.string
-        ]).isRequired
-    },
-
-    getInitialState(){
-        return {
-            modalBody: null
-        };
-    },
-
-    close() {
-        this.setState({ showModal: false });
-    },
-
-    open() {
-        this.setState({ showModal: true });
-    },
-
-    render() {
-
-        let trigger = React.cloneElement(this.props.trigger, {onClick: this.open});
-
-        return (
-            <span>
-                {trigger}
-                <Modal show={this.state.showModal} onHide={this.close}>
-                    <Modal.Header closeButton>
-                        <Modal.Title>
-                            {this.props.title}
-                        </Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body ref="modalBody">
-                        {this.props.children}
-                    </Modal.Body>
-                </Modal>
-            </span>
-        );
-    }
-});
-
-export default AscribeModal;

js/components/ascribe_modal/modal_password_request_reset.js

@@ -7,9 +7,13 @@ import PasswordResetRequestForm from '../ascribe_forms/form_password_reset_reque
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
 let PasswordResetRequestModal = React.createClass({
+    propTypes: {
+        button: React.PropTypes.element
+    },
+
     handleResetSuccess(){
         let notificationText = getLangText('Request successfully sent, check your email');
         let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
@@ -18,10 +22,9 @@ let PasswordResetRequestModal = React.createClass({
     render() {
         return (
             <ModalWrapper
-                button={this.props.button}
+                trigger={this.props.button}
                 title={getLangText('Reset your password')}
-                handleSuccess={this.handleResetSuccess}
+                handleSuccess={this.handleResetSuccess}>
-                tooltip={getLangText('Reset your password')}>
                 <PasswordResetRequestForm />
             </ModalWrapper>
         );

js/components/ascribe_modal/modal_wrapper.js

@@ -4,87 +4,73 @@ import React from 'react';
 import ReactAddons from 'react/addons';
 
 import Modal from 'react-bootstrap/lib/Modal';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
-import Tooltip from 'react-bootstrap/lib/Tooltip';
-
-import ModalMixin from '../../mixins/modal_mixin';
 
 let ModalWrapper = React.createClass({
     propTypes: {
-        title: React.PropTypes.string.isRequired,
+        trigger: React.PropTypes.element.isRequired,
-        onRequestHide: React.PropTypes.func,
+        title: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element,
+            React.PropTypes.string
+        ]).isRequired,
         handleSuccess: React.PropTypes.func.isRequired,
-        button: React.PropTypes.object.isRequired,
+        children: React.PropTypes.oneOfType([
-        children: React.PropTypes.object,
+            React.PropTypes.arrayOf(React.PropTypes.element),
-        tooltip: React.PropTypes.string
+            React.PropTypes.element
+        ])
     },
 
-    getModalTrigger() {
+    getInitialState() {
-        return (
+        return {
-            <ModalBody
+            showModal: false
-                title={this.props.title}
+        };
-                handleSuccess={this.props.handleSuccess}>
-                {this.props.children}
-            </ModalBody>
-        );
     },
 
-    render() {
+    show() {
-        if(this.props.tooltip) {
+        this.setState({
-            return (
+            showModal: true
-                <OverlayTrigger
+        });
-                    delay={500}
-                    placement="left"
-                    overlay={<Tooltip>{this.props.tooltip}</Tooltip>}>
-                    {this.getModalTrigger()}
-                </OverlayTrigger>
-            );
-        } else {
-             return (
-                <span>
-                    {/* This needs to be some kind of inline-block */}
-                    {this.getModalTrigger()}
-                </span>
-            );
-        }
-    }
-});
-
-
-let ModalBody = React.createClass({
-    propTypes: {
-        onRequestHide: React.PropTypes.func,
-        handleSuccess: React.PropTypes.func,
-        children: React.PropTypes.object,
-        title: React.PropTypes.string.isRequired
     },
 
-    mixins: [ModalMixin],
+    hide() {
+        this.setState({
+            showModal: false
+        });
+    },
 
     handleSuccess(response){
         this.props.handleSuccess(response);
-        this.props.onRequestHide();
+        this.hide();
     },
 
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
             return ReactAddons.addons.cloneWithProps(child, {
-                onRequestHide: this.props.onRequestHide,
+                onRequestHide: this.hide,
                 handleSuccess: this.handleSuccess
             });
         });
     },
 
     render() {
+        let trigger = React.cloneElement(this.props.trigger, {onClick: this.show});
+
         return (
-            <Modal {...this.props} title={this.props.title}>
+            <span>
-                <div className="modal-body">
+                {trigger}
-                {this.renderChildren()}
+                <Modal show={this.state.showModal} onHide={this.hide}>
-                </div>
+                    <Modal.Header closeButton>
-            </Modal>
+                        <Modal.Title>
+                            {this.props.title}
+                        </Modal.Title>
+                    </Modal.Header>
+                    <div className="modal-body">
+                        {this.renderChildren()}
+                    </div>
+                </Modal>
+            </span>
         );
     }
 });
 
-
 export default ModalWrapper;

js/mixins/modal_mixin.js

@@ -1,12 +0,0 @@
-'use strict';
-
-let ModalMixin = {
-    onRequestHide(e){
-        if (e) {
-            e.preventDefault();
-        }
-        this.props.onRequestHide();
-    }
-};
-
-export default ModalMixin;