Method render

src/components/ModalPortal.js:373–415

()

    }, {});

  render() {
    const {
      id,
      className,
      overlayClassName,
      defaultStyles,
      children
    } = this.props;
    const contentStyles = className ? {} : defaultStyles.content;
    const overlayStyles = overlayClassName ? {} : defaultStyles.overlay;

    if (this.shouldBeClosed()) {
      return null;
    }

    const overlayProps = {
      ref: this.setOverlayRef,
      className: this.buildClassName("overlay", overlayClassName),
      style: { ...overlayStyles, ...this.props.style.overlay },
      onClick: this.handleOverlayOnClick,
      onMouseDown: this.handleOverlayOnMouseDown
    };

    const contentProps = {
      id,
      ref: this.setContentRef,
      style: { ...contentStyles, ...this.props.style.content },
      className: this.buildClassName("content", className),
      tabIndex: "-1",
      onKeyDown: this.handleKeyDown,
      onMouseDown: this.handleContentOnMouseDown,
      onMouseUp: this.handleContentOnMouseUp,
      onClick: this.handleContentOnClick,
      role: this.props.role,
      "aria-label": this.props.contentLabel,
      ...this.attributesFromObject("aria", { modal: true, ...this.props.aria }),
      ...this.attributesFromObject("data", this.props.data || {}),
      "data-testid": this.props.testId
    };

    const contentElement = this.props.contentElement(contentProps, children);
    return this.props.overlayElement(overlayProps, contentElement);
  }
}