RegistrySearchForm

tcmts.registry.pages.RegistrySearchForm · #szm2nges · term · runs in the browser

uses useState

The search page's own search (React Aria's SearchField) and what it searches by (a ToggleButtonGroup, as the forge's diff layout is): names, words in docs, or a type. Changing either searches again.

import { navigate } from "#codebase/tcmts/react";
import { searchHref } from "#codebase/tcmts/registry/pages";
import type { SearchAsked } from "#codebase/tcmts/registry/pages";
import { useState } from "react";
import { Button, Input, SearchField, ToggleButton, ToggleButtonGroup } from "react-aria-components";

export function RegistrySearchForm({
  q,
  asked,
  mode,
}: {
  q: string;
  asked: SearchAsked;
  mode: "name" | "docs" | "type";
}) {
  const [text, setText] = useState(q);
  // (another search: what it searched for)
  const [was, setWas] = useState(q);
  if (was !== q) {
    setWas(q);
    setText(q);
  }
  return (
    <>
      <ToggleButtonGroup
        aria-label="Search by"
        className="seg"
        selectionMode="single"
        disallowEmptySelection
        selectedKeys={[mode]}
        onSelectionChange={(keys) => {
          const by = [...keys][0];
          if (by !== undefined && by !== mode)
            navigate(searchHref(text.trim(), { ...asked, by: String(by) }));
        }}
      >
        <ToggleButton id="name" className="btn">
          Name
        </ToggleButton>
        <ToggleButton id="docs" className="btn">
          Docs
        </ToggleButton>
        <ToggleButton id="type" className="btn">
          Type
        </ToggleButton>
      </ToggleButtonGroup>
      <SearchField
        aria-label="Search"
        className="searchfield bigsearch"
        value={text}
        onChange={setText}
        onSubmit={(v) => navigate(searchHref(v.trim(), asked))}
        onClear={() => navigate(searchHref("", asked))}
      >
        <Input
          className="field"
          placeholder={
            mode === "type"
              ? "(s: Shape) => number"
              : mode === "docs"
                ? "words from docs"
                : "a name"
          }
        />
        <Button className="clear" aria-label="Clear">
          ×
        </Button>
      </SearchField>
    </>
  );
}

uses

used by