lbry-desktop/src/renderer/modal/modal.jsx

150 lines
3.7 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @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,
2018-03-26 23:32:43 +02:00
};
export class Modal extends React.PureComponent<ModalProps> {
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,
2018-09-26 19:48:07 +02:00
title,
2018-03-26 23:32:43 +02:00
...modalProps
} = this.props;
return (
<ReactModal
{...modalProps}
2018-05-31 06:32:31 +02:00
onRequestClose={onAborted || onConfirmed}
2018-03-26 23:32:43 +02:00
className={classnames(className, {
modal: !fullScreen,
'modal--fullscreen': fullScreen,
})}
overlayClassName="modal-overlay"
2018-03-26 23:32:43 +02:00
>
2019-01-08 19:48:09 +01:00
{title && (
<header className="card__header">
<h1 className="card__title">{title}</h1>
</header>
)}
{children}
{type === 'custom' ? null : ( // custom modals define their own buttons
<div className="card__actions">
<Button
button="primary"
label={confirmButtonLabel}
disabled={confirmButtonDisabled}
onClick={onConfirmed}
/>
{type === 'confirm' ? (
2018-03-26 23:32:43 +02:00
<Button
button="link"
label={abortButtonLabel}
disabled={abortButtonDisabled}
onClick={onAborted}
2018-03-26 23:32:43 +02:00
/>
) : null}
</div>
)}
2018-03-26 23:32:43 +02:00
</ReactModal>
);
}
}
type State = {
expanded: boolean,
};
export class ExpandableModal extends React.PureComponent<ModalProps, State> {
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 (
<Modal type="custom" {...this.props}>
{this.props.children}
{this.state.expanded ? this.props.extraContent : null}
<div className="modal__buttons">
<Button
button="primary"
label={this.props.confirmButtonLabel}
className="modal__button"
onClick={this.props.onConfirmed}
/>
<Button
2018-04-23 07:04:11 +02:00
button="link"
2018-03-26 23:32:43 +02:00
label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel}
className="modal__button"
onClick={() => {
this.toggleExpanded();
}}
/>
</div>
</Modal>
);
}
}
export default Modal;
/* eslint-enable react/no-multi-comp */