setOpen(false)} active={open}>
+ {t("shortcutDocsModal.description")}
+
+
+ {([key]: [string, string]) =>
+ splitKeyCombination(key).map((k, i) => (
+ 0,
+ }
+ )}
+ >
+ {k}
+
+ ))
+ }
+
+
+ {([, description]: [string, string]) => description}
+
+
+
+ );
+};
+
+export default ShortcutDocsModal;
diff --git a/scm-ui/ui-webapp/src/shortcuts/splitKeyCombination.test.ts b/scm-ui/ui-webapp/src/shortcuts/splitKeyCombination.test.ts
new file mode 100644
index 0000000000..26d48faa06
--- /dev/null
+++ b/scm-ui/ui-webapp/src/shortcuts/splitKeyCombination.test.ts
@@ -0,0 +1,56 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import splitKeyCombination from "./splitKeyCombination";
+
+const MAC_USER_AGENT =
+ "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/600.7.12 (KHTML, like Gecko) Version/8.0.7 Safari/600.7.12";
+const WINDOWS_USER_AGENT =
+ "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36";
+const LINUX_USER_AGENT =
+ "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36";
+
+describe("splitKeyCombination", () => {
+ it("should split and replace correctly", () => {
+ expect(splitKeyCombination("alt+a meta+b meta+c", WINDOWS_USER_AGENT)).toEqual([
+ "alt",
+ "a",
+ "meta",
+ "b",
+ "meta",
+ "c",
+ ]);
+ expect(splitKeyCombination("option+a command+b command+c mod+d", LINUX_USER_AGENT)).toEqual([
+ "alt",
+ "a",
+ "meta",
+ "b",
+ "meta",
+ "c",
+ "ctrl",
+ "d",
+ ]);
+ expect(splitKeyCombination("alt+a meta+b mod+c", MAC_USER_AGENT)).toEqual(["option", "a", "⌘", "b", "⌘", "c"]);
+ });
+});
diff --git a/scm-ui/ui-webapp/src/shortcuts/splitKeyCombination.ts b/scm-ui/ui-webapp/src/shortcuts/splitKeyCombination.ts
new file mode 100644
index 0000000000..6b000043ca
--- /dev/null
+++ b/scm-ui/ui-webapp/src/shortcuts/splitKeyCombination.ts
@@ -0,0 +1,37 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import parser from "ua-parser-js";
+
+export default function splitKeyCombination(key: string, userAgent = window.navigator.userAgent) {
+ const {
+ os: { name: osName },
+ } = parser(userAgent);
+ const isMacOS = osName === "Mac OS";
+ return key
+ .replace(/(option|alt)/g, isMacOS ? "option" : "alt")
+ .replace(/(command|meta)/g, isMacOS ? "⌘" : "meta")
+ .replace("mod", isMacOS ? "⌘" : "ctrl")
+ .split(/[+ ]/);
+}
diff --git a/scm-ui/ui-webapp/src/shortcuts/useShortcut.ts b/scm-ui/ui-webapp/src/shortcuts/useShortcut.ts
index 059423497f..2e0238ea32 100644
--- a/scm-ui/ui-webapp/src/shortcuts/useShortcut.ts
+++ b/scm-ui/ui-webapp/src/shortcuts/useShortcut.ts
@@ -24,6 +24,16 @@
import { useEffect } from "react";
import Mousetrap from "mousetrap";
+import useShortcutDocs from "./useShortcutDocs";
+
+export type UseShortcutOptions = {
+ /**
+ * Whether the shortcut is currently active
+ *
+ * @default true
+ */
+ active?: boolean;
+};
/**
* ## Summary
@@ -46,29 +56,45 @@ import Mousetrap from "mousetrap";
*
* ## Combinations
*
- * Keys can be combined with the "+" separator, but without extra whitespaces.
+ * Keys can be combined by separating them with a whitespace.
+ * For using modifiers, prefix the key with the modifier and concat them with a "+".
*
- * @param key
- * @param callback
- * @example useShortcut("/", ...)
+ * Please also refer to the examples.
+ *
+ * @param key The keycode combination that triggers the callback
+ * @param callback The function that is executed when the key combination is pressed
+ * @param description The translated description used for the shortcut documentation
+ * @param options Whether the shortcut is currently active, defaults to true
+ * @example useShortcut("a b", ...)
* @example useShortcut("ctrl+shift+k", ...)
* @see https://github.com/ccampbell/mousetrap
* @see https://craig.is/killing/mice
*/
-export default function useShortcut(key: string, callback: (e: KeyboardEvent) => void) {
+export default function useShortcut(
+ key: string,
+ callback: (e: KeyboardEvent) => void,
+ description: string,
+ options?: UseShortcutOptions
+) {
+ const { add, remove } = useShortcutDocs();
useEffect(() => {
- Mousetrap.bind(key, (e) => {
- callback(e);
- /*
- * Returning false disables default event behaviour and stops event bubbling.
- * Otherwise, a shortcut that moves focus to an input field would cause the key to be entered into the input at the same time.
- * We could move the decision to the callback, but this behaviour is an implementation detail of Mousetrap which we would like to hide.
- */
- return false;
- });
+ const active = !options || options.active === undefined || options.active;
+ if (active) {
+ add(key, description);
+ Mousetrap.bind(key, (e) => {
+ callback(e);
+ /*
+ * Returning false disables default event behaviour and stops event bubbling.
+ * Otherwise, a shortcut that moves focus to an input field would cause the key to be entered into the input at the same time.
+ * We could move the decision to the callback, but this behaviour is an implementation detail of Mousetrap which we would like to hide.
+ */
+ return false;
+ });
+ }
return () => {
+ remove(key);
Mousetrap.unbind(key);
};
- }, [key, callback]);
+ }, [key, callback, add, remove, options, description]);
}
diff --git a/scm-ui/ui-webapp/src/shortcuts/useShortcutDocs.tsx b/scm-ui/ui-webapp/src/shortcuts/useShortcutDocs.tsx
new file mode 100644
index 0000000000..4ae9cbe6fa
--- /dev/null
+++ b/scm-ui/ui-webapp/src/shortcuts/useShortcutDocs.tsx
@@ -0,0 +1,53 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, useContext, useMemo, useRef } from "react";
+
+export type ShortcutDocsContextType = {
+ docs: Readonly