imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Keybinding code unification #6 (#8042)

Browse source
This commit is contained in:
Šimon Brandner 2022-03-14 14:25:51 +01:00 • committed by GitHub
parent e725f14651
commit 8d13e238b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 462 additions and 351 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx
View file

@ -18,71 +18,16 @@ limitations under the License.
import React from "react";
import {
getKeyboardShortcutsForUI,
ALTERNATE_KEY_NAME,
KEY_ICON,
ICategory,
CATEGORIES,
CategoryName,
KeyBindingConfig,
} from "../../../../../accessibility/KeyboardShortcuts";
import SdkConfig from "../../../../../SdkConfig";
import { isMac, Key } from "../../../../../Keyboard";
import { _t } from "../../../../../languageHandler";
// TODO: This should return KeyCombo but it has ctrlOrCmd instead of ctrlOrCmdKey
const getKeyboardShortcutValue = (name: string): KeyBindingConfig => {
return getKeyboardShortcutsForUI()[name]?.default;
};
const getKeyboardShortcutDisplayName = (name: string): string | null => {
const keyboardShortcutDisplayName = getKeyboardShortcutsForUI()[name]?.displayName;
return keyboardShortcutDisplayName && _t(keyboardShortcutDisplayName);
};
interface IKeyboardKeyProps {
name: string;
last?: boolean;
}
export const KeyboardKey: React.FC<IKeyboardKeyProps> = ({ name, last }) => {
const icon = KEY_ICON[name];
const alternateName = ALTERNATE_KEY_NAME[name];
return <React.Fragment>
<kbd> { icon || (alternateName && _t(alternateName)) || name } </kbd>
{ !last && "+" }
</React.Fragment>;
};
interface IKeyboardShortcutProps {
name: string;
}
export const KeyboardShortcut: React.FC<IKeyboardShortcutProps> = ({ name }) => {
const value = getKeyboardShortcutValue(name);
if (!value) return null;
const modifiersElement = [];
if (value.ctrlOrCmdKey) {
modifiersElement.push(<KeyboardKey key="ctrlOrCmdKey" name={isMac ? Key.META : Key.CONTROL} />);
} else if (value.ctrlKey) {
modifiersElement.push(<KeyboardKey key="ctrlKey" name={Key.CONTROL} />);
} else if (value.metaKey) {
modifiersElement.push(<KeyboardKey key="metaKey" name={Key.META} />);
}
if (value.altKey) {
modifiersElement.push(<KeyboardKey key="altKey" name={Key.ALT} />);
}
if (value.shiftKey) {
modifiersElement.push(<KeyboardKey key="shiftKey" name={Key.SHIFT} />);
}
return <div>
{ modifiersElement }
<KeyboardKey name={value.key} last />
</div>;
};
import {
getKeyboardShortcutDisplayName, getKeyboardShortcutValue,
} from "../../../../../accessibility/KeyboardShortcutUtils";
import { KeyboardShortcut } from "../../KeyboardShortcut";
interface IKeyboardShortcutRowProps {
name: string;
@ -94,11 +39,12 @@ const visibleCategories = Object.entries(CATEGORIES).filter(([categoryName]) =>
const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name }) => {
const displayName = getKeyboardShortcutDisplayName(name);
if (!displayName) return null;
const value = getKeyboardShortcutValue(name);
if (!displayName || !value) return null;
return <div className="mx_KeyboardShortcut_shortcutRow">
{ displayName }
<KeyboardShortcut name={name} />
<KeyboardShortcut value={value} />
</div>;
};