Function Cell

packages/app-core/src/components/DatabaseTableView.tsx:749–807

({ field, value, editing, onStartEdit, onEndEdit, onCommit }: CellProps)

}

function Cell({ field, value, editing, onStartEdit, onEndEdit, onCommit }: CellProps): JSX.Element {
  if (field.type === 'checkbox') {
    const checked = isCheckboxTrue(value)
    return (
      <button
        type="button"
        onClick={() => onCommit(checked ? 'false' : 'true')}
        className="flex h-full w-full items-center justify-center px-2 py-1.5"
        title={checked ? 'Checked' : 'Unchecked'}
      >
        <span
          className={[
            'flex h-4 w-4 items-center justify-center rounded border',
            checked ? 'border-accent bg-accent text-white' : 'border-paper-400 text-transparent'
          ].join(' ')}
        >
          ✓
        </span>
      </button>
    )
  }

  if (field.type === 'select' || field.type === 'multiSelect') {
    return (
      <SelectCell field={field} value={value} editing={editing} onStartEdit={onStartEdit} onEndEdit={onEndEdit} onCommit={onCommit} />
    )
  }

  if (editing) {
    return (
      <input
        autoFocus
        type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
        defaultValue={value}
        onFocus={(e) => e.currentTarget.select()}
        onBlur={(e) => {
          onCommit(e.currentTarget.value)
          onEndEdit()
        }}
        onKeyDown={(e) => {
          e.stopPropagation()
          if (e.key === 'Enter' && !isImeComposing(e)) e.currentTarget.blur()
          else if (e.key === 'Escape') onEndEdit()
        }}
        className="w-full bg-paper-50 px-2 py-1.5 text-sm text-ink-900 outline-none ring-1 ring-inset ring-accent"
      />
    )
  }

  return (
    <button type="button" onClick={onStartEdit} className="block h-full w-full px-2 py-1.5 text-left">
      {/* min-h reserves one line so an empty cell keeps the same row height as a
          filled one (otherwise a new/blank row collapses shorter). (#185) */}
      <span className="block min-h-5 truncate text-ink-900">
        {field.type === 'date' ? formatDate(value) : value}
      </span>
    </button>
  )