lbry-desktop/ui/js/component/modal.js

95 lines
2.9 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
import ReactModal from 'react-modal';
2017-04-07 07:15:22 +02:00
import Link from 'component/link';
2016-11-22 21:19:08 +01:00
const i18n = require('y18n')({directory: 'app/locales'});
2016-11-22 21:19:08 +01:00
2017-05-17 10:10:25 +02:00
export class Modal extends React.Component {
static propTypes = {
2016-10-21 03:25:32 +02:00
type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
2017-04-12 22:23:20 +02:00
overlay: React.PropTypes.bool,
2016-10-21 03:25:32 +02:00
onConfirmed: React.PropTypes.func,
onAborted: React.PropTypes.func,
confirmButtonLabel: React.PropTypes.string,
abortButtonLabel: React.PropTypes.string,
confirmButtonDisabled: React.PropTypes.bool,
abortButtonDisabled: React.PropTypes.bool,
2017-05-17 10:10:25 +02:00
}
static defaultProps = {
type: 'alert',
overlay: true,
confirmButtonLabel: i18n.__('OK'),
abortButtonLabel: i18n.__('Cancel'),
2017-05-17 10:10:25 +02:00
confirmButtonDisabled: false,
abortButtonDisabled: false,
}
render() {
2016-10-21 03:25:32 +02:00
return (
2017-02-25 08:45:39 +01:00
<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'}>
2017-02-25 08:45:39 +01:00
<div>
{this.props.children}
</div>
{this.props.type == 'custom' // custom modals define their own buttons
? null
: <div className="modal__buttons">
2017-03-17 23:05:25 +01:00
<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}
2017-02-25 08:45:39 +01:00
</div>}
2016-10-21 03:25:32 +02:00
</ReactModal>
);
}
2017-05-17 10:10:25 +02:00
}
2016-11-22 21:19:08 +01:00
2017-05-17 10:10:25 +02:00
export class ExpandableModal extends React.Component {
static propTypes = {
2017-02-25 08:56:57 +01:00
expandButtonLabel: React.PropTypes.string,
extraContent: React.PropTypes.element,
2017-05-17 10:10:25 +02:00
}
static defaultProps = {
confirmButtonLabel: i18n.__('OK'),
expandButtonLabel: i18n.__('Show More...'),
hideButtonLabel: i18n.__('Show Less'),
2017-05-17 10:10:25 +02:00
}
constructor(props) {
super(props);
this.state = {
2017-02-25 08:56:57 +01:00
expanded: false,
}
2017-05-17 10:10:25 +02:00
}
toggleExpanded() {
2017-02-25 08:56:57 +01:00
this.setState({
expanded: !this.state.expanded,
});
2017-05-17 10:10:25 +02:00
}
render() {
2017-02-25 08:56:57 +01:00
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() }} />
2017-02-25 08:56:57 +01:00
</div>
</Modal>
);
}
2017-05-17 10:10:25 +02:00
}
2017-02-25 08:56:57 +01:00
2016-11-22 21:19:08 +01:00
export default Modal;