zdam-egzamin-zawodowy
/
website
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

TestPage: add keyboard navigation between tabs

This commit is contained in:
Dawid Wysokiński 2021-05-25 19:01:47 +02:00
parent 836f0e701a
commit af9e0a9f7b
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/features/QualificationPage/features/TestPage/components/Test/Navigation.tsx
View File

@ -1,3 +1,5 @@
import { useKeyPressEvent } from 'react-use';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Button, ButtonGroup, useMediaQuery } from '@material-ui/core';
import {
@ -31,6 +33,9 @@ const Navigation = ({
const classes = useStyles();
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('sm'));
useKeyPressEvent('ArrowRight', onRequestNextTab);
useKeyPressEvent('ArrowLeft', onRequestPrevTab);
return (
<div className={classes.buttonContainer}>
<div className={classes.navButtonGroup}>

27
src/features/QualificationPage/features/TestPage/components/Test/Test.tsx
View File

@ -50,6 +50,7 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
const [startedAt, setStartedAt] = useState(new Date());
const [endedAt, setEndedAt] = useState(new Date());
const classes = useStyles();
const maxTabIndex = questions.length + (reviewMode ? 1 : 0) - 1;
usePrompt(!reviewMode);
const analyticsParams = useMemo(
() => ({
@ -136,6 +137,20 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
setReviewMode(true);
};
const handleGoToNextTab = () => {
if (currentTab === maxTabIndex) {
return;
}
setCurrentTab(current => current + 1);
};
const handleGoToPrevTab = () => {
if (currentTab === 0) {
return;
}
setCurrentTab(current => current - 1);
};
return (
<Section>
{isFetching && <FixedSpinner />}
@ -204,14 +219,10 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
</TabPanel>
<Navigation
hasPreviousTab={currentTab !== 0}
hasNextTab={
currentTab + 1 !== questions.length + (reviewMode ? 1 : 0)
}
onRequestPrevTab={() => setCurrentTab(currentTab - 1)}
onRequestNextTab={() => setCurrentTab(currentTab + 1)}
isLastQuestion={
currentTab + 1 === questions.length + (reviewMode ? 1 : 0)
}
hasNextTab={currentTab !== maxTabIndex}
onRequestPrevTab={handleGoToPrevTab}
onRequestNextTab={handleGoToNextTab}
isLastQuestion={currentTab === maxTabIndex}
reviewMode={reviewMode}
onReset={handleReset}
onFinish={handleFinish}