components/switch/switch.react.tsx

Functions

Imports

It imports components/switch/switch.ts. Imported by components/authorship/authorship.react.tsx.

Source

1import { useState, type InputHTMLAttributes, type ReactNode } from "react";
2import { stateWord } from "./switch.ts";
3
4export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role" | "checked" | "defaultChecked" | "onChange" | "style"> {
5  // A fixed noun: what is switched, never the state ("Single-key shortcuts").
6  label: ReactNode;
7  // Controlled; leave it out for a switch that keeps its own state.
8  checked?: boolean;
9  defaultChecked?: boolean;
10  // Called at once with the new state: a switch takes effect without a Save.
11  onCheckedChange?: (checked: boolean) => void;
12  onWord?: string;
13  offWord?: string;
14  // A request for the change is running: drawn as a dashed outline, and not disabled.
15  busy?: boolean;
16}
17
18export function Switch(props: SwitchProps) {
19  const { label, checked, defaultChecked = false, onCheckedChange, onWord, offWord, busy, className, ...rest } = props;
20  const [own, setOwn] = useState(defaultChecked);
21  const on = checked ?? own;
22  return (
23    <label className={className ? `cap-switch ${className}` : "cap-switch"}>
24      <input
25        {...rest}
26        type="checkbox"
27        role="switch"
28        aria-busy={busy || undefined}
29        checked={on}
30        onChange={(e) => {
31          setOwn(e.target.checked);
32          onCheckedChange?.(e.target.checked);
33        }}
34      />{" "}
35      {label}{" "}
36      <span className="cap-switch-state" aria-hidden="true">
37        {stateWord(on, onWord, offWord)}
38      </span>
39    </label>
40  );
41}