Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 463 | Rev 465 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
456 geraldo 1 
import React, { useState, useEffect } from "react";
306 geraldo 2 
 
3 
const Option = (props) => {
315 geraldo 4 
 
306 geraldo 5 
    // get props
456 geraldo 6 
    const { question } = props;
306 geraldo 7 
 
456 geraldo 8 
    // init States
9 
    const [input, setInput] = useState(question.answer);
10 
 
11 
    /**
12 
     * Update question answer
13 
     * @param {*} answer
14 
     */
15 
    const handleAnswerSimple = (value) => {
16 
        setInput(value);
17 
        question.answer = value;
18 
    }
19 
 
20 
    /**
21 
     * Update question answer
462 geraldo 22 
     * @param {*} option
456 geraldo 23 
     */
462 geraldo 24 
    const handleAnswerMultiple = (option) => {
464 geraldo 25 
        console.log(option);
462 geraldo 26 
        question.answer.includes(option.slug_option) ?
463 geraldo 27 
            question.answer = removeOptionMultiple(question.answer, option.slug_option) :
28 
            question.answer.push(option.slug_option);
462 geraldo 29 
        option.checked != option.checked;
464 geraldo 30 
        console.log(option);
456 geraldo 31 
        setInput(question.answer);
32 
    }
33 
 
34 
    /**
35 
     * Delete existing option
36 
     * @param {*} arr
37 
     * @param {*} item
38 
     * @returns
39 
     */
40 
    const removeOptionMultiple = (arr, item) => arr.splice(arr.indexOf(item), 1);
41 
 
459 geraldo 42 
    /**
43 
     * componentDidMount
44 
     */
45 
    useEffect(() => {
46 
        setInput(question.answer);
47 
    }, [question]);
48 
 
49 
 
306 geraldo 50 
    return (
51 
        <div>
319 geraldo 52 
            {question.options.map((opt, key) => {
53 
                return (
320 geraldo 54 
                    <div className="checkbox"
55 
                        key={key}>
321 geraldo 56 
 
57 
                        {question.type == 'multiple' &&
58 
 
59 
                            <input
60 
                                type="checkbox"
61 
                                name={`${opt.slug_option}[]`}
459 geraldo 62 
                                value={opt.slug_option}
462 geraldo 63 
                                checked={opt.checked}
64 
                                onChange={() => handleAnswerMultiple(opt)}
344 geraldo 65 
                            />
321 geraldo 66 
                        }
67 
                        {question.type != 'multiple' &&
68 
                            <input
69 
                                type="radio"
328 geraldo 70 
                                name={`${opt.slug_question}`}
342 geraldo 71 
                                value={opt.slug_option}
456 geraldo 72 
                                checked={input == opt.slug_option}
73 
                                onChange={() => handleAnswerSimple(opt.slug_option)}
342 geraldo 74 
                            />
321 geraldo 75 
                        }
319 geraldo 76 
                        <div
77 
                            dangerouslySetInnerHTML={{ __html: opt.text }}
78 
                            className="option"
79 
                        />
80 
                    </div>
81 
                )
82 
            })}
306 geraldo 83 
        </div>
84 
 
85 
    )
86 
}
87 
 
88 
export default Option;