import React from "react"; import { t } from "../i18n"; import { isDarwin, isWindows, KEYS } from "../keys"; import { Dialog } from "./Dialog"; import { getShortcutKey } from "../utils"; import "./HelpDialog.scss"; import { ExternalLinkIcon } from "./icons"; const Header = () => (

); const Section = (props: { title: string; children: React.ReactNode }) => ( <>

{props.title}

{props.children}

); const ShortcutIsland = (props: { caption: string; children: React.ReactNode; className?: string; }) => (

{props.caption}

{props.children}

); function* intersperse(as: JSX.Element[][], delim: string | null) { let first = true; for (const x of as) { if (!first) { yield delim; } first = false; yield x; } } const Shortcut = ({ label, shortcuts, isOr = true, }: { label: string; shortcuts: string[]; isOr?: boolean; }) => { const splitShortcutKeys = shortcuts.map((shortcut) => { const keys = shortcut.endsWith("++") ? [...shortcut.slice(0, -2).split("+"), "+"] : shortcut.split("+"); return keys.map((key) => {key}); }); return (

{label}

{[...intersperse(splitShortcutKeys, isOr ? t("helpDialog.or") : null)]}

); }; const ShortcutKey = (props: { children: React.ReactNode }) => ( ); export const HelpDialog = ({ onClose }: { onClose?: () => void }) => { const handleClose = React.useCallback(() => { if (onClose) { onClose(); } }, [onClose]); return ( <> ")]} /> ); };