function Headers()

in src/data-table/data-table.tsx [399:496]
95 lines of code
6 McCabe index (conditional complexity)

function Headers() {
  const [css, theme] = useStyletron();
  const locale = React.useContext(LocaleContext);
  const ctx = React.useContext(HeaderContext);
  const [resizeIndex, setResizeIndex] = React.useState(-1);

  return (
    <div
      className={css({
        position: 'sticky',
        top: 0,
        left: 0,
        width: `${sum(ctx.widths)}px`,
        height: `${HEADER_ROW_HEIGHT}px`,
        display: 'flex',
        // this feels bad.. the absolutely positioned children elements
        // stack on top of this element with the layer component.
        zIndex: 2,
      })}
    >
      {ctx.columns.map((column, columnIndex) => {
        const activeFilter = ctx.filters ? ctx.filters.get(column.title) : null;

        return (
          <React.Fragment key={columnIndex}>
            <Tooltip
              key={columnIndex}
              placement={PLACEMENT.bottomLeft}
              isOpen={ctx.columnHighlightIndex === columnIndex && Boolean(activeFilter)}
              content={() => {
                return (
                  <div>
                    <p
                      className={css({
                        ...theme.typography.font100,
                        color: theme.colors.contentInversePrimary,
                      })}
                    >
                      {locale.datatable.filterAppliedTo} {column.title}
                    </p>
                    {activeFilter && (
                      <p
                        className={css({
                          ...theme.typography.font150,
                          color: theme.colors.contentInversePrimary,
                        })}
                      >
                        {activeFilter.description}
                      </p>
                    )}
                  </div>
                );
              }}
            >
              <div
                className={css({
                  ...theme.borders.border200,
                  backgroundColor: theme.colors.backgroundPrimary,
                  borderTop: 'none',
                  borderLeft: 'none',
                  // @ts-ignore
                  borderRight: columnIndex === ctx.columns.length - 1 ? 'none' : null,
                  boxSizing: 'border-box',
                  display: 'flex',
                })}
                style={{ width: ctx.widths[columnIndex] }}
              >
                <Header
                  columnTitle={column.title}
                  hoverIndex={ctx.columnHighlightIndex}
                  index={columnIndex}
                  isSortable={column.sortable}
                  isSelectable={ctx.isSelectable}
                  isSelectedAll={ctx.isSelectedAll}
                  isSelectedIndeterminate={ctx.isSelectedIndeterminate}
                  onMouseEnter={ctx.onMouseEnter}
                  onMouseLeave={ctx.onMouseLeave}
                  onResize={ctx.onResize}
                  onResizeIndexChange={setResizeIndex}
                  onSelectMany={ctx.onSelectMany}
                  onSelectNone={ctx.onSelectNone}
                  onSort={() => ctx.onSort(columnIndex)}
                  resizableColumnWidths={ctx.resizableColumnWidths}
                  resizeIndex={resizeIndex}
                  resizeMinWidth={ctx.measuredWidths[columnIndex]}
                  resizeMaxWidth={column.maxWidth || Infinity}
                  sortIndex={ctx.sortIndex}
                  sortDirection={ctx.sortDirection}
                  tableHeight={ctx.tableHeight}
                />
              </div>
            </Tooltip>
          </React.Fragment>
        );
      })}
    </div>
  );
}