render()

in src/dialog/dialog.tsx [154:280]
125 lines of code
11 McCabe index (conditional complexity)

  render() {
    const {
      show,
      showCloseButton,
      onOverlayClick,
      onCloseAttempt,
      onEscPress,
      onCloseClick,
      children,
      className,
      contentClassName,
      trapFocus,
      'data-test': dataTest,
      closeButtonInside,
      portalTarget,
      label,
      closeButtonTitle,
      dense,
      shortcutOptions,
      native,
      modal,
      preventBodyScroll,
      ...restProps
    } = this.props;
    const classes = classNames(styles.container, className);
    const shortcutsMap = this.getShortcutsMap();
    const content = (
      <>
        <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope} options={this.props.shortcutOptions} />
        {(onOverlayClick !== noop || onCloseAttempt !== noop) && (
          <div
            // click handler is duplicated in close button
            role='presentation'
            className={styles.clickableOverlay}
            onClick={this.handleClick}
            data-test='ring-dialog-overlay'
          />
        )}
        <div className={styles.innerContainer}>
          <AdaptiveIsland
            className={classNames(styles.content, contentClassName, {
              [styles.dense]: dense,
            })}
            data-test='ring-dialog'
            role='dialog'
            aria-label={label}
          >
            {children}
            {showCloseButton && (
              <Button
                icon={closeIcon}
                data-test='ring-dialog-close-button'
                className={classNames(styles.closeButton, {
                  [styles.closeButtonOutside]: !closeButtonInside,
                  [styles.closeButtonInside]: closeButtonInside,
                })}
                iconClassName={classNames(styles.closeIcon, {
                  [styles.closeIconOutside]: !closeButtonInside,
                  [styles.closeIconInside]: closeButtonInside,
                })}
                onClick={this.onCloseClick}
                title={closeButtonTitle}
                aria-label={closeButtonTitle || 'close dialog'}
              />
            )}
          </AdaptiveIsland>
        </div>
      </>
    );

    if (native) {
      return (
        <dialog
          className={classNames(styles.nativeDialog, className)}
          ref={this.nativeDialog}
          data-rg-modal-dialog-container={modal ? '' : undefined}
        >
          <PopupTarget id={this.uid} className={styles.popupTarget}>
            {target => (
              <>
                {content}
                {target}
              </>
            )}
          </PopupTarget>
        </dialog>
      );
    }

    return (
      show && (
        <PopupTargetContext.Consumer>
          {contextTarget => {
            const normalizedContextTarget = normalizePopupTarget(contextTarget);
            let targetElement: Element = document.body;
            if (portalTarget instanceof HTMLElement) {
              targetElement = portalTarget;
            } else if (normalizedContextTarget !== undefined) {
              const container = getPopupContainer(normalizedContextTarget);
              if (container) {
                targetElement = container;
              }
            }
            return createPortal(
              <PopupTarget id={this.uid} className={styles.popupTarget}>
                {target => (
                  <TabTrap
                    trapDisabled={!trapFocus}
                    data-test={dataTests('ring-dialog-container', dataTest)}
                    data-rg-modal-dialog-container=''
                    ref={this.dialogRef}
                    className={classes}
                    role='presentation'
                    {...restProps}
                  >
                    {content}
                    {target}
                  </TabTrap>
                )}
              </PopupTarget>,
              targetElement,
            );
          }}
        </PopupTargetContext.Consumer>
      )
    );
  }