12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- 'use strict';
- const React = require('react/addons');
- const Modal = React.createClass({
-
- propTypes: {
- data: React.PropTypes.object.isRequired
- },
- mixins: [React.addons.PureRenderMixin],
- componentDidUpdate() {
- const isOpen = this.props.data.get('open');
- if (isOpen)
- document.addEventListener('keydown', this._onKeydown);
- else
- document.removeEventListener('keydown', this._onKeydown);
- },
- render() {
- const data = this.props.data;
- const type = data.get('type');
- const callbacks = data.get('callbacks');
- return (
- <div className={'modal-mask' + (data.get('open') ? '' : ' hidden')}>
- <p>
- <strong>Esc: </strong>
- <span>{type === 'info' ? 'OK' : 'Decline'}</span>
- <br />
- <strong>Enter: </strong>
- <span>{type === 'info' ? 'OK' : 'Accept'}</span>
- </p>
- <div className="modal">
- <p>{data.get('message')}</p>
- {type === 'info' ?
- <a className="btn ok"
- onClick={callbacks.hide}>
- OK
- </a> : [
- <a key="a"
- className="btn"
- style={{left: '4em'}}
- onClick={callbacks.accept}>
- Accept
- </a>,
- <a key="b"
- className="btn btn--red"
- style={{right: '4em'}}
- onClick={callbacks.decline}>
- Decline
- </a>
- ]}
- </div>
- </div>
- );
- },
- _onKeydown(e) {
- const type = this.props.data.get('type');
- const callbacks = this.props.data.get('callbacks');
- if (type === 'info') {
- if (e.which === 13 || e.which === 27) {
- callbacks.hide();
- }
- } else if (type === 'offer') {
- if (e.which === 13) {
- callbacks.accept();
- } else if (e.which === 27) {
- callbacks.decline();
- }
- }
- }
- });
- module.exports = Modal;
|