// @flow /* eslint-disable react/no-multi-comp */ // These should probably just be combined into one modal component import * as React from 'react'; import ReactModal from 'react-modal'; import Button from 'component/button'; import app from 'app'; import classnames from 'classnames'; type ModalProps = { type: string, overlay: boolean, confirmButtonLabel: string, abortButtonLabel: string, confirmButtonDisabled: boolean, abortButtonDisabled: boolean, onConfirmed?: any => any, onAborted?: any => any, className?: string, children?: React.Node, extraContent?: React.Node, expandButtonLabel?: string, hideButtonLabel?: string, fullScreen: boolean, title?: string | React.Node, }; export class Modal extends React.PureComponent { static defaultProps = { type: 'alert', overlay: true, /* eslint-disable no-underscore-dangle */ confirmButtonLabel: app.i18n.__('OK'), abortButtonLabel: app.i18n.__('Cancel'), /* eslint-enable no-underscore-dangle */ confirmButtonDisabled: false, abortButtonDisabled: false, fullScreen: false, }; render() { const { children, type, confirmButtonLabel, confirmButtonDisabled, onConfirmed, abortButtonLabel, abortButtonDisabled, onAborted, fullScreen, className, title, ...modalProps } = this.props; return ( {title && (

{title}

)} {children} {type === 'custom' ? null : ( // custom modals define their own buttons
)}
); } } type State = { expanded: boolean, }; export class ExpandableModal extends React.PureComponent { static defaultProps = { /* eslint-disable no-underscore-dangle */ confirmButtonLabel: app.i18n.__('OK'), expandButtonLabel: app.i18n.__('Show More...'), hideButtonLabel: app.i18n.__('Show Less'), /* eslint-enable no-underscore-dangle */ }; constructor(props: ModalProps) { 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}
); } } export default Modal; /* eslint-enable react/no-multi-comp */