Add return/esc key handler to system dialogs

stellar-expert · Jan 1, 2025 · 7c6f8ce · 7c6f8ce
1 parent 7fb94dd
commit 7c6f8ce
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/interaction/system-dialog.js b/interaction/system-dialog.js
@@ -19,14 +19,26 @@ export const SystemDialog = React.memo(function SystemDialog() {
 
     useEffect(() => {
         window.alert = function (content, options = {title: defaultAlertTitle, icon: 'info'}) {
+            function close() {
+                setContent(undefined)
+                window.removeEventListener('keydown', keyHandler, true)
+            }
+
+            function keyHandler(e) {
+                if (e.keyCode === 27 || e.keyCode === 13) {
+                    close()
+                }
+            }
+
             setContent(<>
                 <h2>
                     <i className={'inline-block icon-' + (options.icon || 'info')} style={{marginLeft: '-0.2em'}}/>{' '}
                     {options.title || defaultAlertTitle}
                 </h2>
                 <div className="space">{content}</div>
             </>)
-            setButtons([null, <Button block autoFocus onClick={() => setContent(undefined)}>Ok</Button>])
+            setButtons([null, <Button block autoFocus onClick={close}>Ok</Button>])
+            window.addEventListener('keydown', keyHandler, true)
         }
         window.confirm = function (content, options = {
             title: defaultConfirmTitle,
@@ -38,6 +50,15 @@ export const SystemDialog = React.memo(function SystemDialog() {
                 function setResult(result) {
                     setContent(undefined)
                     resolve(result)
+                    window.removeEventListener('keydown', keyHandler, true)
+                }
+
+                function keyHandler(e) {
+                    if (e.keyCode === 27) {
+                        setResult(false)
+                    } else if (e.keyCode === 13) {
+                        setResult(true)
+                    }
                 }
 
                 setContent(<>
@@ -50,6 +71,8 @@ export const SystemDialog = React.memo(function SystemDialog() {
                     <Button block autoFocus onClick={() => setResult(true)}>{options.confirmTitle || defaultConfirmCaption}</Button>,
                     <Button block outline onClick={() => setResult(false)}>{options.cancelTitle || defaultCancelCaption}</Button>
                 ])
+
+                window.addEventListener('keydown', keyHandler, true)
             })
         }
     }, [])

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.14.1",
+  "version": "1.14.2",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",