render()

in packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx [539:674]

• 120 lines of code
• 13 McCabe index (conditional complexity)

  render() {
    const {
      width,
      popoverContext,
      interactiveCellId,
      columnType,
      className,
      column,
      style,
      rowHeightUtils,
      rowHeightsOptions,
      rowManager,
      pagination,
      ...rest
    } = this.props;
    const { rowIndex, visibleRowIndex, colIndex } = rest;

    const isExpandable = this.isExpandable();
    const popoverIsOpen = this.isPopoverOpen();
    const showCellActions =
      isExpandable &&
      (popoverIsOpen || this.state.isFocused || this.state.isHovered);

    const cellClasses = classNames(
      'euiDataGridRowCell',
      {
        [`euiDataGridRowCell--${columnType}`]: columnType,
        'euiDataGridRowCell--open': popoverIsOpen,
      },
      className
    );

    // classNames set by EuiDataGridCellWrapper
    const isControlColumn = cellClasses.includes(
      'euiDataGridRowCell--controlColumn'
    );
    const isLastColumn = cellClasses.includes('euiDataGridRowCell--lastColumn');

    const ariaRowIndex = pagination
      ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex
      : visibleRowIndex + 1;

    const {
      isExpandable: _, // Not a valid DOM property, so needs to be destructured out
      style: cellPropsStyle,
      className: cellPropsClassName,
      'data-test-subj': cellPropsDataTestSubj,
      ...setCellProps
    } = this.state.cellProps;

    const cellProps: EuiDataGridSetCellProps = {
      ...setCellProps,
      'data-test-subj': classNames('dataGridRowCell', cellPropsDataTestSubj),
      className: classNames(cellClasses, cellPropsClassName),
    };

    cellProps.style = {
      ...style, // set by react-window or the custom renderer
      top: style?.top ? 0 : undefined, // The cell's row will handle top positioning
      width, // column width, can be undefined
      lineHeight: rowHeightsOptions?.lineHeight ?? undefined, // lineHeight configuration
      ...cellPropsStyle, // apply anything from setCellProps({ style })
    };

    const row =
      rowManager && !IS_JEST_ENVIRONMENT
        ? rowManager.getRow({
            rowIndex,
            visibleRowIndex,
            top: style!.top as string, // comes in as a `{float}px` string from react-window
            height: style!.height as number, // comes in as an integer from react-window
          })
        : undefined;

    return (
      <RenderCellInRow row={row}>
        <GridCellDiv
          {...cellProps}
          ref={this.cellRef}
          columnId={this.props.columnId}
          columnIndex={this.props.colIndex}
          rowIndex={rowIndex}
          visibleRowIndex={this.props.visibleRowIndex}
          aria-rowindex={ariaRowIndex}
          tabIndex={this.state.isFocused ? 0 : -1}
          onKeyDown={this.handleCellKeyDown}
          onMouseEnter={this.onMouseEnter}
          onMouseLeave={this.onMouseLeave}
        >
          <HandleInteractiveChildren
            cellEl={this.cellRef.current}
            updateCellFocusContext={this.updateCellFocusContext}
            renderFocusTrap={!isExpandable}
          >
            <EuiDataGridCellContent
              {...rest}
              setCellProps={this.setCellProps}
              column={column}
              columnType={columnType}
              isExpandable={isExpandable}
              isExpanded={popoverIsOpen}
              setCellContentsRef={this.setCellContentsRef}
              rowHeightsOptions={rowHeightsOptions}
              rowHeightUtils={rowHeightUtils}
              isControlColumn={isControlColumn}
              rowIndex={rowIndex}
              colIndex={colIndex}
            />
          </HandleInteractiveChildren>

          {isLastColumn
            ? tabularCopyMarkers.hiddenNewline
            : tabularCopyMarkers.hiddenTab}

          {this.state.isFocused && (
            <CellScreenReaderDescription
              columnName={column?.displayAsText || this.props.columnId}
              columnIndex={colIndex + 1}
              rowIndex={ariaRowIndex}
              canExpandCell={showCellActions}
            />
          )}

          {showCellActions && (
            <EuiDataGridCellActions
              rowIndex={rowIndex}
              colIndex={colIndex}
              column={column}
              onExpandClick={this.handleCellExpansionClick}
              popoverAnchorRef={this.popoverAnchorRef}
            />
          )}
        </GridCellDiv>
      </RenderCellInRow>
    );
  }