mirror of
https://github.com/ascribe/onion.git
synced 2024-12-31 17:17:48 +01:00
update react-bootstrap first cut
This commit is contained in:
parent
c31acd4317
commit
f3e378f221
@ -11,10 +11,10 @@ import PieceDeleteForm from '../ascribe_forms/form_delete_piece';
|
|||||||
import EditionRemoveFromCollectionForm from '../ascribe_forms/form_remove_editions_from_collection';
|
import EditionRemoveFromCollectionForm from '../ascribe_forms/form_remove_editions_from_collection';
|
||||||
import PieceRemoveFromCollectionForm from '../ascribe_forms/form_remove_piece_from_collection';
|
import PieceRemoveFromCollectionForm from '../ascribe_forms/form_remove_piece_from_collection';
|
||||||
|
|
||||||
import ModalWrapper from '../ascribe_modal/modal_wrapper';
|
import AscribeModal from '../ascribe_modal/ascribe_modal';
|
||||||
|
|
||||||
import { getAvailableAcls } from '../../utils/acl_utils';
|
import { getAvailableAcls } from '../../utils/acl_utils';
|
||||||
import { getLangText } from '../../utils/lang_utils.js';
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
|
|
||||||
let DeleteButton = React.createClass({
|
let DeleteButton = React.createClass({
|
||||||
@ -66,12 +66,11 @@ let DeleteButton = React.createClass({
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<ModalWrapper
|
<AscribeModal
|
||||||
button={btnDelete}
|
trigger={btnDelete}
|
||||||
handleSuccess={this.props.handleSuccess}
|
|
||||||
title={title}>
|
title={title}>
|
||||||
{content}
|
{content}
|
||||||
</ModalWrapper>
|
</AscribeModal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
63
js/components/ascribe_modal/ascribe_modal.js
Normal file
63
js/components/ascribe_modal/ascribe_modal.js
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
'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;
|
@ -5,7 +5,6 @@ import ReactAddons from 'react/addons';
|
|||||||
|
|
||||||
import Modal from 'react-bootstrap/lib/Modal';
|
import Modal from 'react-bootstrap/lib/Modal';
|
||||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
||||||
import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
|
|
||||||
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
||||||
|
|
||||||
import ModalMixin from '../../mixins/modal_mixin';
|
import ModalMixin from '../../mixins/modal_mixin';
|
||||||
@ -22,15 +21,11 @@ let ModalWrapper = React.createClass({
|
|||||||
|
|
||||||
getModalTrigger() {
|
getModalTrigger() {
|
||||||
return (
|
return (
|
||||||
<ModalTrigger modal={
|
<ModalBody
|
||||||
<ModalBody
|
title={this.props.title}
|
||||||
title={this.props.title}
|
handleSuccess={this.props.handleSuccess}>
|
||||||
handleSuccess={this.props.handleSuccess}>
|
{this.props.children}
|
||||||
{this.props.children}
|
</ModalBody>
|
||||||
</ModalBody>
|
|
||||||
}>
|
|
||||||
{this.props.button}
|
|
||||||
</ModalTrigger>
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -71,7 +71,7 @@
|
|||||||
"q": "^1.4.1",
|
"q": "^1.4.1",
|
||||||
"raven-js": "^1.1.19",
|
"raven-js": "^1.1.19",
|
||||||
"react": "^0.13.2",
|
"react": "^0.13.2",
|
||||||
"react-bootstrap": "~0.22.6",
|
"react-bootstrap": "^0.24.3",
|
||||||
"react-datepicker": "~0.8.0",
|
"react-datepicker": "~0.8.0",
|
||||||
"react-progressbar": "^1.1.0",
|
"react-progressbar": "^1.1.0",
|
||||||
"react-router": "^0.13.3",
|
"react-router": "^0.13.3",
|
||||||
|
Loading…
Reference in New Issue
Block a user