cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-14 20:03:52 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

fix: replace library with code

Browse Source
This commit is contained in:
cv
2021-11-16 22:23:01 +01:00
parent be1a2dc67e
commit db7e60f247
4 changed files with 111 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/features/editors/list/EventList.jsx
+77 -29
View File
@@ -1,7 +1,6 @@
import style from './List.module.css';
import { createRef, useEffect, useMemo, useState } from 'react';
import { createRef, useCallback, useEffect, useMemo, useState } from 'react';
import { useSocket } from 'app/context/socketContext';
import tinykeys from 'tinykeys';
import Empty from 'common/state/Empty';
import EventListItem from './EventListItem';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
@@ -19,37 +18,86 @@ export default function EventList(props) {
const cursorRef = createRef();
// Handle keyboard shortcuts
const handleKeyPress = useCallback(
(e) => {
// Check if the alt key is pressed
if (e.altKey) {
// Arrow down
if (e.keyCode === 40) {
if (cursor == null) setCursor(0);
else if (cursor < events.length - 1) setCursor(cursor + 1);
}
// Arrow up
if (e.keyCode === 38) {
if (cursor == null) setCursor(0);
else if (cursor > 0) setCursor(cursor - 1);
}
// E
if (e.key === 'e' || e.key === 'E') {
e.preventDefault();
if (cursor == null) return;
eventsHandler('add', { type: 'event', order: cursor + 1 });
}
// D
if (e.key === 'd' || e.key === 'D') {
e.preventDefault();
if (cursor == null) return;
eventsHandler('add', { type: 'delay', order: cursor + 1 });
}
// B
if (e.key === 'b' || e.key === 'B') {
e.preventDefault();
if (cursor == null) return;
eventsHandler('add', { type: 'block', order: cursor + 1 });
}
}
},
[cursor, events, eventsHandler]
);
useEffect(() => {
let unsubscribe = tinykeys(window, {
'Alt+ArrowDown': () => {
if (cursor == null) setCursor(0);
else if (cursor < events.length - 1) setCursor(cursor + 1);
},
'Alt+ArrowUp': () => {
if (cursor == null) setCursor(0);
else if (cursor > 0) setCursor(cursor - 1);
},
'Alt+KeyE': (event) => {
event.preventDefault();
if (cursor == null) return;
eventsHandler('add', { type: 'event', order: cursor + 1 });
},
'Alt+KeyD': (event) => {
event.preventDefault();
if (cursor == null) return;
eventsHandler('add', { type: 'delay', order: cursor + 1 });
},
'Alt+KeyB': (event) => {
event.preventDefault();
if (cursor == null) return;
eventsHandler('add', { type: 'block', order: cursor + 1 });
},
});
// attach the event listener
document.addEventListener('keydown', handleKeyPress);
if (cursor > events.length - 1) setCursor(events.length - 1);
// remove the event listener
return () => {
unsubscribe();
document.removeEventListener('keydown', handleKeyPress);
};
}, [cursor, events, eventsHandler]);
}, [handleKeyPress, cursor, events]);
// useEffect(() => {
// let unsubscribe = tinykeys(window, {
// 'Alt+ArrowDown': () => {
// if (cursor == null) setCursor(0);
// else if (cursor < events.length - 1) setCursor(cursor + 1);
// },
// 'Alt+ArrowUp': () => {
// if (cursor == null) setCursor(0);
// else if (cursor > 0) setCursor(cursor - 1);
// },
// 'Alt+KeyE': (event) => {
// event.preventDefault();
// if (cursor == null) return;
// eventsHandler('add', { type: 'event', order: cursor + 1 });
// },
// 'Alt+KeyD': (event) => {
// event.preventDefault();
// if (cursor == null) return;
// eventsHandler('add', { type: 'delay', order: cursor + 1 });
// },
// 'Alt+KeyB': (event) => {
// event.preventDefault();
// if (cursor == null) return;
// eventsHandler('add', { type: 'block', order: cursor + 1 });
// },
// });
// if (cursor > events.length - 1) setCursor(events.length - 1);
// return () => {
// unsubscribe();
// };
// }, [cursor, events, eventsHandler]);
// handle incoming messages
useEffect(() => {