Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-20 12:09:36 +02:00
Code Issues Releases Wiki Activity

Support for keyboard navigation for Apps. Small refactor to pinApp action

Browse source
This commit is contained in:
unknown 2021-05-22 18:10:12 +02:00
parent 8813bf6181
commit 5c948e1a68
4 changed files with 43 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

28
client/src/components/Apps/AppTable/AppTable.tsx
View file

@ -1,3 +1,4 @@
import { KeyboardEvent } from 'react';
import { connect } from 'react-redux';
import { App, GlobalState } from '../../../interfaces';
import { pinApp, deleteApp } from '../../../store/actions';
@ -7,7 +8,7 @@ import Icon from '../../UI/Icons/Icon/Icon';
interface ComponentProps {
apps: App[];
pinApp: (id: number, isPinned: boolean) => void;
pinApp: (app: App) => void;
deleteApp: (id: number) => void;
updateAppHandler: (app: App) => void;
}
@ -21,6 +22,12 @@ const AppTable = (props: ComponentProps): JSX.Element => {
}
}
const keyboardActionHandler = (e: KeyboardEvent, app: App, handler: Function) => {
if (e.key === 'Enter') {
handler(app);
}
}
return (
<div className={classes.TableContainer}>
<table className={classes.Table}>
@ -42,16 +49,27 @@ const AppTable = (props: ComponentProps): JSX.Element => {
<td className={classes.TableActions}>
<div
className={classes.TableAction}
onClick={() => deleteAppHandler(app)}>
onClick={() => deleteAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
tabIndex={0}>
<Icon icon='mdiDelete' />
</div>
<div
className={classes.TableAction}
onClick={() => props.updateAppHandler(app)}>
onClick={() => props.updateAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
tabIndex={0}>
<Icon icon='mdiPencil' />
</div>
<div className={classes.TableAction} onClick={() => props.pinApp(app.id, app.isPinned)}>
{app.isPinned? <Icon icon='mdiPinOff' color='var(--color-accent)' /> : <Icon icon='mdiPin' />}
<div
className={classes.TableAction}
onClick={() => props.pinApp(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
tabIndex={0}>
{app.isPinned
? <Icon icon='mdiPinOff' color='var(--color-accent)' />
: <Icon icon='mdiPin' />
}
</div>
</td>
</tr>