Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3481 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3481 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form';
3 
import { Box } from '@mui/material'
 3 
import { Box } from '@mui/material';
4 
 
 4 
 
5 
import { parse } from '@app/utils'
 5 
import { parse } from '@app/utils';
6 
 
 6 
 
7 
import Button from '@app/components/UI/buttons/Buttons'
 7 
import Button from '@app/components/UI/buttons/Buttons';
8 
import Checkbox from '@components/UI/inputs/Checkbox'
 8 
import Checkbox from '@components/UI/inputs/Checkbox';
9 
import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback'
 9 
import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback';
10 
 
 10 
 
11 
function QuizMultipleQuestion({
 11 
function QuizMultipleQuestion({
12 
  question,
 12 
  question,
13 
  onConfirm,
 13 
  onConfirm,
14 
  buttonLabel = 'Finalizar',
 14 
  buttonLabel = 'Finalizar',
15 
  isCurrent = false
 15 
  isCurrent = false
16 
}) {
 16 
}) {
17 
  const {
 17 
  const {
18 
    control,
 18 
    control,
19 
    formState: { errors },
 19 
    formState: { errors },
20 
    handleSubmit
 20 
    handleSubmit
21 
  } = useForm()
 21 
  } = useForm();
22 
 
 22 
 
23 
  const handleConfirm = handleSubmit((data) => {
 23 
  const handleConfirm = handleSubmit((data) => {
24 
    onConfirm(data[question.uuid])
 24 
    onConfirm(data[question.uuid]);
25 
  })
 25 
  });
26 
 
 26 
 
27 
  return (
 27 
  return (
28 
    <Box sx={{ display: isCurrent ? 'initial' : 'none' }}>
 28 
    <Box sx={{ display: isCurrent ? 'initial' : 'none' }}>
29 
      <Box sx={{ '& p': { fontWeight: '600', fontSize: '1.5rem' } }}>
 29 
      <Box sx={{ '& p': { fontWeight: '600', fontSize: '1.5rem' } }}>{parse(question.text)}</Box>
30 
        {parse(question.text)}
 - 
 
31 
      </Box>
 - 
 
32 
 
 30 
 
33 
      {question.answers.map(({ uuid, text }) => (
 31 
      {question.answers.map(({ uuid, text }) => (
34 
        <Box
 32 
        <Box
35 
          key={uuid}
 33 
          key={uuid}
36 
          sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}
 34 
          sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}
37 
          component='label'
 35 
          component='label'
38 
          htmlFor={uuid}
 36 
          htmlFor={uuid}
39 
        >
 37 
        >
40 
          {parse(text)}
 38 
          {parse(text)}
41 
 
 39 
 
42 
          <Checkbox
 40 
          <Checkbox
43 
            control={control}
 41 
            control={control}
44 
            name={question.uuid}
 42 
            name={question.uuid}
45 
            value={uuid}
 43 
            value={uuid}
46 
            rules={{ required: true }}
 44 
            rules={{ required: true }}
47 
          />
 45 
          />
48 
        </Box>
 46 
        </Box>
49 
      ))}
 47 
      ))}
50 
 
 48 
 
51 
      {errors[question.uuid] && (
 49 
      {errors[question.uuid] && (
52 
        <FormErrorFeedback>
 - 
 
53 
          Por favor, seleccione al menos una respuesta
 50 
        <FormErrorFeedback>Por favor, seleccione al menos una respuesta</FormErrorFeedback>
54 
        </FormErrorFeedback>
 - 
 
55 
      )}
 51 
      )}
56 
 
 52 
 
57 
      <Button
 - 
 
58 
        color='primary'
 - 
 
59 
        onClick={handleConfirm}
 - 
 
60 
        styles={{ marginTop: '1rem' }}
 53 
      <Button color='primary' onClick={handleConfirm} styles={{ marginTop: '1rem' }}>
61 
      >
 - 
 
62 
        {buttonLabel}
 54 
        {buttonLabel}
63 
      </Button>
 55 
      </Button>
64 
    </Box>
 56 
    </Box>
65 
  )
 57 
  );
66 
}
 58 
}
67 
 
 59 
 
68 
export default QuizMultipleQuestion
 60 
export default QuizMultipleQuestion;