lbry-desktop/ui/modal/modal.jsx

// @flow
// These should probably just be combined into one modal component
import * as ICONS from 'constants/icons';
import * as React from 'react';
import ReactModal from 'react-modal';
import Button from 'component/button';
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,
  title?: string | React.Node,
};

export class Modal extends React.PureComponent<ModalProps> {
  static defaultProps = {
    type: 'alert',
    overlay: true,
    confirmButtonLabel: __('OK'),
    abortButtonLabel: __('Cancel'),
    confirmButtonDisabled: false,
    abortButtonDisabled: false,
  };

  render() {
    const {
      children,
      type,
      confirmButtonLabel,
      confirmButtonDisabled,
      onConfirmed,
      abortButtonLabel,
      abortButtonDisabled,
      onAborted,
      className,
      title,
      ...modalProps
    } = this.props;
    return (
      <ReactModal
        {...modalProps}
        onRequestClose={onAborted || onConfirmed}
        className={classnames('modal', className, {
          'modal--card-internal': type === 'card',
        })}
        overlayClassName="modal-overlay"
      >
        {title && <h1 className="card__title card__title--deprecated">{title}</h1>}
        {type === 'card' && <Button button="close" icon={ICONS.REMOVE} onClick={onAborted} />}
        {children}
        {type === 'custom' || type === 'card' ? null : ( // custom modals define their own buttons
          <div className="card__actions">
            <Button
              button="primary"
              label={confirmButtonLabel}
              disabled={confirmButtonDisabled}
              onClick={onConfirmed}
            />
            {type === 'confirm' ? (
              <Button button="link" label={abortButtonLabel} disabled={abortButtonDisabled} onClick={onAborted} />
            ) : null}
          </div>
        )}
      </ReactModal>
    );
  }
}

type State = {
  expanded: boolean,
};

export class ExpandableModal extends React.PureComponent<ModalProps, State> {
  static defaultProps = {
    confirmButtonLabel: __('OK'),
    expandButtonLabel: __('Show More...'),
    hideButtonLabel: __('Show Less'),
  };

  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 ? <div>{this.props.extraContent}</div> : null}
        <div className="card__actions">
          <Button button="primary" label={this.props.confirmButtonLabel} onClick={this.props.onConfirmed} />
          <Button
            button="link"
            label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel}
            onClick={() => {
              this.toggleExpanded();
            }}
          />
        </div>
      </Modal>
    );
  }
}

export default Modal;