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 (
{this.props.children}
{this.props.type == 'custom' // custom modals define their own buttons ? null :
{this.props.type == 'confirm' ? : null}
}
); } } 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 ( {this.props.children} {this.state.expanded ? this.props.extraContent : null}
{ this.toggleExpanded() }} />
); } } export default Modal;