Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
453 geraldo 1 
import React, { useState, useEffect } from "react";
306 geraldo 2 
import Option from "../option/Option";
3 
 
4 
const Question = (props) => {
310 geraldo 5 
 
452 geraldo 6 
 
7 
 
8 
 
306 geraldo 9 
    // get props
340 geraldo 10 
    const { question, backendVars, handleAnswer } = props;
453 geraldo 11 
    const [input, setInput ] = useState(question.answer);
306 geraldo 12 
 
453 geraldo 13 
     /**
14 
     * componentDidMount
15 
     */
16 
      useEffect(() => {
17 
        setInput(question.answer);
454 geraldo 18 
        console.log(question.answer);
453 geraldo 19 
    }, [question]);
20 
 
306 geraldo 21 
    return (
313 geraldo 22 
        <div className="col-md-12 col-sm-12 col-xs-12 np-padding">
310 geraldo 23 
            <div className="form-group" >
333 geraldo 24 
                <h6>{backendVars.LBL_QUESTION} #{question.position + 1}</h6>
310 geraldo 25 
                <div
26 
                    dangerouslySetInnerHTML={{ __html: question.text }}
27 
                    className="title"
28 
                />
29 
            </div>
306 geraldo 30 
            {question.type == 'open' &&
310 geraldo 31 
                <div className="form-group">
306 geraldo 32 
                    {question.multiline == 1 ? (
33 
                        <textarea
34 
                            className="form-control"
35 
                            rows="5"
452 geraldo 36 
                            value={input}
306 geraldo 37 
                            maxLength={question.maxlength}
38 
                            name={question.slug_question}
454 geraldo 39 
                            onChange={e =>{
40 
                                setInput(e.target.value);
41 
                                question.answer = e.target.value;
42 
                                //handleAnswer(question.slug_section, question.slug_question, e.target.value)
43 
                            }}
342 geraldo 44 
                        />
306 geraldo 45 
                    ) : (
46 
                        <input
47 
                            type="text"
48 
                            className="form-control"
442 geraldo 49 
                            value={question.answer}
306 geraldo 50 
                            maxLength={question.maxlength}
340 geraldo 51 
                            name={question.slug_question}
342 geraldo 52 
                            onChange={e =>
53 
                                handleAnswer(question.slug_section, question.slug_question, e.target.value)
54 
                            }
55 
                        />
306 geraldo 56 
                    )}
57 
                </div>
58 
            }
59 
            {question.type == 'rating-range' &&
310 geraldo 60 
                <div className="form-group">
334 geraldo 61 
                    {[...Array(parseInt(question.range))].map((x, i) => {
306 geraldo 62 
                        return (
333 geraldo 63 
                            <div className="checkbox"
64 
                                key={i}>
306 geraldo 65 
                                <input
66 
                                    type="radio"
443 geraldo 67 
                                    checked={question.answer == i + 1}
306 geraldo 68 
                                    name={question.slug_question}
342 geraldo 69 
                                    value={i + 1}
70 
                                    onChange={() =>
71 
                                        handleAnswer(question.slug_section, question.slug_question, i + 1)
72 
                                    }
73 
                                />
333 geraldo 74 
                                <div className="option">
336 geraldo 75 
                                    {i + 1}
333 geraldo 76 
                                </div>
306 geraldo 77 
                            </div>
78 
                        )
79 
                    })}
80 
                </div>
81 
            }
333 geraldo 82 
            {(question.type == 'simple' || question.type == 'rating-open' || question.type == 'multiple') &&
310 geraldo 83 
                <div className="form-group">
323 geraldo 84 
                    {question.options.length > 0 &&
340 geraldo 85 
                        <Option
86 
                            question={question}
87 
                            handleAnswer={handleAnswer} />
306 geraldo 88 
                    }
89 
                </div>
90 
            }
91 
        </div>
92 
    )
93 
}
94 
 
95 
export default Question;