render()

in src/popup/popup.tsx [399:481]
77 lines of code
11 McCabe index (conditional complexity)

  render() {
    const {
      className,
      style,
      hidden,
      attached,
      keepMounted,
      client,
      onMouseDown,
      onMouseUp,
      onMouseOver,
      onMouseOut,
      onContextMenu,
      'data-test': dataTest,
      largeBorderRadius,
    } = this.props;
    const showing = this.state.display === Display.SHOWING;

    const direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');

    return (
      <ThemeContext.Consumer>
        {theme => (
          <WithThemeClasses theme={theme.theme}>
            {themeClasses => (
              <PopupTargetContext.Consumer>
                {value => {
                  this.ringPopupTarget = normalizePopupTarget(value);

                  if (!(typeof value === 'string' || value instanceof Element)) {
                    this.cssPositioningFromContext = value?.cssPositioning;
                  }

                  const classes = classNames(className, theme.passToPopups ? themeClasses : null, styles.popup, {
                    [styles.cssAnchoredPopup]: this.shouldUseCssPositioning(),
                    [styles.attached]: attached,
                    [styles.hidden]: hidden,
                    [styles.showing]: showing,
                    [styles.largeBorderRadius]: largeBorderRadius,
                  });
                  return (
                    <span ref={this.portalRef}>
                      {this.shouldUseShortcuts() && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope} />}

                      {client !== false &&
                        (keepMounted || !hidden) &&
                        createPortal(
                          <PopupTarget
                            id={this.uid}
                            ref={this.containerRef}
                            onMouseOver={onMouseOver}
                            onFocus={onMouseOver}
                            onMouseOut={onMouseOut}
                            onBlur={onMouseOut}
                            onContextMenu={onContextMenu}
                          >
                            <div
                              data-test={dataTests('ring-popup', dataTest)}
                              data-test-shown={!hidden && !showing}
                              data-test-direction={direction}
                              ref={this.popupRef}
                              className={classes}
                              style={style}
                              onMouseDown={onMouseDown}
                              onMouseUp={onMouseUp}
                              // mouse handlers are used to track clicking on inner elements
                              role='presentation'
                            >
                              {this.getInternalContent()}
                            </div>
                          </PopupTarget>,
                          this.getContainer() || document.body,
                        )}
                    </span>
                  );
                }}
              </PopupTargetContext.Consumer>
            )}
          </WithThemeClasses>
        )}
      </ThemeContext.Consumer>
    );
  }