app/components/admin/media-grid.tsx

Functions

Imports

It imports app/components/admin/media-bulk-bar.tsx, app/components/admin/media-keyboard.tsx, app/components/admin/media-list-header.tsx, app/components/admin/media-tile.tsx, app/lib/media/view.mjs. Imported by app/routes/admin.media._index.tsx.

Source

1import { Form } from "react-router";
2
3import { BulkBar } from "~/components/admin/media-bulk-bar";
4import { useGridKeyboard } from "~/components/admin/media-keyboard";
5import { MediaListHeader } from "~/components/admin/media-list-header";
6import { MediaRow, MediaTile } from "~/components/admin/media-tile";
7import { groupRows } from "~/lib/media/view.mjs";
8import type { hrefWith, sortHref } from "~/lib/media/view.mjs";
9
10import type { Route } from "../../routes/+types/admin.media._index";
11
12type Listing = Extract<Route.ComponentProps["loaderData"], { detail: unknown }>;
13
14export function MediaGrid({
15  objects,
16  chosen,
17  selectRange,
18  setSelected,
19  setConfirmingTrash,
20  linkTo,
21  view,
22  pending,
23  scanComplete,
24  tagCounts,
25  tabStop,
26  setActive,
27}: {
28  objects: Listing["objects"];
29  chosen: string[];
30  selectRange: (key: string, shift: boolean) => void;
31  setSelected: (keys: string[]) => void;
32  setConfirmingTrash: (value: boolean) => void;
33  linkTo: (over?: Parameters<typeof hrefWith>[1]) => string;
34  view: Parameters<typeof sortHref>[0];
35  pending: boolean;
36  scanComplete: boolean;
37  tagCounts: Listing["tagCounts"];
38  /** The one tile whose controls take Tab in the grid view. */
39  tabStop: string;
40  setActive: (key: string) => void;
41}) {
42  const keys = useGridKeyboard({ setActive, setSelected });
43  const list = view.view === "list";
44  const buckets = groupRows(objects, view.group);
45
46  return (
47    // Not role="grid": the column count follows the container width, so positions mean nothing to a screen reader.
48    <Form method="post">
49      {/* The form wraps the grid so the checkboxes submit with it; nested in the toolbar it would be
50          a form inside a form, which the browser drops. */}
51      {/* In the document before anything is selected, so the first count is announced too; the bar
52          below mounts with its number. */}
53      <p className="cap-sr-only" role="status">
54        {chosen.length > 0 ? `${chosen.length} selected` : ""}
55      </p>
56      {chosen.length > 0 ? (
57        <BulkBar
58          objects={objects}
59          chosen={chosen}
60          setSelected={setSelected}
61          setConfirmingTrash={setConfirmingTrash}
62          tagCounts={tagCounts}
63        />
64      ) : null}
65
66      {list ? (
67        <div className="cap-table-wrap" role="region" tabIndex={0} aria-label="Files">
68          <table className="cap-table" data-view="list" aria-busy={pending || undefined}>
69            <thead>
70              <MediaListHeader view={view} />
71            </thead>
72            {/* Grouped page-locally: a group never spans a page, so the heading counts this page. */}
73            {buckets.map((bucket) => (
74              <tbody key={bucket.label || "ungrouped"}>
75                {bucket.label ? (
76                  <tr>
77                    <th scope="colgroup" colSpan={7}>
78                      {bucket.label}{" "}
79                      <span className="cap-muted">{bucket.rows.length} on this page</span>
80                      {bucket.note ? <span className="cap-muted"> {bucket.note}</span> : null}
81                    </th>
82                  </tr>
83                ) : null}
84                {bucket.rows.map((object) => (
85                  <MediaRow
86                    key={object.key}
87                    object={object}
88                    chosen={chosen}
89                    selectRange={selectRange}
90                    linkTo={linkTo}
91                    view={view}
92                    scanComplete={scanComplete}
93                    tabStop
94                  />
95                ))}
96              </tbody>
97            ))}
98          </table>
99        </div>
100      ) : (
101        <div className="cap-media" data-view="grid" data-size={view.size}>
102          {buckets.map((bucket) => (
103            <section key={bucket.label || "ungrouped"} className="cap-media-group">
104              {bucket.label ? (
105                <h2 className="cap-media-group-title">
106                  {bucket.label}{" "}
107                  <span className="cap-media-group-count">{bucket.rows.length} on this page</span>
108                  {bucket.note ? <span className="cap-media-group-count"> {bucket.note}</span> : null}
109                </h2>
110              ) : null}
111              <ul
112                className="cap-media-grid"
113                role="list"
114                aria-label={bucket.label ? `Files, ${bucket.label}` : "Files"}
115                aria-busy={pending || undefined}
116                {...keys}
117              >
118                {bucket.rows.map((object) => (
119                  <MediaTile
120                    key={object.key}
121                    object={object}
122                    chosen={chosen}
123                    selectRange={selectRange}
124                    linkTo={linkTo}
125                    view={view}
126                    scanComplete={scanComplete}
127                    tabStop={object.key === tabStop}
128                  />
129                ))}
130              </ul>
131            </section>
132          ))}
133        </div>
134      )}
135    </Form>
136  );
137}