TestPage: add keyboard navigation between tabs
This commit is contained in:
parent
836f0e701a
commit
af9e0a9f7b
|
@ -1,3 +1,5 @@
|
||||||
|
import { useKeyPressEvent } from 'react-use';
|
||||||
|
|
||||||
import { makeStyles, useTheme } from '@material-ui/core/styles';
|
import { makeStyles, useTheme } from '@material-ui/core/styles';
|
||||||
import { Button, ButtonGroup, useMediaQuery } from '@material-ui/core';
|
import { Button, ButtonGroup, useMediaQuery } from '@material-ui/core';
|
||||||
import {
|
import {
|
||||||
|
@ -31,6 +33,9 @@ const Navigation = ({
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const matches = useMediaQuery(theme.breakpoints.down('sm'));
|
const matches = useMediaQuery(theme.breakpoints.down('sm'));
|
||||||
|
useKeyPressEvent('ArrowRight', onRequestNextTab);
|
||||||
|
useKeyPressEvent('ArrowLeft', onRequestPrevTab);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.buttonContainer}>
|
<div className={classes.buttonContainer}>
|
||||||
<div className={classes.navButtonGroup}>
|
<div className={classes.navButtonGroup}>
|
||||||
|
|
|
@ -50,6 +50,7 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
|
||||||
const [startedAt, setStartedAt] = useState(new Date());
|
const [startedAt, setStartedAt] = useState(new Date());
|
||||||
const [endedAt, setEndedAt] = useState(new Date());
|
const [endedAt, setEndedAt] = useState(new Date());
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
const maxTabIndex = questions.length + (reviewMode ? 1 : 0) - 1;
|
||||||
usePrompt(!reviewMode);
|
usePrompt(!reviewMode);
|
||||||
const analyticsParams = useMemo(
|
const analyticsParams = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
|
@ -136,6 +137,20 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
|
||||||
setReviewMode(true);
|
setReviewMode(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleGoToNextTab = () => {
|
||||||
|
if (currentTab === maxTabIndex) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setCurrentTab(current => current + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGoToPrevTab = () => {
|
||||||
|
if (currentTab === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setCurrentTab(current => current - 1);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Section>
|
<Section>
|
||||||
{isFetching && <FixedSpinner />}
|
{isFetching && <FixedSpinner />}
|
||||||
|
@ -204,14 +219,10 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<Navigation
|
<Navigation
|
||||||
hasPreviousTab={currentTab !== 0}
|
hasPreviousTab={currentTab !== 0}
|
||||||
hasNextTab={
|
hasNextTab={currentTab !== maxTabIndex}
|
||||||
currentTab + 1 !== questions.length + (reviewMode ? 1 : 0)
|
onRequestPrevTab={handleGoToPrevTab}
|
||||||
}
|
onRequestNextTab={handleGoToNextTab}
|
||||||
onRequestPrevTab={() => setCurrentTab(currentTab - 1)}
|
isLastQuestion={currentTab === maxTabIndex}
|
||||||
onRequestNextTab={() => setCurrentTab(currentTab + 1)}
|
|
||||||
isLastQuestion={
|
|
||||||
currentTab + 1 === questions.length + (reviewMode ? 1 : 0)
|
|
||||||
}
|
|
||||||
reviewMode={reviewMode}
|
reviewMode={reviewMode}
|
||||||
onReset={handleReset}
|
onReset={handleReset}
|
||||||
onFinish={handleFinish}
|
onFinish={handleFinish}
|
||||||
|
|
Reference in New Issue
Block a user