DiffMode

tcmts.share.DiffMode · #mui5bt7d · term · runs in the browser

uses localStorage

The switch between diffs' two layouts, one line after another (unified) and side by side (split): for every diff on the page, and remembered by the browser.

import { useEffect, useState } from "react";
import { ToggleButton, ToggleButtonGroup } from "react-aria-components";

export function DiffMode() {
  const [mode, setMode] = useState("unified");
  const choose = (m: string) => {
    setMode(m);
    localStorage.setItem("tcm.diff", m);
    window.dispatchEvent(new Event("tcm-diff"));
  };
  useEffect(() => {
    if (localStorage.getItem("tcm.diff") === "split") choose("split");
  }, []);
  return (
    <ToggleButtonGroup
      aria-label="Diff layout"
      className="seg diffmode"
      selectionMode="single"
      disallowEmptySelection
      selectedKeys={[mode]}
      onSelectionChange={(keys) => choose(keys.has("split") ? "split" : "unified")}
    >
      <ToggleButton id="unified" className="btn small">
        Unified
      </ToggleButton>
      <ToggleButton id="split" className="btn small">
        Split
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

DiffMode

used by