export function StatefulDataTable()

in src/data-table/stateful-data-table.tsx [151:331]
165 lines of code
11 McCabe index (conditional complexity)

export function StatefulDataTable(props: StatefulDataTableProps) {
  const [css, theme] = useStyletron();
  const headlineRef = React.useRef(null);
  const [headlineHeight, setHeadlineHeight] = React.useState(64);
  useResizeObserver(headlineRef, (entries) => {
    setHeadlineHeight(entries[0].contentRect.height);
  });

  const filterable = props.filterable === undefined ? true : props.filterable;
  const searchable = props.searchable === undefined ? true : props.searchable;
  const selectable = props.selectable === undefined ? false : props.selectable;

  return (
    <StatefulContainer
      batchActions={props.batchActions}
      columns={props.columns}
      initialFilters={props.initialFilters}
      initialSelectedRowIds={props.initialSelectedRowIds}
      initialSortIndex={props.initialSortIndex}
      initialSortDirection={props.initialSortDirection}
      initialTextQuery={props.initialTextQuery}
      onFilterAdd={props.onFilterAdd}
      onFilterRemove={props.onFilterRemove}
      onIncludedRowsChange={props.onIncludedRowsChange}
      onRowHighlightChange={props.onRowHighlightChange}
      onSelectionChange={props.onSelectionChange}
      onSort={props.onSort}
      onTextQueryChange={props.onTextQueryChange}
      resizableColumnWidths={props.resizableColumnWidths}
      rows={props.rows}
      rowActions={props.rowActions}
      rowHighlightIndex={props.rowHighlightIndex}
    >
      {({
        filters,
        onFilterAdd,
        onFilterRemove,
        onIncludedRowsChange,
        onRowHighlightChange,
        onSelectMany,
        onSelectNone,
        onSelectOne,
        onSort,
        onTextQueryChange,
        resizableColumnWidths,
        rowHighlightIndex,
        selectedRowIds,
        sortIndex,
        sortDirection,
        textQuery,
      }) => (
        <React.Fragment>
          <div className={css({ height: `${headlineHeight}px` })}>
            <div ref={headlineRef}>
              {(selectable || !selectedRowIds.size) && (
                <div
                  className={css({
                    alignItems: 'end',
                    display: 'flex',
                    flexWrap: 'wrap',
                    paddingTop: theme.sizing.scale500,
                  })}
                >
                  {searchable && (
                    <QueryInput
                      onChange={onTextQueryChange}
                      textQuery={textQuery}
                      textQueryPlaceholder={props.textQueryPlaceholder}
                    />
                  )}

                  {filterable && (
                    <React.Fragment>
                      <FilterMenu
                        columns={props.columns}
                        filters={filters}
                        rows={props.rows}
                        onSetFilter={onFilterAdd}
                      />

                      {Array.from(filters).map(([title, filter]) => (
                        <FilterTag
                          key={title}
                          columns={props.columns}
                          filter={filter}
                          onFilterAdd={onFilterAdd}
                          onFilterRemove={onFilterRemove}
                          rows={props.rows}
                          title={title}
                        />
                      ))}
                    </React.Fragment>
                  )}
                </div>
              )}

              {Boolean(selectedRowIds.size) && props.batchActions && (
                <div
                  className={css({
                    display: 'flex',
                    alignItems: 'center',
                    paddingTop: theme.sizing.scale300,
                    paddingBottom: theme.sizing.scale300,
                  })}
                >
                  {props.batchActions.map((action) => {
                    // @ts-ignore
                    function onClick(event) {
                      action.onClick({
                        clearSelection: onSelectNone,
                        event,
                        selection: props.rows.filter((r) => selectedRowIds.has(r.id)),
                      });
                    }

                    if (action.renderIcon) {
                      const Icon = action.renderIcon;
                      return (
                        <Button
                          key={action.label}
                          overrides={{
                            BaseButton: { props: { 'aria-label': action.label } },
                          }}
                          onClick={onClick}
                          kind={BUTTON_KINDS.tertiary}
                          shape={BUTTON_SHAPES.round}
                        >
                          <Icon size={16} />
                        </Button>
                      );
                    }

                    return (
                      <Button
                        key={action.label}
                        onClick={onClick}
                        kind={BUTTON_KINDS.secondary}
                        size={BUTTON_SIZES.compact}
                      >
                        {action.label}
                      </Button>
                    );
                  })}
                </div>
              )}
            </div>
          </div>

          <div style={{ width: '100%', height: `calc(100% - ${headlineHeight}px)` }}>
            <DataTable
              selectable={selectable}
              batchActions={props.batchActions}
              columns={props.columns}
              emptyMessage={props.emptyMessage}
              filters={filters}
              loading={props.loading}
              loadingMessage={props.loadingMessage}
              onIncludedRowsChange={onIncludedRowsChange}
              onRowHighlightChange={onRowHighlightChange}
              onSelectionChange={props.onSelectionChange}
              onSelectMany={onSelectMany}
              onSelectNone={onSelectNone}
              onSelectOne={onSelectOne}
              onSort={onSort}
              resizableColumnWidths={resizableColumnWidths}
              rowHighlightIndex={rowHighlightIndex}
              rows={props.rows}
              rowActions={props.rowActions}
              rowHeight={props.rowHeight}
              selectedRowIds={selectedRowIds}
              sortDirection={sortDirection}
              sortIndex={sortIndex}
              textQuery={textQuery}
              controlRef={props.controlRef}
            />
          </div>
        </React.Fragment>
      )}
    </StatefulContainer>
  );
}