114 lines · 3.9 KB
import { useState } from "react";
import { removeProjectItem, updateProjectItem } from "~/fns/projects";
import { useAction } from "~/hooks/use-action";
import { ItemTitle } from "./ItemTitle";
import type { ProjectData, ProjectField, ProjectItem } from "./ItemTitle";
import { InlineSelect, inputClass } from "~/ui/Field";
import { EmptyState } from "~/ui/EmptyState";
import { cn } from "~/utils/cn";

type Ref = { owner: string; number: number };

function Cell({
  projectRef,
  item,
  field,
  canWrite,
}: {
  projectRef: Ref;
  item: ProjectItem;
  field: ProjectField;
  canWrite: boolean;
}) {
  const current = item.values[field.id] ?? "";
  const [draft, setDraft] = useState(current);
  const update = useAction(updateProjectItem);
  const save = (value: string) => {
    if (value === current) return;
    void update.run({ data: { ...projectRef, itemId: item.id, fieldId: field.id, value: value || null } });
  };
  if (!canWrite) return <span className="text-kumo-default">{current}</span>;
  if (field.kind === "single_select")
    return (
      <InlineSelect
        label={field.name}
        value={current}
        onValueChange={save}
        className="w-full bg-transparent shadow-none ring-transparent hover:ring-kumo-line"
        options={[{ value: "", label: "—" }, ...field.options.map((option) => ({ value: option, label: option }))]}
      />
    );