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