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

import React from "react";
import ReactModal from "react-modal";
import Link from "component/link";
import app from "../app.js";

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: app.i18n.__("OK"),
    abortButtonLabel: app.i18n.__("Cancel"),
    confirmButtonDisabled: false,
    abortButtonDisabled: false,
  };

  render() {
    return (
      <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"
        }
      >
        <div>
          {this.props.children}
        </div>
        {this.props.type == "custom" // custom modals define their own buttons
          ? null
          : <div className="modal__buttons">
              <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}
            </div>}
      </ReactModal>
    );
  }
}

export class ExpandableModal extends React.Component {
  static propTypes = {
    expandButtonLabel: React.PropTypes.string,
    extraContent: React.PropTypes.element,
  };

  static defaultProps = {
    confirmButtonLabel: app.i18n.__("OK"),
    expandButtonLabel: app.i18n.__("Show More..."),
    hideButtonLabel: app.i18n.__("Show Less"),
  };

  constructor(props) {
    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">
          <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();
            }}
          />
        </div>
      </Modal>
    );
  }
}

export default Modal;