components/catalog/catalog.react.tsx

Functions

Imports

It imports components/catalog/catalog-core.ts, components/catalog/catalog.ts, components/empty/empty.react.tsx, components/pagination/pagination.react.tsx. Imported by components/catalog/examples.tsx.

Source

1import { useEffect, useRef, type ReactNode } from "react";
2import { Empty } from "../empty/empty.react.tsx";
3import { Pagination } from "../pagination/pagination.react.tsx";
4import { attachCatalog } from "./catalog.ts";
5import { countText, type CatalogDefinition, type CatalogField, type CatalogResult } from "./catalog-core.ts";
6
7export interface CatalogProps<T> {
8  definition: CatalogDefinition<T>;
9  // What `queryCatalog` returned for this request's address.
10  result: CatalogResult<T>;
11  // The first column's cell: the item's name, usually a link to it.
12  title: (item: T) => ReactNode;
13  // A field's cell, when its plain words (the values joined) are not enough.
14  cells?: Partial<Record<string, (item: T) => ReactNode>>;
15  // The page's heading id, which names the results region.
16  labelledBy: string;
17  // What to say when the collection itself is empty, and the sentence under "No protocols match".
18  emptyText?: { nothingYet?: ReactNode; noMatch?: ReactNode };
19  // Beside the count: downloads, a view switch.
20  actions?: ReactNode;
21}
22
23const sortGlyph = (
24  <svg width="10" height="12" viewBox="0 0 10 12" aria-hidden="true">
25    <path className="cap-table-sort-up" d="M5 1 9 5H1z" />
26    <path className="cap-table-sort-down" d="M5 11 1 7h8z" />
27  </svg>
28);
29
30const plain = <T,>(field: CatalogField<T>, item: T): string => {
31  const value = field.value(item);
32  const list = (Array.isArray(value) ? value : [value]).filter((v) => v !== null && v !== undefined && v !== "");
33  return list.map(String).join(", ");
34};
35
36// The whole catalog, from the HTML contract in catalog.md. It is a form that submits with GET to the page's own
37// address, so every control works with no script; the enhancement (catalog.ts) only swaps the regions in place.
38// Everything here is drawn from `result`, which a server computes, so the page is the same either way.
39export function Catalog<T>({ definition: def, result, title, cells, labelledBy, emptyText, actions }: CatalogProps<T>) {
40  const ref = useRef<HTMLFormElement>(null);
41  useEffect(() => (ref.current ? attachCatalog(ref.current) : undefined), []);
42  const id = def.id;
43  // Under headings a column that only repeats the heading (a Year column under year headings) is left out.
44  const columns = def.fields.filter((f) => f.column && !(result.groups && f.column.hideWhenGrouped));
45  const [first, ...rest] = columns;
46  const active = result.state.q !== "" || result.chips.length > 0;
47  const facetCount = result.facets.reduce((n, f) => n + f.selected, 0);
48  const noun = def.noun[1];
49  const nextSort = (key: string) => (result.state.sort === key || (!result.state.sort && def.defaultSort === key) ? `-${key}` : key);
50  const currentSort = result.sorts.find((s) => s.selected)?.value ?? "";
51  const ariaSort = (key: string) => (currentSort === key ? "ascending" : currentSort === `-${key}` ? "descending" : undefined);
52
53  return (
54    <form ref={ref} className="cap-catalog" data-cap="catalog" data-catalog={id} data-catalog-href={result.href()} method="get" action={def.basePath} aria-labelledby={labelledBy}>
55      <div className="cap-catalog-bar">
56        <div className="cap-field cap-catalog-search">
57          <label className="cap-field-label" htmlFor={`${id}-q`}>
58            Search {noun}
59          </label>
60          <input className="cap-input" id={`${id}-q`} type="search" name="q" defaultValue={result.state.q} autoComplete="off" enterKeyHint="search" />
61        </div>
62        <div className="cap-field cap-catalog-sort">
63          <label className="cap-field-label" htmlFor={`${id}-sort`}>
64            Sort
65          </label>
66          <select className="cap-input" id={`${id}-sort`} name="sort" defaultValue={currentSort}>
67            {result.sorts.map((s) => (
68              <option key={s.value} value={s.value}>
69                {s.label}
70              </option>
71            ))}
72          </select>
73        </div>
74        <button type="submit" className="cap-btn cap-catalog-apply" data-variant="primary">
75          Apply
76        </button>
77        <a className="cap-btn cap-catalog-tray-open" href={`#${id}-filters`} data-catalog-tray="open">
78          Filters{facetCount > 0 ? ` (${facetCount})` : ""}
79        </a>
80      </div>
81
82      <div className="cap-catalog-body">
83        <div className="cap-catalog-filters" id={`${id}-filters`} role="group" aria-label="Filters" data-catalog-region="filters">
84          <div className="cap-catalog-tray-head">
85            <p className="cap-catalog-tray-title">Filters</p>
86            <a className="cap-btn" href={`#${id}-results`} data-catalog-tray="close">
87              Show {result.count} {result.count === 1 ? def.noun[0] : noun}
88            </a>
89          </div>
90          {result.facets.map((facet) => {
91            // A facet with nothing to choose (every value filtered away, or none in the collection) is left out.
92            if (facet.options.length === 0) return null;
93            const shown = facet.options.filter((o, i) => i < facet.limit || o.selected);
94            const hidden = facet.options.length - shown.length;
95            return (
96              <fieldset className="cap-field cap-catalog-facet" key={facet.key} data-general={facet.general ? "" : undefined}>
97                <legend className="cap-field-label">{facet.label}</legend>
98                <div className="cap-field-options">
99                  {facet.kind === "one" ? (
100                    <label className="cap-check">
101                      <input type="radio" name={facet.key} value="" defaultChecked={facet.selected === 0} /> Any
102                    </label>
103                  ) : null}
104                  {shown.map((o) => (
105                    <label className="cap-check" key={o.value}>
106                      <input type={facet.kind === "one" ? "radio" : "checkbox"} name={facet.key} value={o.value} defaultChecked={o.selected} />
107                      <span>{o.label}</span> <span className="cap-catalog-n">{o.count}</span>
108                    </label>
109                  ))}
110                  {hidden > 0 ? (
111                    <details className="cap-catalog-more">
112                      <summary>Show {hidden} more</summary>
113                      <div className="cap-field-options">
114                        {facet.options
115                          .filter((o) => !shown.includes(o))
116                          .map((o) => (
117                            <label className="cap-check" key={o.value}>
118                              <input type={facet.kind === "one" ? "radio" : "checkbox"} name={facet.key} value={o.value} defaultChecked={o.selected} />
119                              <span>{o.label}</span> <span className="cap-catalog-n">{o.count}</span>
120                            </label>
121                          ))}
122                      </div>
123                    </details>
124                  ) : null}
125                </div>
126              </fieldset>
127            );
128          })}
129        </div>
130
131        <div className="cap-catalog-main">
132          <div className="cap-catalog-status">
133            <p className="cap-catalog-count" role="status" aria-live="polite" data-catalog-region="count">
134              {countText(def, result)}
135            </p>
136            {actions ? <div className="cap-catalog-actions">{actions}</div> : null}
137          </div>
138
139          <div data-catalog-region="chips">
140            {result.chips.length > 0 ? (
141              <ul className="cap-catalog-chips" aria-label="Active filters">
142                {result.chips.map((chip) => (
143                  <li key={chip.id}>
144                    <a className="cap-catalog-chip" href={chip.href}>
145                      {chip.label}
146                      <span className="cap-sr-only"> (remove this filter)</span>
147                      <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
148                        <path d="M2 2l6 6M8 2L2 8" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" />
149                      </svg>
150                    </a>
151                  </li>
152                ))}
153                {result.clearHref ? (
154                  <li>
155                    <a className="cap-catalog-clear" href={result.clearHref}>
156                      Clear all
157                    </a>
158                  </li>
159                ) : null}
160              </ul>
161            ) : null}
162          </div>
163
164          <div data-catalog-region="results" aria-busy="false">
165            {result.rows.length === 0 ? (
166              active ? (
167                <Empty kind="no-match" title={`No ${noun} match`} action={result.clearHref ? <a className="cap-btn" href={result.clearHref}>Clear filters</a> : undefined}>
168                  {emptyText?.noMatch ?? `${result.total} ${result.total === 1 ? def.noun[0] : noun} are hidden by these filters.`}
169                </Empty>
170              ) : (
171                <Empty kind="nothing-yet" title={`No ${noun} yet`}>
172                  {emptyText?.nothingYet}
173                </Empty>
174              )
175            ) : (
176              <div className="cap-table-wrap" data-cap="table" data-reflow="" role="region" aria-labelledby={labelledBy} tabIndex={0}>
177                <table className="cap-table">
178                  <thead>
179                    <tr>
180                      {[first, ...rest].filter(Boolean).map((field, i) => {
181                        const f = field as CatalogField<T>;
182                        const header = f.column?.header ?? f.label;
183                        return (
184                          <th key={f.key} scope="col" aria-sort={ariaSort(f.key)} data-num={f.column?.align === "end" ? "" : undefined} data-drop={i > 0 ? f.column?.drop : undefined}>
185                            {f.sort ? (
186                              <a className="cap-table-sort" href={result.href({ sort: nextSort(f.key), page: 1 })}>
187                                {header}
188                                {sortGlyph}
189                              </a>
190                            ) : (
191                              header
192                            )}
193                            {f.column?.note ? <span className="cap-table-note">{f.column.note}</span> : null}
194                          </th>
195                        );
196                      })}
197                    </tr>
198                  </thead>
199                  {(result.groups ?? [{ value: "", label: "", rows: result.rows }]).map((group) => (
200                    <tbody key={group.value || "all"}>
201                      {result.groups ? (
202                        <tr className="cap-catalog-group">
203                          <th scope="rowgroup" colSpan={columns.length} id={`${id}-group-${group.value}`}>
204                            {group.label}
205                          </th>
206                        </tr>
207                      ) : null}
208                      {group.rows.map((item) => (
209                        <tr key={def.itemKey(item)}>
210                          {first ? <th scope="row">{title(item)}</th> : null}
211                          {rest.map((f) => (
212                            <td key={f.key} data-label={f.column?.header ?? f.label} data-num={f.column?.align === "end" ? "" : undefined} data-drop={f.column?.drop}>
213                              {cells?.[f.key]?.(item) ?? plain(f, item)}
214                            </td>
215                          ))}
216                        </tr>
217                      ))}
218                    </tbody>
219                  ))}
220                </table>
221              </div>
222            )}
223          </div>
224
225          <div data-catalog-region="pages">
226            <Pagination page={result.page} pageCount={result.pageCount} hrefFor={(n) => result.href({ page: n })} total={result.count} perPage={def.pageSize} noun={noun} label={`${noun} pages`} />
227          </div>
228        </div>
229      </div>
230    </form>
231  );
232}