2017-01-25 18:51:41 +01:00
|
|
|
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
2016-11-22 11:54:20 +01:00
|
|
|
// This file is part of Parity.
|
|
|
|
|
|
|
|
// Parity is free software: you can redistribute it and/or modify
|
|
|
|
// it under the terms of the GNU General Public License as published by
|
|
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
|
|
// (at your option) any later version.
|
|
|
|
|
|
|
|
// Parity is distributed in the hope that it will be useful,
|
|
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
// GNU General Public License for more details.
|
|
|
|
|
|
|
|
// You should have received a copy of the GNU General Public License
|
|
|
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
2017-03-10 13:31:57 +01:00
|
|
|
import keycode from 'keycode';
|
2016-11-22 11:54:20 +01:00
|
|
|
import React, { Component, PropTypes } from 'react';
|
2017-03-10 13:31:57 +01:00
|
|
|
import ReactDOM from 'react-dom';
|
|
|
|
|
|
|
|
import Button from '../Button';
|
2016-11-22 11:54:20 +01:00
|
|
|
|
|
|
|
import styles from './modal.css';
|
2017-03-10 13:31:57 +01:00
|
|
|
import CloseImage from '~/../assets/images/dapps/close.svg';
|
2016-11-22 11:54:20 +01:00
|
|
|
|
|
|
|
export default class Modal extends Component {
|
|
|
|
static propTypes = {
|
2017-03-10 13:31:57 +01:00
|
|
|
actions: PropTypes.array,
|
2016-11-22 11:54:20 +01:00
|
|
|
children: PropTypes.node,
|
2017-03-10 13:31:57 +01:00
|
|
|
header: PropTypes.node,
|
|
|
|
secondary: PropTypes.bool,
|
|
|
|
onClose: PropTypes.func.isRequired,
|
|
|
|
onConfirm: PropTypes.func
|
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
actions: null,
|
|
|
|
secondary: false
|
|
|
|
};
|
2016-11-22 11:54:20 +01:00
|
|
|
|
|
|
|
render () {
|
2017-03-10 13:31:57 +01:00
|
|
|
const { children, actions, header, secondary } = this.props;
|
|
|
|
|
|
|
|
const modalClasses = [ styles.modal ];
|
|
|
|
|
|
|
|
if (secondary) {
|
|
|
|
modalClasses.push(styles.secondary);
|
|
|
|
}
|
2016-11-22 11:54:20 +01:00
|
|
|
|
|
|
|
return (
|
2017-03-10 13:31:57 +01:00
|
|
|
<div
|
|
|
|
className={ modalClasses.join(' ') }
|
|
|
|
onClick={ this.handleClose }
|
|
|
|
onKeyUp={ this.handleKeyPress }
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
className={ styles.dialog }
|
|
|
|
onClick={ this.stopEvent }
|
|
|
|
ref={ this.handleSetRef }
|
|
|
|
tabIndex={ open ? 0 : null }
|
|
|
|
>
|
|
|
|
<div className={ styles.header }>
|
|
|
|
{ header }
|
|
|
|
<div
|
|
|
|
className={ styles.close }
|
|
|
|
onClick={ this.handleClose }
|
|
|
|
onKeyPress={ this.handleCloseKeyPress }
|
|
|
|
tabIndex={ open ? 0 : null }
|
|
|
|
title='close'
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
className={ styles.closeIcon }
|
|
|
|
src={ CloseImage }
|
|
|
|
/>
|
2016-11-22 11:54:20 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2017-03-10 13:31:57 +01:00
|
|
|
|
|
|
|
<div className={ styles.content }>
|
|
|
|
{ children }
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{ actions ? this.renderActions(actions) : null }
|
2016-11-22 11:54:20 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-03-10 13:31:57 +01:00
|
|
|
renderActions (actions) {
|
2016-11-22 11:54:20 +01:00
|
|
|
return (
|
2017-03-10 13:31:57 +01:00
|
|
|
<div className={ styles.footer }>
|
|
|
|
{ actions.map((action) => {
|
|
|
|
let onClick = () => {};
|
|
|
|
|
|
|
|
switch (action.type) {
|
|
|
|
case 'confirm':
|
|
|
|
onClick = this.handleConfirm;
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'close':
|
|
|
|
onClick = this.handleClose;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Button
|
|
|
|
key={ action.type }
|
|
|
|
label={ action.label }
|
|
|
|
warning={ action.warning }
|
|
|
|
onClick={ onClick }
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}) }
|
2016-11-22 11:54:20 +01:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-03-10 13:31:57 +01:00
|
|
|
|
|
|
|
stopEvent = (event) => {
|
|
|
|
event.stopPropagation();
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
handleKeyPress = (event) => {
|
|
|
|
const codeName = keycode(event);
|
|
|
|
|
|
|
|
if (codeName === 'esc') {
|
|
|
|
return this.handleClose();
|
|
|
|
}
|
|
|
|
|
|
|
|
return event;
|
|
|
|
}
|
|
|
|
|
|
|
|
handleCloseKeyPress = (event) => {
|
|
|
|
const codeName = keycode(event);
|
|
|
|
|
|
|
|
if (codeName === 'enter') {
|
|
|
|
return this.handleClose();
|
|
|
|
}
|
|
|
|
|
|
|
|
return event;
|
|
|
|
}
|
|
|
|
|
|
|
|
handleSetRef = (containerRef) => {
|
|
|
|
// Focus after the modal is open
|
|
|
|
setTimeout(() => {
|
|
|
|
const element = ReactDOM.findDOMNode(containerRef);
|
|
|
|
|
|
|
|
element && element.focus();
|
|
|
|
}, 100);
|
|
|
|
}
|
|
|
|
|
|
|
|
handleConfirm = () => {
|
|
|
|
this.props.onConfirm && this.props.onConfirm();
|
|
|
|
}
|
|
|
|
|
|
|
|
handleClose = () => {
|
|
|
|
this.props.onClose();
|
|
|
|
}
|
2016-11-22 11:54:20 +01:00
|
|
|
}
|