private renderCell()

in src/draft-components/gridv2/grid.tsx [471:496]
26 lines of code
19 McCabe index (conditional complexity)

  private renderCell(rowIndex: number, cellIndex: number, content: string) {
    const activeCellId = this.activeCell.join('-');
    const currentCellKey = `${cellIndex}-${rowIndex}`;
    const isActiveCell = activeCellId === currentCellKey;
    const columnData = this.getColumnData(cellIndex);
    const isGrid = this.gridType === 'grid';
    return <td
      role={isGrid ? 'gridcell' : 'cell'}
      id={`cell-${rowIndex}-${cellIndex}`}
      class={{'cell': true, 'editing': this.isEditing && isActiveCell, 'hover-icon': this.modalCell }}
      aria-readonly={!this.editable || columnData.actionsColumn ? 'true' : null}
      aria-labelledby={!this.isEditing ? `cell-${rowIndex}-${cellIndex}-content` : null}
      tabIndex={isGrid && this.rowSelection !== RowSelectionPattern.Aria ? isActiveCell && (!this.isEditing || !this.modalCell) ? 0 : -1 : null}
      ref={isActiveCell ? (el) => {
        this.activeCellRef = el;
        if (!this.isEditing && this.rowSelection !== RowSelectionPattern.Aria) this.focusRef = el;
      } : null}
      onFocus={() => { this.onCellFocus(rowIndex, cellIndex)}}
      onClick={this.editable ? () => { this.onCellClick(rowIndex, cellIndex); } : null}
      onDblClick={this.editable ? () => { this.onCellDoubleClick(cellIndex); } : null}
      onMouseDown={() => { this.mouseDown = true; }}
    >
      {this.isEditing && isActiveCell && !columnData.actionsColumn
        ? <input type="text" value={content} class="cell-edit" onKeyDown={this.onInputKeyDown.bind(this)} ref={(el) => this.focusRef = el} />
        : <span class="cell-content" id={`cell-${rowIndex}-${cellIndex}-content`}>{this.renderCellContent(content, cellIndex, rowIndex)}</span>
      }