public render()

in packages/react-experiments/src/components/Tile/Tile.tsx [135:265]
126 lines of code
31 McCabe index (conditional complexity)

  public render(): JSX.Element {
    const {
      children,
      selectionIndex = -1,
      invokeSelection = false,
      selection,
      background,
      foreground,
      showBackgroundFrame = false,
      showForegroundFrame = false,
      hideBackground = false,
      hideForeground = false,
      itemName,
      itemActivity,
      componentRef,
      className,
      tileSize = 'large',
      contentSize,
      ariaLabel,
      descriptionAriaLabel,
      href,
      onClick,
      download,
      hrefLang,
      media,
      rel,
      target,
      isFluentStyling,
      ariaLabelSelected,
      nameplateOnlyOnHover,
      disabled = false,
      ...divProps
    } = this.props;

    const { isSelected = false, isModal = false } = this.state;

    const { isSelectable = !disabled && !!selection && selectionIndex > -1 } = this.props;
    const isInvokable = (!!href || !!onClick || !!invokeSelection) && !isModal;
    const ariaLabelWithSelectState = isSelected && ariaLabelSelected ? `${ariaLabel}, ${ariaLabelSelected}` : ariaLabel;
    const content = (
      <>
        {ariaLabel ? (
          <span key="label" id={this._labelId} className={css('ms-Tile-label', TileStylesModule.label)}>
            {ariaLabelWithSelectState}
          </span>
        ) : null}
        {background
          ? this._onRenderBackground({
              background: background,
              hideBackground,
            })
          : null}
        {foreground
          ? this._onRenderForeground({
              foreground: foreground,
              hideForeground,
            })
          : null}
        {itemName || itemActivity
          ? this._onRenderNameplate({
              name: itemName,
              activity: itemActivity,
              onlyOnHover: !!nameplateOnlyOnHover,
            })
          : null}
      </>
    );

    const LinkAs = href ? 'a' : onClick ? 'button' : 'span';

    const link = (
      <LinkAs
        href={href}
        onClick={onClick}
        download={download}
        hrefLang={hrefLang}
        media={media}
        target={target}
        rel={rel === undefined ? (href && target ? 'noopener' : undefined) : rel}
        ref={this.props.linkRef}
        data-selection-invoke={isInvokable && selectionIndex > -1 ? true : undefined}
        className={css('ms-Tile-link', TileStyles.link)}
      >
        {content}
      </LinkAs>
    );

    return (
      <div
        aria-selected={isSelected}
        {...getNativeProps(divProps, divProperties)}
        aria-labelledby={ariaLabel ? this._labelId : this._nameId}
        aria-describedby={ariaLabelWithSelectState || descriptionAriaLabel ? this._descriptionId : this._activityId}
        aria-disabled={disabled || undefined}
        className={css('ms-Tile', className, TileStyles.tile, {
          [`ms-Tile--isSmall ${TileStyles.isSmall}`]: tileSize === 'small',
          [`ms-Tile--isLarge ${TileStyles.isLarge}`]: tileSize === 'large',
          [`ms-Tile--hasBackgroundFrame ${TileStyles.hasBackgroundFrame}`]: showBackgroundFrame,
          [`ms-Tile--hasForegroundFrame ${TileStyles.hasForegroundFrame}`]: showForegroundFrame,
          [`ms-Tile--isSelected ${TileStyles.selected} ${SignalStyles.selected}`]: isSelected,
          [`ms-Tile--isSelectable ${TileStyles.selectable}`]: isSelectable,
          [`ms-Tile--hasBackground ${TileStyles.hasBackground}`]: !!background,
          [SignalStyles.dark]: !!background && !hideBackground,
          [`ms-Tile--showBackground ${TileStyles.showBackground}`]: !hideBackground,
          [`ms-Tile--invokable ${TileStyles.invokable}`]: isInvokable,
          [`ms-Tile--uninvokable ${TileStyles.uninvokable}`]: !isInvokable,
          [`ms-Tile--isDisabled ${TileStyles.disabled}`]: disabled,
          [`ms-Tile--showCheck ${TileStyles.showCheck}`]: isModal,
          [`ms-Tile--isFluentStyling ${TileStyles.isFluentStyling}`]: isFluentStyling,
        })}
        data-selection-disabled={disabled || undefined}
        data-is-focusable={true}
        data-is-sub-focuszone={true}
        data-disable-click-on-enter={true}
        data-selection-index={selectionIndex > -1 ? selectionIndex : undefined}
        data-selection-touch-invoke={isInvokable && selectionIndex > -1 ? true : undefined}
      >
        {link}
        {descriptionAriaLabel ? (
          <span key="description" role="presentation" hidden={true} id={this._descriptionId}>
            {descriptionAriaLabel}
          </span>
        ) : null}
        {isSelectable
          ? this._onRenderCheck({
              isSelected: isSelected,
            })
          : null}
      </div>
    );
  }