Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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