add keyboard listener

carbon-app · May 14, 2022 · 7557b55 · 7557b55
1 parent 27108aa
commit 7557b55
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/components/SnippetToolbar.js b/components/SnippetToolbar.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useAsyncCallback, useOnline } from 'actionsack'
+import { useAsyncCallback, useOnline, useKeyboardListener } from 'actionsack'
 
 import Button from './Button'
 import Toolbar from './Toolbar'
@@ -51,6 +51,29 @@ function DuplicateButton(props) {
   )
 }
 
+function SaveButton({ loading, onClick }) {
+  useKeyboardListener('⌥-s', e => {
+    e.preventDefault()
+    onClick()
+  })
+
+  return (
+    <Button
+      border
+      large
+      center
+      color={COLORS.GREEN}
+      onClick={onClick}
+      data-cy="save-button"
+      style={{ minWidth: 84, borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
+      title="Save"
+      disabled={loading}
+    >
+      {loading ? 'Saving…' : 'Save'}
+    </Button>
+  )
+}
+
 function SnippetToolbar({
   toggleVisibility,
   isVisible,
@@ -108,21 +131,8 @@ function SnippetToolbar({
       }}
     >
       <div className="flex">
+        <SaveButton loading={loading} onClick={saveSnippet} />
         <Button
-          border
-          large
-          center
-          color={COLORS.GREEN}
-          onClick={saveSnippet}
-          data-cy="save-button"
-          style={{ minWidth: 84, borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
-          title="Save"
-          disabled={loading}
-        >
-          {loading ? 'Saving…' : 'Save'}
-        </Button>
-        <Button
-          id="save-menu"
           title="Save menu dropdown"
           border
           large

diff --git a/pages/about.js b/pages/about.js
@@ -144,6 +144,12 @@ export default function About() {
                   <kbd>⇧ ⌘ S</kbd>
                 </td>
               </tr>
+              <tr>
+                <td>Save snippet</td>
+                <td>
+                  <kbd>⌥ S</kbd>
+                </td>
+              </tr>
               <tr>
                 <td>Copy image to clipboard</td>
                 <td>