import React , { Fragment } from "react" ; import { Action , Base } from "survey-core" ; import { ReactElementFactory , SurveyElementBase , Survey , attachKey2click } from "survey-react-ui" ; import { SurveyLogicUI } from "@survey/creator" ; export class TabLogicAddButtonComponent extends SurveyElementBase < any , any > { private get model ( ) : Action { return this . props . button ; } protected getStateElement ( ) { return this . model ; } renderElement ( ) { const buttonClassName = "svc-logic-tab__content-action svc-btn" + ( ( this . model . enabled !== undefined && ! this . model . enabled ) ? " svc-logic-tab__content-action--disabled" : "" ) ; return attachKey2click ( < div role = "button" onClick = { ( e ) => { e . stopPropagation ( ) ; this . model . action ( ) ; } } className = { buttonClassName } title = { this . model . title } > < span className = "svc-text svc-text--normal svc-text--bold" > { this . model . title } < /span> < /div>); } } ReactElementFactory . Instance . registerElement ( "svc-tab-logic-add-button" , ( props ) => { return React . createElement ( TabLogicAddButtonComponent , props ) ; } ) ; export class TabLogicComponent extends SurveyElementBase < any , any > { private get model ( ) : SurveyLogicUI { return this . props . data ; } protected getStateElement ( ) { return this . model ; } renderElement ( ) { var logic = this . model ; var rootClass = "svc-creator-tab__content" ; var content = this . renderViewContent ( ) ; return < div className = { rootClass } > { content } < /div>; } private renderViewContent ( ) { const logicTabClassName = "svc-plugin-tab__content svc-logic-tab__content " + ( this . model . hasItems ? "" : "svc-logic-tab__empty" ) ; return ( < Fragment > < div className = { logicTabClassName } > < Survey model = { this . model . itemsSurvey } > < /Survey> { this . model . hasItems ? null : ( < div className = "svc-logic-tab__content-empty" > < span className = "svc-text" > { this . model . emptyTabPlaceHolder } < /span> < /div>)} < TabLogicAddButtonComponent button = { this . model . addNewButton } / > < /div> < /Fragment>); } } ReactElementFactory . Instance . registerElement ( "svc-tab-logic" , ( props ) => { return React . createElement ( TabLogicComponent , props ) ; } ) ;