public render()

in packages/react/src/components/DetailsList/DetailsColumn.base.tsx [57:196]
128 lines of code
35 McCabe index (conditional complexity)

  public render(): JSX.Element {
    const {
      column,
      columnIndex,
      parentId,
      isDraggable,
      styles,
      theme,
      cellStyleProps = DEFAULT_CELL_STYLE_PROPS,
      useFastIcons = true,
    } = this.props;
    const { onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip } = this.props;

    this._classNames = getClassNames(styles, {
      theme: theme!,
      headerClassName: column.headerClassName,
      iconClassName: column.iconClassName,
      isActionable: column.columnActionsMode !== ColumnActionsMode.disabled,
      isEmpty: !column.name,
      isIconVisible: column.isSorted || column.isGrouped || column.isFiltered,
      isPadded: column.isPadded,
      isIconOnly: column.isIconOnly,
      cellStyleProps,
      transitionDurationDrag: TRANSITION_DURATION_DRAG,
      transitionDurationDrop: TRANSITION_DURATION_DROP,
    });

    const classNames = this._classNames;
    const IconComponent = useFastIcons ? FontIcon : Icon;

    const onRenderFilterIcon = column.onRenderFilterIcon
      ? composeRenderFunction(column.onRenderFilterIcon, this._onRenderFilterIcon(this._classNames))
      : this._onRenderFilterIcon(this._classNames);

    const onRenderHeader = column.onRenderHeader
      ? composeRenderFunction(column.onRenderHeader, defaultOnRenderHeader(this._classNames))
      : defaultOnRenderHeader(this._classNames);

    const hasInnerButton =
      column.columnActionsMode !== ColumnActionsMode.disabled &&
      (column.onColumnClick !== undefined || this.props.onColumnClick !== undefined);
    const accNameDescription = {
      'aria-label': column.isIconOnly ? column.name : undefined,
      'aria-labelledby': column.isIconOnly ? undefined : `${parentId}-${column.key}-name`,
      'aria-describedby':
        !this.props.onRenderColumnHeaderTooltip && this._hasAccessibleLabel()
          ? `${parentId}-${column.key}-tooltip`
          : undefined,
    };

    return (
      <>
        <div
          key={column.key}
          ref={this._root}
          role={'columnheader'}
          {...(!hasInnerButton && accNameDescription)}
          aria-sort={column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none'}
          aria-colindex={columnIndex}
          // when the column is not disabled and has no inner button, this node should be in the focus order
          data-is-focusable={
            !hasInnerButton && column.columnActionsMode !== ColumnActionsMode.disabled ? 'true' : undefined
          }
          className={classNames.root}
          data-is-draggable={isDraggable}
          draggable={isDraggable}
          style={{
            width:
              column.calculatedWidth! +
              cellStyleProps.cellLeftPadding +
              cellStyleProps.cellRightPadding +
              (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0),
          }}
          data-automationid={'ColumnsHeaderColumn'}
          data-item-key={column.key}
        >
          {isDraggable && (
            <IconComponent iconName="GripperBarVertical" className={classNames.gripperBarVerticalStyle} />
          )}
          {onRenderColumnHeaderTooltip(
            {
              hostClassName: classNames.cellTooltip,
              id: `${parentId}-${column.key}-tooltip`,
              setAriaDescribedBy: false,
              column,
              content: column.columnActionsMode !== ColumnActionsMode.disabled ? column.ariaLabel : '',
              children: (
                <span
                  id={`${parentId}-${column.key}`}
                  className={classNames.cellTitle}
                  // this node should only be focusable when it is a button
                  data-is-focusable={
                    hasInnerButton && column.columnActionsMode !== ColumnActionsMode.disabled ? 'true' : undefined
                  }
                  role={hasInnerButton ? 'button' : undefined}
                  {...(hasInnerButton && accNameDescription)}
                  onContextMenu={this._onColumnContextMenu}
                  onClick={this._onColumnClick}
                  aria-haspopup={column.columnActionsMode === ColumnActionsMode.hasDropdown ? 'menu' : undefined}
                  aria-expanded={
                    column.columnActionsMode === ColumnActionsMode.hasDropdown ? !!column.isMenuOpen : undefined
                  }
                >
                  <span id={`${parentId}-${column.key}-name`} className={classNames.cellName}>
                    {(column.iconName || column.iconClassName) && (
                      <IconComponent className={classNames.iconClassName} iconName={column.iconName} />
                    )}

                    {onRenderHeader(this.props)}
                  </span>

                  {column.isFiltered && <IconComponent className={classNames.nearIcon} iconName="Filter" />}

                  {column.isSorted && (
                    <IconComponent
                      className={classNames.sortIcon}
                      iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'}
                    />
                  )}

                  {column.isGrouped && <IconComponent className={classNames.nearIcon} iconName="GroupedDescending" />}

                  {column.columnActionsMode === ColumnActionsMode.hasDropdown &&
                    !column.isIconOnly &&
                    onRenderFilterIcon({
                      'aria-hidden': true,
                      columnProps: this.props,
                      className: classNames.filterChevron,
                      iconName: 'ChevronDown',
                    })}
                </span>
              ),
            },
            this._onRenderColumnHeaderTooltip,
          )}
        </div>
        {!this.props.onRenderColumnHeaderTooltip ? this._renderAccessibleLabel() : null}
      </>
    );
  }