phanpy/src/components/keyboard-shortcuts-help.jsx

202 lines
5.4 KiB
React
Raw Normal View History

2023-09-06 17:54:05 +03:00
import './keyboard-shortcuts-help.css';
import { memo } from 'preact/compat';
2023-09-06 17:54:05 +03:00
import { useHotkeys } from 'react-hotkeys-hook';
import { useSnapshot } from 'valtio';
import states from '../utils/states';
import Icon from './icon';
import Modal from './modal';
export default memo(function KeyboardShortcutsHelp() {
2023-09-06 17:54:05 +03:00
const snapStates = useSnapshot(states);
function onClose() {
states.showKeyboardShortcutsHelp = false;
}
useHotkeys(
'?, shift+?',
(e) => {
console.log('help');
states.showKeyboardShortcutsHelp = true;
},
{
ignoreEventWhen: (e) => {
const hasModal = !!document.querySelector('#modal-container > *');
return hasModal;
},
},
);
const escRef = useHotkeys('esc', onClose, []);
return (
!!snapStates.showKeyboardShortcutsHelp && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
onClose();
}
}}
>
<div
id="keyboard-shortcuts-help-container"
class="sheet"
tabindex="-1"
ref={escRef}
>
<button type="button" class="sheet-close" onClick={onClose}>
<Icon icon="x" />
</button>
<header>
<h2>Keyboard shortcuts</h2>
</header>
<main>
<table>
{[
{
action: 'Keyboard shortcuts help',
keys: <kbd>?</kbd>,
},
{
action: 'Next post',
keys: <kbd>j</kbd>,
},
{
action: 'Previous post',
keys: <kbd>k</kbd>,
},
{
action: 'Skip carousel to next post',
keys: (
<>
<kbd>Shift</kbd> + <kbd>j</kbd>
</>
),
},
{
action: 'Skip carousel to previous post',
keys: (
<>
<kbd>Shift</kbd> + <kbd>k</kbd>
</>
),
},
{
action: 'Open post details',
keys: (
<>
<kbd>Enter</kbd> or <kbd>o</kbd>
</>
),
2023-09-06 17:54:05 +03:00
},
{
2023-12-20 11:42:36 +03:00
action: (
<>
Expand content warning or
<br />
toggle expanded/collapsed thread
</>
),
keys: <kbd>x</kbd>,
2023-09-06 17:54:05 +03:00
},
{
action: 'Close post or dialogs',
2023-09-06 17:54:05 +03:00
keys: (
<>
<kbd>Esc</kbd> or <kbd>Backspace</kbd>
2023-09-06 17:54:05 +03:00
</>
),
},
{
action: 'Focus column in multi-column mode',
2023-09-06 17:54:05 +03:00
keys: (
<>
<kbd>1</kbd> to <kbd>9</kbd>
2023-09-06 17:54:05 +03:00
</>
),
},
{
action: 'Compose new post',
keys: <kbd>c</kbd>,
2023-09-06 17:54:05 +03:00
},
2023-11-06 15:15:13 +03:00
{
action: 'Compose new post (new window)',
className: 'insignificant',
keys: (
<>
<kbd>Shift</kbd> + <kbd>c</kbd>
</>
),
},
2023-09-06 17:54:05 +03:00
{
action: 'Send post',
2023-09-06 17:54:05 +03:00
keys: (
<>
<kbd>Ctrl</kbd> + <kbd>Enter</kbd> or <kbd></kbd> +{' '}
<kbd>Enter</kbd>
2023-09-06 17:54:05 +03:00
</>
),
},
{
action: 'Search',
keys: <kbd>/</kbd>,
},
2023-09-08 10:32:55 +03:00
{
action: 'Reply',
keys: <kbd>r</kbd>,
},
2023-11-06 15:15:13 +03:00
{
action: 'Reply (new window)',
className: 'insignificant',
keys: (
<>
<kbd>Shift</kbd> + <kbd>r</kbd>
</>
),
},
2023-09-08 10:32:55 +03:00
{
action: 'Like (favourite)',
keys: (
<>
<kbd>l</kbd> or <kbd>f</kbd>
</>
),
2023-09-08 10:32:55 +03:00
},
{
action: 'Boost',
keys: (
<>
<kbd>Shift</kbd> + <kbd>b</kbd>
</>
),
},
{
action: 'Bookmark',
keys: <kbd>d</kbd>,
},
{
action: 'Toggle Cloak mode',
keys: (
<>
<kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>k</kbd>
</>
),
},
2023-11-06 15:15:13 +03:00
].map(({ action, className, keys }) => (
2023-09-06 17:54:05 +03:00
<tr key={action}>
2023-11-06 15:15:13 +03:00
<th class={className}>{action}</th>
2023-09-06 17:54:05 +03:00
<td>{keys}</td>
</tr>
))}
</table>
</main>
</div>
</Modal>
)
);
});