1
import type { KeyboardEventHandler, MouseEventHandler } from "react";
2
 
3
type CommitView = {
4
  oid: string;
5
  shortOid: string;
6
  firstLine: string;
7
  authorName: string;
8
  when: string;
9
};
10
 
11
type CommitRowProps = {
12
  owner: string;
13
  repo: string;
14
  commit: CommitView;
15
  compact?: boolean;
16
  isMerge?: boolean;
17
  rowClass?: string;
18
  mergeOf?: string;
19
  toggleOid?: string;
20
  mergeExpanded?: boolean;
21
  onToggle?: MouseEventHandler<HTMLTableRowElement>;
22
};
23
 
24
export function CommitRow({
25
  owner,
26
  repo,
27
  commit,
28
  compact,
29
  isMerge,
30
  rowClass,
31
  mergeOf,
32
  toggleOid,
33
  mergeExpanded,
34
  onToggle,
35
}: CommitRowProps) {
36
  const classes = [
37
    compact
38
      ? "text-sm subrow bg-accent-50/20 dark:bg-accent-900/10 border-l-2 border-b border-b-zinc-200 border-l-accent-400 dark:border-b-zinc-800 dark:border-l-accent-700"
39
      : "",
40
    rowClass || "",
41
  ]
42
    .filter(Boolean)
43
    .join(" ");
44
 
45
  const onKeyDown: KeyboardEventHandler<HTMLTableRowElement> | undefined = onToggle
46
    ? (event) => {
47
        if (event.key !== "Enter" && event.key !== " ") {
48
          return;
49
        }
50
        event.preventDefault();
51
        onToggle(event as unknown as Parameters<NonNullable<typeof onToggle>>[0]);
52
      }
53
    : undefined;
54
 
55
  return (
56
    <tr
57
      className={classes || undefined}
58
      data-merge-of={mergeOf || undefined}
59
      data-merge-oid={toggleOid || undefined}
60
      onClick={onToggle}
61
      onKeyDown={onKeyDown}
62
      role={onToggle ? "button" : undefined}
63
      tabIndex={onToggle ? 0 : undefined}
64
      aria-expanded={onToggle ? mergeExpanded : undefined}
65
    >
66
      <td>
67
        <a href={`/${owner}/${repo}/commit/${commit.oid}`}>{commit.shortOid}</a>
68
      </td>
69
      <td className={compact ? "pl-6" : undefined}>
70
        {isMerge ? (
71
          <span
72
            className={`merge-badge mr-2 inline-block rounded px-2 py-0.5 text-xs ${
73
              mergeExpanded
74
                ? "bg-amber-200 text-amber-900 dark:border dark:border-amber-500/40 dark:bg-amber-900/40 dark:text-amber-200"
75
                : "bg-sky-100 text-sky-900 dark:border dark:border-sky-500/40 dark:bg-sky-500/20 dark:text-sky-300"
76
            }`}
77
          >
78
            Merge
79
          </span>
80
        ) : null}
81
        {commit.firstLine}
82
      </td>
83
      <td className="text-zinc-500 dark:text-zinc-400">{commit.authorName}</td>
84
      <td className="text-zinc-500 dark:text-zinc-400">{commit.when}</td>
85
    </tr>
86
  );
87
}