app/components/history/revision-picker.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/history/history-panel.tsx, app/routes/book.history.tsx, app/routes/history.tsx.

Source

1// The revisions of one item, newest first: each opens its source, and any two can be picked and
2// compared. A plain GET form, so it works as delivered: the picks travel as `v` in the address and
3// the history page orders them. Read-only: nothing here changes the site.
4
5import { Link } from "react-router";
6import { Button } from "capsomer/react/button";
7import { Pill } from "capsomer/react/status";
8import { Time } from "capsomer/react/time";
9
10export type RevisionRow = { version: string; at: string; author: string; message: string };
11
12const utc = (iso: string) => `${iso.slice(0, 16).replace("T", " ")} UTC`;
13
14export function RevisionPicker({ revisions, historyPath, picked = [], label }: { revisions: RevisionRow[]; historyPath: string; picked?: string[]; label: string }) {
15  const captionId = `${label.replace(/\W+/g, "-").toLowerCase()}-caption`;
16  return (
17    <form method="get" action={historyPath} className="app-stack" data-tight aria-label={label}>
18      <div className="cap-table-wrap" role="region" aria-labelledby={captionId} tabIndex={0}>
19        <table className="cap-table">
20          <caption id={captionId} className="cap-sr-only">
21            {label}, newest first
22          </caption>
23          <thead>
24            <tr>
25              <th scope="col">Compare</th>
26              <th scope="col">Revision</th>
27              <th scope="col">By</th>
28              <th scope="col">Saved</th>
29            </tr>
30          </thead>
31          <tbody>
32            {revisions.map((r, i) => (
33              <tr key={r.version} data-state={picked.includes(r.version) ? "selected" : undefined}>
34                <td>
35                  <label className="cap-check">
36                    <input type="checkbox" name="v" value={r.version} defaultChecked={picked.includes(r.version)} />
37                    <span className="cap-sr-only">
38                      Compare the revision from {utc(r.at)} by {r.author}
39                    </span>
40                  </label>
41                </td>
42                <th scope="row">
43                  <Link className="cap-table-open" to={`${historyPath}?version=${encodeURIComponent(r.version)}`}>
44                    {r.message || "No message"}
45                    <span className="cap-sr-only">, open its source</span>
46                  </Link>
47                  {i === 0 ? <Pill tone="ok">Current</Pill> : null}
48                </th>
49                <td>{r.author}</td>
50                <td>
51                  <Time at={r.at} />
52                  <span className="cap-table-aside">{utc(r.at)}</span>
53                </td>
54              </tr>
55            ))}
56          </tbody>
57        </table>
58      </div>
59      <div className="app-actions">
60        <Button type="submit" variant="primary">
61          Compare the two picked
62        </Button>
63        <span className="cap-muted">Pick two revisions. The older is shown first.</span>
64      </div>
65    </form>
66  );
67}