import React from "react" ; import { Base , SurveyModel , PageModel } from "survey-core" ; import { ReactElementFactory , SurveyElementBase , SurveyHeader } from "survey-react-ui" ; import { CreatorBase , TabDesignerViewModel } from "@survey/creator" ; import { SurveyPageNavigator } from "../page-navigator/PageNavigator" ; import { SurveyNavigation } from "../Navigation" ; interface ITabDesignerComponentProps { data : TabDesignerViewModel < SurveyModel > ; } export class TabDesignerComponent extends SurveyElementBase < ITabDesignerComponentProps , any > { private get model ( ) : TabDesignerViewModel < SurveyModel > { return this . props . data ; } protected get creator ( ) : CreatorBase < SurveyModel > { return this . model . creator ; } protected getStateElements ( ) { return [ this . model , this . model . survey ] ; } protected renderPages ( ) { const surveyPages = this . creator . survey . pages . map ( ( page , index ) => { return ( < div className = { "svc-page" } data - sv - drop - target - page = { page . name } data - sv - drop - target - survey - element = { page . name } key = { page . id + "-" + index } > { this . renderPage ( page ) } < /div>); } ) ; if ( this . model . showNewPage ) { surveyPages . push ( < div className = { "svc-page" } data - sv - drop - target - survey - element = { "newGhostPage" } key = { this . model . newPage . id + "-ghost-new-page" } > { this . renderPage ( this . model . newPage ) } < /div>); } return surveyPages ; } protected renderPage ( pageV ) { return ReactElementFactory . Instance . createElement ( "svc-page" , { survey : this . creator . survey , page : pageV , creator : this . creator } ) ; } renderElement ( ) { const survey = this . creator . survey ; const designerTabClassName = "svc-tab-designer " + this . model . getRootCss ( ) ; return ( < React . Fragment > < div className = "svc-flex-column" > { this . model . isToolboxVisible ? ReactElementFactory . Instance . createElement ( "svc-adaptive-toolbox" , { model : this . creator } ) : null } < /div> < div className = { designerTabClassName } onClick = { ( ) => this . model . clickDesigner ( ) } > < div className = { this . model . getDesignerCss ( ) } > { ! this . creator . allowEditSurveyTitle ? null : < div > < SurveyHeader survey = { survey } > < /SurveyHeader> < /div>} < SurveyNavigation survey = { survey } location = "top" / > { this . renderPages ( ) } < SurveyNavigation survey = { survey } location = "bottom" css = { survey . css } / > < /div> { this . creator . showPageNavigator ? < div className = "svc-tab-designer__page-navigator" > < SurveyPageNavigator creator = { this . creator } pages = { this . creator . pagesController . pages } > < /SurveyPageNavigator></div > : null } < /div> < /React.Fragment>); } } ReactElementFactory . Instance . registerElement ( "svc-tab-designer" , ( props ) => { return React . createElement ( TabDesignerComponent , props as ITabDesignerComponentProps ) ; } ) ;