mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 16:55:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Basic keyboard shortcuts

Browse source 
Esc for carousel modal, Ctrl/Cmd+Enter for Compose field
This commit is contained in:
Lim Chee Aun 2022-12-30 21:36:14 +08:00
parent d605fc6ebe
commit 724be17d3e
4 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
package-lock.json generated
View file

@ -18,6 +18,7 @@
"mem": "~9.0.2",
"preact": "~10.11.3",
"preact-router": "~4.1.0",
"react-hotkeys-hook": "~4.3.2",
"react-intersection-observer": "~9.4.1",
"string-length": "~5.0.1",
"swiped-events": "~1.1.7",
@ -4615,6 +4616,15 @@
"react": "^18.2.0"
}
},
"node_modules/react-hotkeys-hook": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.3.2.tgz",
"integrity": "sha512-ZA/li3kBDHuRTtJIf7Td41UU87bPtnt9xV4r+PlEzpnFoYRDVspk3B+mlaX75zowyQygMVmoaWnM4B88lkyExQ==",
"peerDependencies": {
"react": ">=16.8.1",
"react-dom": ">=16.8.1"
}
},
"node_modules/react-intersection-observer": {
"version": "9.4.1",
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.1.tgz",
@ -9091,6 +9101,12 @@
"scheduler": "^0.23.0"
}
},
"react-hotkeys-hook": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.3.2.tgz",
"integrity": "sha512-ZA/li3kBDHuRTtJIf7Td41UU87bPtnt9xV4r+PlEzpnFoYRDVspk3B+mlaX75zowyQygMVmoaWnM4B88lkyExQ==",
"requires": {}
},
"react-intersection-observer": {
"version": "9.4.1",
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.1.tgz",

1
package.json
View file

@ -20,6 +20,7 @@
"mem": "~9.0.2",
"preact": "~10.11.3",
"preact-router": "~4.1.0",
"react-hotkeys-hook": "~4.3.2",
"react-intersection-observer": "~9.4.1",
"string-length": "~5.0.1",
"swiped-events": "~1.1.7",

8
src/components/compose.jsx
View file

@ -2,6 +2,7 @@ import './compose.css';
import '@github/text-expander-element';
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook';
import stringLength from 'string-length';
import supportedLanguages from '../data/status-supported-languages';
@ -597,6 +598,13 @@ function Compose({
pointerEvents: uiState === 'loading' ? 'none' : 'auto',
opacity: uiState === 'loading' ? 0.5 : 1,
}}
onKeyDown={(e) => {
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
formRef.current.dispatchEvent(
new Event('submit', { cancelable: true }),
);
}
}}
onSubmit={(e) => {
e.preventDefault();

3
src/components/status.jsx
View file

@ -9,6 +9,7 @@ import {
useRef,
useState,
} from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook';
import { InView } from 'react-intersection-observer';
import 'swiped-events';
import useResizeObserver from 'use-resize-observer';
@ -1298,6 +1299,8 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
};
}, []);
useHotkeys('esc', onClose, [onClose]);
return (
<>
<div