frontend/containers/OnBoardingTour/index.tsx (view raw)
1import Joyride from 'react-joyride';
2import {useTheme} from '@material-ui/core/styles';
3import {useTranslation} from 'react-i18next';
4import useTour from '../../hooks/useTour';
5
6interface Props {}
7
8const OnBoardingTour = (props: Props) => {
9 const theme = useTheme();
10 const {t} = useTranslation();
11 const {run, steps, step, onTourChange} = useTour();
12 const translateStep = ({content, ...step}) => ({
13 content: t(content),
14 ...step,
15 });
16
17 return (
18 <Joyride
19 run={run}
20 steps={steps.map(translateStep)}
21 stepIndex={step}
22 callback={onTourChange}
23 locale={t('joyride', {returnObjects: true})}
24 continuous={true}
25 showProgress={true}
26 disableScrolling={true}
27 disableScrollParentFix={true}
28 scrollToFirstStep={false}
29 floaterProps={{
30 disableAnimation: true,
31 }}
32 styles={{
33 options: {
34 primaryColor: theme.palette.primary.main,
35 },
36 tooltipContent: {
37 whiteSpace: 'pre-wrap',
38 },
39 }}
40 />
41 );
42};
43
44export default OnBoardingTour;