fix(CodeEditor) support Mac and PC shortcuts in example (#10472)

patternfly · Jun 25, 2024 · ca2c530 · ca2c530
1 parent c22798b
commit ca2c530
Showing 1 changed file with 49 additions and 16 deletions.
diff --git a/...ges/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/...ges/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -1,34 +1,49 @@
 import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Grid, GridItem, Chip } from '@patternfly/react-core';
+import { Grid, GridItem, Chip, Radio } from '@patternfly/react-core';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
+  type ShortcutMode = 'PC' | 'Mac';
+
+  const [currentShortcutMode, setCurrentShortcutMode] = React.useState<ShortcutMode>('PC');
+
   const onEditorDidMount = (editor, monaco) => {
     editor.layout();
     editor.focus();
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
   };
 
-  const onChange = (value) => {
+  const onChange = (value: string) => {
     // eslint-disable-next-line no-console
     console.log(value);
   };
 
+  const onShortcutModeChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    if (checked) {
+      const newMode = event.currentTarget.value as ShortcutMode;
+      setCurrentShortcutMode(newMode);
+    }
+  };
+
   const shortcuts = [
     {
-      keys: ['Opt', 'F1'],
+      PC: ['Alt', 'F1'],
+      Mac: ['Opt', 'F1'],
       description: 'Accessibility helps'
     },
     {
-      keys: ['F1'],
+      PC: ['F1'],
+      Mac: ['F1'],
       description: 'View all editor shortcuts'
     },
     {
-      keys: ['Ctrl', 'Space'],
+      PC: ['Ctrl', 'Space'],
+      Mac: ['Opt', 'Esc'],
       description: 'Activate auto complete'
     },
     {
-      keys: ['Cmd', 'S'],
+      PC: ['Ctrl', 'S'],
+      Mac: ['Cmd', 'S'],
       description: 'Save'
     }
   ];
@@ -38,7 +53,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
         {shortcuts.map((shortcut, index) => (
           <React.Fragment key={index}>
             <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
-              {shortcut.keys
+              {shortcut[currentShortcutMode]
                 .map((key) => (
                   <Chip key={key} isReadOnly>
                     {key}
@@ -57,14 +72,32 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   };
 
   return (
-    <CodeEditor
-      shortcutsPopoverProps={shortcutsPopoverProps}
-      isLanguageLabelVisible
-      code="Some example content"
-      onChange={onChange}
-      language={Language.javascript}
-      onEditorDidMount={onEditorDidMount}
-      height="400px"
-    />
+    <>
+      <Radio
+        checked={currentShortcutMode === 'PC'}
+        onChange={onShortcutModeChange}
+        label="PC shortcuts"
+        name="shortcut-radio"
+        id="pc-shortcuts"
+        value="PC"
+      />
+      <Radio
+        checked={currentShortcutMode === 'Mac'}
+        onChange={onShortcutModeChange}
+        label="Mac shortcuts"
+        name="shortcut-radio"
+        id="mac-shortcuts"
+        value="Mac"
+      />
+      <CodeEditor
+        shortcutsPopoverProps={shortcutsPopoverProps}
+        isLanguageLabelVisible
+        code="Some example content"
+        onChange={onChange}
+        language={Language.javascript}
+        onEditorDidMount={onEditorDidMount}
+        height="400px"
+      />
+    </>
   );
 };