import React from "react" ; import { Base , SurveyModel } from "survey-core" ; import { SurveyResultsModel } from "@survey/creator" ; import { attachKey2click , SurveyElementBase } from "survey-react-ui" ; interface ISurveyResultsProps { survey : SurveyModel ; } export class SurveyResults extends SurveyElementBase < ISurveyResultsProps , any > { model : SurveyResultsModel ; constructor ( props ) { super ( props ) ; if ( props . survey ) { this . model = new SurveyResultsModel ( props . survey ) ; } } protected getStateElement ( ) { return this . model ; } render ( ) { if ( ! this . model ) { return null ; } return ( < div className = "svd_test_results" > < div className = "svd_results_header" > < h2 > { this . model . surveyResultsText } < /h2> < /div> < ul className = "navbar-default container-fluid nav nav-tabs editor-tabs" > < li className = { "nav-item " + this . model . resultViewType === "table" ? "active" : "" } > { attachKey2click ( < a className = "nav-link" href = "#" onClick = { ( ) => this . model . selectTableClick ( this . model ) } > { this . model . getLocString ( "ed.surveyResultsTable" ) } < /a>)} < /li> < li className = { "nav-item " + this . model . resultViewType === "text" ? "active" : "" } > { attachKey2click ( < a className = "nav-link" href = "#" onClick = { ( ) => this . model . selectJsonClick ( this . model ) } > { this . model . getLocString ( "ed.surveyResultsJson" ) } < /a>)} < /li> < /ul> { this . renderResultAsText ( ) } { this . renderResultAsTable ( ) } < /div>); } renderResultAsText ( ) { if ( this . model . resultViewType !== "text" ) { return null ; } return ( < div className = "svd_results_text svd-light-bg-color" > < div > { this . model . resultText } < /div> < /div>); } renderResultAsTable ( ) { if ( this . model . resultViewType !== "table" ) { return null ; } return ( < div className = "svd_results_table svd-light-bg-color" > < table > < thead > < tr className = "svd-light-background-color" > < th className = "svd-dark-border-color" > { this . model . resultsTitle } < /th> < th className = "svd-dark-border-color" > { this . model . resultsName } < /th> < th className = "svd-dark-border-color" > { this . model . resultsValue } < /th> < th className = "svd-dark-border-color" > { this . model . resultsDisplayValue } < /th> < /tr> < /thead> < tbody > { this . renderRows ( this . model . resultData ) } < /tbody> < /table> < /div>); } renderRows ( data ) { return data . map ( ( item ) => this . renderRow ( item ) ) ; } renderRow ( row ) { return ( < > < tr data - bind = "click: toggle" > < td className = "svd-dark-border-color" > { row . isNode ? ( < span className = { "survey-result-marker " + row . collapsed ? "" : "survey-result-marker--expanded" } > ▶ < /span>) : null} < span > { row . title } < /span> < /td> < td className = "svd-dark-border-color" > { row . name } < /td> < td className = "svd-dark-border-color" > < div className = "survey-result-value" > { row . getString ( row . value ) } < /div> < /td> < td className = "svd-dark-border-color" > { row . getString ( row . displayValue ) } < /td> < /tr> { this . renderRows ( row . data ) } < />); } }