90 lines
2.8 KiB
JavaScript
90 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import ReactModal from 'react-modal';
|
|
import Link from 'component/link';
|
|
|
|
export class Modal extends React.Component {
|
|
static propTypes = {
|
|
type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
|
|
overlay: React.PropTypes.bool,
|
|
onConfirmed: React.PropTypes.func,
|
|
onAborted: React.PropTypes.func,
|
|
confirmButtonLabel: React.PropTypes.string,
|
|
abortButtonLabel: React.PropTypes.string,
|
|
confirmButtonDisabled: React.PropTypes.bool,
|
|
abortButtonDisabled: React.PropTypes.bool,
|
|
}
|
|
|
|
static defaultProps = {
|
|
type: 'alert',
|
|
overlay: true,
|
|
confirmButtonLabel: __('OK'),
|
|
abortButtonLabel: __('Cancel'),
|
|
confirmButtonDisabled: false,
|
|
abortButtonDisabled: false,
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
|
|
className={(this.props.className || '') + ' modal'}
|
|
overlayClassName={![null, undefined, ""].includes(this.props.overlayClassName) ? this.props.overlayClassName : 'modal-overlay'}>
|
|
<div>
|
|
{this.props.children}
|
|
</div>
|
|
{this.props.type == 'custom' // custom modals define their own buttons
|
|
? null
|
|
: <div className="modal__buttons">
|
|
<Link button="primary" label={this.props.confirmButtonLabel} className="modal__button" disabled={this.props.confirmButtonDisabled} onClick={this.props.onConfirmed} />
|
|
{this.props.type == 'confirm'
|
|
? <Link button="alt" label={this.props.abortButtonLabel} className="modal__button" disabled={this.props.abortButtonDisabled} onClick={this.props.onAborted} />
|
|
: null}
|
|
</div>}
|
|
</ReactModal>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class ExpandableModal extends React.Component {
|
|
static propTypes = {
|
|
expandButtonLabel: React.PropTypes.string,
|
|
extraContent: React.PropTypes.element,
|
|
}
|
|
|
|
static defaultProps = {
|
|
confirmButtonLabel: __('OK'),
|
|
expandButtonLabel: __('Show More...'),
|
|
hideButtonLabel: __('Show Less'),
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
expanded: false,
|
|
}
|
|
}
|
|
|
|
toggleExpanded() {
|
|
this.setState({
|
|
expanded: !this.state.expanded,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Modal type="custom" {... this.props}>
|
|
{this.props.children}
|
|
{this.state.expanded
|
|
? this.props.extraContent
|
|
: null}
|
|
<div className="modal__buttons">
|
|
<Link button="primary" label={this.props.confirmButtonLabel} className="modal__button" onClick={this.props.onConfirmed} />
|
|
<Link button="alt" label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel}
|
|
className="modal__button" onClick={() => { this.toggleExpanded() }} />
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Modal;
|