83 lines
1.9 KiB
JavaScript
83 lines
1.9 KiB
JavaScript
import Inferno from 'inferno';
|
|
import { Component } from 'inferno';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export class Modal extends Component {
|
|
constructor (props) {
|
|
super(props);
|
|
|
|
PropTypes.checkPropTypes({
|
|
noButton: PropTypes.bool,
|
|
buttonText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
title: PropTypes.string,
|
|
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
footerAlign: PropTypes.string,
|
|
footerContent: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
}, props, 'prop', 'Modal');
|
|
|
|
this.state = {
|
|
isVisible: false,
|
|
}
|
|
}
|
|
|
|
show () {
|
|
this.setState({
|
|
isVisible: true,
|
|
});
|
|
}
|
|
|
|
hide () {
|
|
this.setState({
|
|
isVisible: false,
|
|
});
|
|
}
|
|
|
|
render () {
|
|
const {
|
|
noButton,
|
|
buttonText,
|
|
title,
|
|
children,
|
|
footerAlign = 'left',
|
|
footerContent,
|
|
} = this.props;
|
|
|
|
return (
|
|
<div className='is-inline'>
|
|
<a className={!noButton ? 'button' : null}
|
|
onClick={ this.show.bind(this) }>
|
|
{ buttonText || 'Show' }
|
|
</a>
|
|
|
|
<div className={ `modal ${(this.state.isVisible) ? 'is-active' : ''}` }>
|
|
|
|
<div className='modal-background' onClick={ this.hide.bind(this) } />
|
|
|
|
<div className='modal-card'>
|
|
<header className='modal-card-head'>
|
|
<h3 className='modal-card-title'>
|
|
{ title || 'Modal' }
|
|
</h3>
|
|
<button className='delete' aria-label='close'
|
|
onClick={ this.hide.bind(this) }
|
|
/>
|
|
</header>
|
|
|
|
<section className='modal-card-body'>
|
|
|
|
{ children }
|
|
|
|
</section>
|
|
|
|
<footer className={ `modal-card-foot ${ (footerAlign === 'right') ? 'has-text-right is-pulled-right' : '' }` }>
|
|
|
|
{ footerContent }
|
|
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|