import React from "react"; import { t } from "../i18n"; import { KEYS } from "../keys"; import { Dialog } from "./Dialog"; import { getShortcutKey } from "../utils"; import "./HelpDialog.scss"; import { ExternalLinkIcon } from "./icons"; import { probablySupportsClipboardBlob } from "../clipboard"; import { isDarwin, isFirefox, isWindows } from "../constants"; import { getShortcutFromShortcutName } from "../actions/shortcuts"; 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 upperCaseSingleChars = (str: string) => { return str.replace(/\b[a-z]\b/, (c) => c.toUpperCase()); }; 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) => ( {upperCaseSingleChars(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 ( <> {/* firefox supports clipboard API under a flag, so we'll show users what they can do in the error message */} {(probablySupportsClipboardBlob || isFirefox) && ( )} ")]} /> ); };