public render()

in src/app/controllers/popup_controller.tsx [323:497]

• 175 lines of code
• 29 McCabe index (conditional complexity)

  public render() {
    const popup = this.props.context;
    const position = popup.options.anchor.getBoundingClientRect();
    const style: React.CSSProperties = { position: "absolute" };
    const marginX = 0;
    const marginY = 0;
    let alignX = popup.options.alignX;
    let alignY = popup.options.alignY;
    switch (popup.options.alignX) {
      case "inner":
        {
          if ((position.left + position.right) / 2 < window.innerWidth / 2) {
            style.left = position.left + "px";
            alignX = PopupAlignment.StartInner;
          } else {
            style.right =
              window.innerWidth - (position.left + position.width) + "px";
            alignX = PopupAlignment.EndInner;
          }
        }
        break;
      case "outer":
        {
          if ((position.left + position.right) / 2 > window.innerWidth / 2) {
            style.right = window.innerWidth - position.left + marginX + "px";
            alignX = PopupAlignment.StartOuter;
          } else {
            style.left = position.left + position.width + marginX + "px";
            alignX = PopupAlignment.EndOuter;
          }
        }
        break;
      case "start-inner":
        {
          style.left = position.left + "px";
        }
        break;
      case "end-inner":
        {
          style.right =
            window.innerWidth - (position.left + position.width) + "px";
        }
        break;
      case "start-outer":
        {
          style.right = window.innerWidth - position.left + marginX + "px";
        }
        break;
      case "end-outer":
        {
          style.left = position.left + position.width + marginX + "px";
        }
        break;
    }
    switch (popup.options.alignY) {
      case "inner":
        {
          if ((position.top + position.bottom) / 2 < window.innerHeight / 2) {
            style.top = position.top + "px";
            alignY = PopupAlignment.StartInner;
          } else {
            style.bottom =
              window.innerHeight - (position.top + position.height) + "px";
            alignY = PopupAlignment.EndInner;
          }
        }
        break;
      case "outer":
        {
          if ((position.top + position.bottom) / 2 > window.innerHeight / 2) {
            style.bottom = window.innerHeight - position.top + marginY + "px";
            alignY = PopupAlignment.StartOuter;
          } else {
            style.top = position.top + position.height + marginY + "px";
            alignY = PopupAlignment.EndOuter;
          }
        }
        break;
      case "start-inner":
        {
          style.top = position.top + "px";
        }
        break;
      case "end-inner":
        {
          style.bottom =
            window.innerHeight - (position.top + position.height) + "px";
        }
        break;
      case "start-outer":
        {
          style.bottom = window.innerHeight - position.top + marginY + "px";
        }
        break;
      case "end-outer":
        {
          style.top = position.top + position.height + marginY + "px";
        }
        break;
    }
    if (this.props.width != null) {
      style.width = this.props.width + "px";
    }
    return (
      <div
        tabIndex={0}
        ref={(r) => (this.popupContainer = r)}
        className={
          this.props.className
            ? this.props.className + " popup-view-container"
            : "popup-view-container"
        }
        style={style}
        onMouseDownCapture={() => {
          newlyCreatedContexts = new WeakSet<PopupContext>();
        }}
        onMouseDown={(e) => {
          e.stopPropagation();
          for (const child of this.props.context.children) {
            if (!newlyCreatedContexts.has(child)) {
              child.close();
            }
          }
        }}
      >
        <div
          className={classNames(
            "popup-view",
            [
              "popup-x-top-left",
              alignX == "start-inner" && alignY == "end-outer",
            ],
            [
              "popup-x-bottom-left",
              alignX == "start-inner" && alignY == "start-outer",
            ],
            [
              "popup-x-top-right",
              alignX == "end-inner" && alignY == "end-outer",
            ],
            [
              "popup-x-bottom-right",
              alignX == "end-inner" && alignY == "start-outer",
            ],
            [
              "popup-y-top-left",
              alignX == "start-outer" && alignY == "start-inner",
            ],
            [
              "popup-y-top-right",
              alignX == "end-outer" && alignY == "start-inner",
            ],
            [
              "popup-y-bottom-left",
              alignX == "start-outer" && alignY == "end-inner",
            ],
            [
              "popup-y-bottom-right",
              alignX == "end-outer" && alignY == "end-inner",
            ]
          )}
        >
          <TelemetryContext.Consumer>
            {(telemetryRecorder) => {
              return (
                <ErrorBoundary telemetryRecorder={telemetryRecorder}>
                  {this.props.children}
                </ErrorBoundary>
              );
            }}
          </TelemetryContext.Consumer>
        </div>
      </div>
    );
  }