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

124 lines
3.3 KiB
JavaScript
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
import ReactModal from "react-modal";
import Link from "component/link";
import app from "../app.js";
2016-11-22 21:19:08 +01:00
2017-05-17 10:10:25 +02:00
export class Modal extends React.Component {
static propTypes = {
2017-06-06 23:19:12 +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-06-06 23:19:12 +02:00
};
2017-05-17 10:10:25 +02:00
static defaultProps = {
2017-06-06 23:19:12 +02:00
type: "alert",
2017-05-17 10:10:25 +02:00
overlay: true,
2017-06-06 23:19:12 +02:00
confirmButtonLabel: app.i18n.__("OK"),
abortButtonLabel: app.i18n.__("Cancel"),
2017-05-17 10:10:25 +02:00
confirmButtonDisabled: false,
abortButtonDisabled: false,
2017-06-06 23:19:12 +02:00
};
2017-05-17 10:10:25 +02:00
render() {
2016-10-21 03:25:32 +02:00
return (
2017-06-06 23:19:12 +02: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>
2017-06-06 23:19:12 +02:00
{this.props.type == "custom" // custom modals define their own buttons
2017-02-25 08:45:39 +01:00
? null
: <div className="modal__buttons">
2017-06-06 23:19:12 +02: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-06-06 23:19:12 +02:00
};
2017-05-17 10:10:25 +02:00
static defaultProps = {
2017-06-06 23:19:12 +02:00
confirmButtonLabel: app.i18n.__("OK"),
expandButtonLabel: app.i18n.__("Show More..."),
hideButtonLabel: app.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-06-06 23:19:12 +02:00
};
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 (
2017-06-06 23:19:12 +02:00
<Modal type="custom" {...this.props}>
2017-02-25 08:56:57 +01:00
{this.props.children}
2017-06-06 23:19:12 +02:00
{this.state.expanded ? this.props.extraContent : null}
2017-02-25 08:56:57 +01:00
<div className="modal__buttons">
2017-06-06 23:19:12 +02:00
<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;