diff options
| author | Ollie Hsieh <renahlee@outlook.com> | 2023-04-27 07:30:47 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-04-27 09:30:47 -0500 |
| commit | 996dba759513c81ab57ee6167bb840340a468498 (patch) | |
| tree | c2495fe82993585065bea154e0c6457ca1c86bea /src/view/com/lightbox/Lightbox.web.tsx | |
| parent | afd87a63908d0413704c61cfed3cff20f7311d71 (diff) | |
| download | voidsky-996dba759513c81ab57ee6167bb840340a468498.tar.zst | |
Close lightbox on web with escape key (#543)
* Close lightbox on web with escape key * Lint
Diffstat (limited to 'src/view/com/lightbox/Lightbox.web.tsx')
| -rw-r--r-- | src/view/com/lightbox/Lightbox.web.tsx | 16 |
1 files changed, 15 insertions, 1 deletions
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index f10548351..c17356d94 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {useCallback, useEffect} from 'react' import { Image, TouchableOpacity, @@ -73,6 +73,20 @@ function LightboxInner({ } } + const onEscape = useCallback( + (e: KeyboardEvent) => { + if (e.key === 'Escape') { + onClose() + } + }, + [onClose], + ) + + useEffect(() => { + window.addEventListener('keydown', onEscape) + return () => window.removeEventListener('keydown', onEscape) + }, [onEscape]) + return ( <View style={styles.mask}> <TouchableWithoutFeedback onPress={onClose}> |