public render()

in packages/react/src/components/DetailsList/DetailsHeader.base.tsx [156:336]
177 lines of code
29 McCabe index (conditional complexity)

  public render(): JSX.Element {
    const {
      columns = NO_COLUMNS,
      ariaLabel,
      ariaLabelForToggleAllGroupsButton,
      ariaLabelForSelectAllCheckbox,
      selectAllVisibility,
      ariaLabelForSelectionColumn,
      indentWidth,
      onColumnClick,
      onColumnContextMenu,
      onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip,
      styles,
      selectionMode,
      theme,
      onRenderDetailsCheckbox,
      groupNestingDepth,
      useFastIcons,
      checkboxVisibility,
      className,
    } = this.props;
    const { isAllSelected, columnResizeDetails, isSizing, isAllCollapsed } = this.state;
    const showCheckbox = selectAllVisibility !== SelectAllVisibility.none;
    const isCheckboxHidden = selectAllVisibility === SelectAllVisibility.hidden;
    const isCheckboxAlwaysVisible = checkboxVisibility === CheckboxVisibility.always;

    const columnReorderProps = this._getColumnReorderProps();
    const frozenColumnCountFromStart =
      columnReorderProps && columnReorderProps.frozenColumnCountFromStart
        ? columnReorderProps.frozenColumnCountFromStart
        : 0;
    const frozenColumnCountFromEnd =
      columnReorderProps && columnReorderProps.frozenColumnCountFromEnd
        ? columnReorderProps.frozenColumnCountFromEnd
        : 0;

    this._classNames = getClassNames(styles, {
      theme: theme!,
      isAllSelected,
      isSelectAllHidden: selectAllVisibility === SelectAllVisibility.hidden,
      isResizingColumn: !!columnResizeDetails && isSizing,
      isSizing,
      isAllCollapsed,
      isCheckboxHidden,
      className,
    });

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

    const isRTL = getRTL(theme);
    return (
      <FocusZone
        role="row"
        aria-label={ariaLabel}
        className={classNames.root}
        componentRef={this._rootComponent}
        elementRef={this._rootElement}
        onMouseMove={this._onRootMouseMove}
        data-automationid="DetailsHeader"
        direction={FocusZoneDirection.horizontal}
      >
        {showCheckbox
          ? [
              <div
                key="__checkbox"
                className={classNames.cellIsCheck}
                aria-labelledby={`${this._id}-checkTooltip`}
                onClick={!isCheckboxHidden ? this._onSelectAllClicked : undefined}
                aria-colindex={1}
                role={'columnheader'}
              >
                {onRenderColumnHeaderTooltip(
                  {
                    hostClassName: classNames.checkTooltip,
                    id: `${this._id}-checkTooltip`,
                    setAriaDescribedBy: false,
                    content: ariaLabelForSelectAllCheckbox,
                    children: (
                      <DetailsRowCheck
                        id={`${this._id}-check`}
                        aria-label={
                          selectionMode === SelectionMode.multiple
                            ? ariaLabelForSelectAllCheckbox
                            : ariaLabelForSelectionColumn
                        }
                        data-is-focusable={!isCheckboxHidden || undefined}
                        isHeader={true}
                        selected={isAllSelected}
                        anySelected={false}
                        canSelect={!isCheckboxHidden}
                        className={classNames.check}
                        onRenderDetailsCheckbox={onRenderDetailsCheckbox}
                        useFastIcons={useFastIcons}
                        isVisible={isCheckboxAlwaysVisible}
                      />
                    ),
                  },
                  this._onRenderColumnHeaderTooltip,
                )}
              </div>,
              !this.props.onRenderColumnHeaderTooltip ? (
                ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (
                  <label
                    key="__checkboxLabel"
                    id={`${this._id}-checkTooltip`}
                    className={classNames.accessibleLabel}
                    aria-hidden={true}
                  >
                    {ariaLabelForSelectAllCheckbox}
                  </label>
                ) : ariaLabelForSelectionColumn && isCheckboxHidden ? (
                  <label
                    key="__checkboxLabel"
                    id={`${this._id}-checkTooltip`}
                    className={classNames.accessibleLabel}
                    aria-hidden={true}
                  >
                    {ariaLabelForSelectionColumn}
                  </label>
                ) : null
              ) : null,
            ]
          : null}
        {groupNestingDepth! > 0 && this.props.collapseAllVisibility === CollapseAllVisibility.visible ? (
          <div
            className={classNames.cellIsGroupExpander}
            onClick={this._onToggleCollapseAll}
            data-is-focusable={true}
            aria-label={ariaLabelForToggleAllGroupsButton}
            aria-expanded={!isAllCollapsed}
            role="columnheader"
          >
            <IconComponent
              className={classNames.collapseButton}
              iconName={isRTL ? 'ChevronLeftMed' : 'ChevronRightMed'}
            />
          </div>
        ) : null}
        <GroupSpacer indentWidth={indentWidth} role="gridcell" count={groupNestingDepth! - 1} />
        {columns.map((column: IColumn, columnIndex: number) => {
          const _isDraggable = columnReorderProps
            ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd
            : false;
          return [
            columnReorderProps &&
              (_isDraggable || columnIndex === columns.length - frozenColumnCountFromEnd) &&
              this._renderDropHint(columnIndex),
            <DetailsColumn
              column={column}
              styles={column.styles}
              key={column.key}
              columnIndex={(showCheckbox ? 2 : 1) + columnIndex}
              parentId={this._id}
              isDraggable={_isDraggable}
              updateDragInfo={this._updateDragInfo}
              dragDropHelper={this._dragDropHelper}
              onColumnClick={onColumnClick}
              onColumnContextMenu={onColumnContextMenu}
              // Do not render tooltips by default, but allow for override via props.
              onRenderColumnHeaderTooltip={this.props.onRenderColumnHeaderTooltip}
              isDropped={this._onDropIndexInfo.targetIndex === columnIndex}
              cellStyleProps={this.props.cellStyleProps}
              useFastIcons={useFastIcons}
            />,
            this._renderColumnDivider(columnIndex),
          ];
        })}
        {columnReorderProps && frozenColumnCountFromEnd === 0 && this._renderDropHint(columns.length)}
        {isSizing && (
          <Layer>
            <div
              className={classNames.sizingOverlay}
              onMouseMove={this._onSizerMouseMove}
              onMouseUp={this._onSizerMouseUp}
            />
          </Layer>
        )}
      </FocusZone>
    );
  }