82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
|
import React, { PropTypes } from 'react';
|
||
|
|
import { Button, Modal } from 'react-bootstrap';
|
||
|
|
import PureComponent from 'react-pure-render/component';
|
||
|
|
import FontAwesome from 'react-fontawesome';
|
||
|
|
|
||
|
|
const propTypes = {
|
||
|
|
close: PropTypes.func,
|
||
|
|
open: PropTypes.bool.isRequired,
|
||
|
|
submitChallenge: PropTypes.func.isRequired,
|
||
|
|
successMessage: PropTypes.string.isRequired
|
||
|
|
};
|
||
|
|
|
||
|
|
export default class ClassicModal extends PureComponent {
|
||
|
|
constructor(...props) {
|
||
|
|
super(...props);
|
||
|
|
this.handleKeyDown = this.handleKeyDown.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
handleKeyDown(e) {
|
||
|
|
const { open, submitChallenge } = this.props;
|
||
|
|
if (
|
||
|
|
e.keyCode === 13 &&
|
||
|
|
(e.ctrlKey || e.meta) &&
|
||
|
|
open
|
||
|
|
) {
|
||
|
|
e.preventDefault();
|
||
|
|
submitChallenge();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
close,
|
||
|
|
open,
|
||
|
|
submitChallenge,
|
||
|
|
successMessage
|
||
|
|
} = this.props;
|
||
|
|
return (
|
||
|
|
<Modal
|
||
|
|
animation={ false }
|
||
|
|
dialogClassName='challenge-success-modal'
|
||
|
|
keyboard={ true }
|
||
|
|
onHide={ close }
|
||
|
|
onKeyDown={ this.handleKeyDown }
|
||
|
|
show={ open }
|
||
|
|
>
|
||
|
|
<Modal.Header
|
||
|
|
className='challenge-list-header'
|
||
|
|
closeButton={ true }
|
||
|
|
>
|
||
|
|
<Modal.Title>{ successMessage }</Modal.Title>
|
||
|
|
</Modal.Header>
|
||
|
|
<Modal.Body>
|
||
|
|
<div className='text-center'>
|
||
|
|
<div className='row'>
|
||
|
|
<div>
|
||
|
|
<FontAwesome
|
||
|
|
className='completion-icon text-primary'
|
||
|
|
name='check-circle'
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Modal.Body>
|
||
|
|
<Modal.Footer>
|
||
|
|
<Button
|
||
|
|
block={ true }
|
||
|
|
bsSize='large'
|
||
|
|
bsStyle='primary'
|
||
|
|
onClick={ submitChallenge }
|
||
|
|
>
|
||
|
|
Submit and go to next challenge (Ctrl + Enter)
|
||
|
|
</Button>
|
||
|
|
</Modal.Footer>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ClassicModal.displayName = 'ClassicModal';
|
||
|
|
ClassicModal.propTypes = propTypes;
|