69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
|
||
|
|
import './SimpleDialog.styl';
|
||
|
|
|
||
|
|
class SimpleDialog extends Component {
|
||
|
|
static propTypes = {
|
||
|
|
children: PropTypes.node,
|
||
|
|
componentRef: PropTypes.any,
|
||
|
|
componentStyle: PropTypes.object,
|
||
|
|
rootClass: PropTypes.string,
|
||
|
|
isOpen: PropTypes.bool,
|
||
|
|
headerTitle: PropTypes.string.isRequired,
|
||
|
|
onClose: PropTypes.func.isRequired,
|
||
|
|
onConfirm: PropTypes.func.isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
static defaultProps = {
|
||
|
|
isOpen: true,
|
||
|
|
componentStyle: {},
|
||
|
|
rootClass: '',
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
{this.props.isOpen && (
|
||
|
|
<div
|
||
|
|
className={`simpleDialog ${this.props.rootClass} `}
|
||
|
|
ref={this.props.componentRef}
|
||
|
|
style={this.props.componentStyle}
|
||
|
|
>
|
||
|
|
<form>
|
||
|
|
<div className="header">
|
||
|
|
<span className="closeBtn" onClick={this.onClose}>
|
||
|
|
<span className="closeIcon">x</span>
|
||
|
|
</span>
|
||
|
|
<h4 className="title">{this.props.headerTitle}</h4>
|
||
|
|
</div>
|
||
|
|
<div className="content">{this.props.children}</div>
|
||
|
|
<div className="footer">
|
||
|
|
<button className="btn btn-default" onClick={this.onClose}>
|
||
|
|
Cancel
|
||
|
|
</button>
|
||
|
|
<button className="btn btn-primary" onClick={this.onConfirm}>
|
||
|
|
Confirm
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
onClose = event => {
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
this.props.onClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
onConfirm = event => {
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
this.props.onConfirm();
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export { SimpleDialog };
|