private renderCell()

in src/draft-components/grid/grid.tsx [457:479]


  private renderCell(rowIndex: number, cellIndex: number, content: string) {
    const activeCellId = this.activeCell.join('-');
    const currentCellKey = `${cellIndex}-${rowIndex}`;
    const cellColumn = this.rowSelection === RowSelectionPattern.Checkbox ? this.columns[cellIndex - 1] : this.columns[cellIndex];
    const isActiveCell = activeCellId === currentCellKey && !cellColumn.actionsColumn;
    const isGrid = this.gridType === 'grid';
    return <td
      role={isGrid ? 'gridcell' : 'cell'}
      id={`cell-${rowIndex}-${cellIndex}`}
      class={{'cell': true, 'editing': this.isEditing && isActiveCell }}
      aria-label={this.useApplicationRole ? `${cellColumn.name} ${content}` : null}
      aria-readonly={!this.editable || cellColumn.actionsColumn ? 'true' : null}
      tabIndex={isGrid && this.rowSelection !== RowSelectionPattern.Aria ? isActiveCell ? 0 : -1 : null}
      ref={isActiveCell && !this.isEditing && this.rowSelection !== RowSelectionPattern.Aria ? (el) => { this.focusRef = el; } : null}
      onFocus={() => { this.onCellFocus(rowIndex, cellIndex)}}
      onClick={this.editable ? () => { this.onCellClick(rowIndex, cellIndex); } : null}
      onDblClick={this.editable ? this.onCellDoubleClick.bind(this) : null}
      onMouseDown={() => { this.mouseDown = true; }}
    >
      {this.isEditing && isActiveCell
        ? <input value={content} class="cell-edit" onKeyDown={this.onInputKeyDown.bind(this)} onBlur={this.onInputBlur.bind(this)} ref={(el) => this.focusRef = el} />
        : <span class="cell-content">{this.renderCellContent(content, cellIndex, rowIndex)}</span>
      }