Function SheetDataEditorCell

src/sheet/components/SheetDataEditorCell.tsx:37–216

({
  rowId,
  sheetDefinition,
  columnDefinition,
  value,
  onUpdated,
  allData,
  clearRowsSelection,
  errorsText,
  enumLabelDict,
}: Props)

}

export default function SheetDataEditorCell({
  rowId,
  sheetDefinition,
  columnDefinition,
  value,
  onUpdated,
  allData,
  clearRowsSelection,
  errorsText,
  enumLabelDict,
}: Props) {
  const { t } = useTranslations();
  const { availableActions } = useImporterDefinition();

  const [editMode, setEditMode] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (editMode) {
      clearRowsSelection();
      if (inputRef.current) {
        inputRef.current.focus();
      }
    }
    // We don't want to include clearRowsSelection in the dependencies array, since it's should impact the clearing itself
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [editMode]);

  const { displayValue, valueEmpty } = getCellDisplayValue(
    sheetDefinition,
    columnDefinition,
    value,
    enumLabelDict
  );

  const readOnly =
    isColumnReadOnly(columnDefinition) ||
    !availableActions.includes('editRows');

  const longPressHandlers = useLongPress(
    () => {
      if (!readOnly) setEditMode(true);
    },
    { disabled: readOnly }
  );

  const cellBackgroundColor = errorsText
    ? 'bg-hello-csv-danger-extra-light'
    : readOnly
      ? 'bg-hello-csv-muted'
      : '';

  if (!editMode) {
    return (
      <SheetTooltip
        variant={errorsText ? 'error' : 'info'}
        tooltipText={
          errorsText ? errorsText : readOnly ? t('sheet.readOnly') : ''