import { getLocString , ItemValueWrapperViewModel } from "@survey/creator" ; import React from "react" ; import { ReactDragEvent } from "src/events" ; import { QuestionSelectBase , Base , ItemValue } from "survey-core" ; import { attachKey2click , ReactElementFactory , SurveyElementBase , SvgIcon } from "survey-react-ui" ; interface ItemValueAdornerComponentProps { element : JSX . Element ; componentData : any ; question : QuestionSelectBase ; item : ItemValue ; } export class ItemValueAdornerComponent extends SurveyElementBase < ItemValueAdornerComponentProps , any > { model : ItemValueWrapperViewModel ; constructor ( props ) { super ( props ) ; this . model = new ItemValueWrapperViewModel ( this . props . componentData . creator , this . props . question , this . props . item ) ; } protected getStateElement ( ) { return this . model ; } render ( ) { this . model . item = this . props . item ; const button = this . model . allowAdd ? ( attachKey2click ( < span className = "svc-item-value-controls__button svc-item-value-controls__add" aria - label = { this . model . tooltip } onClick = { ( ) => this . model . add ( this . model ) } > < SvgIcon size = { 16 } iconName = { "icon-add_16x16" } > < /SvgIcon> < /span>)) : (<> { " " } { this . model . isDraggable ? ( < span className = "svc-item-value-controls__button svc-item-value-controls__drag" aria - label = { this . model . dragTooltip } > < SvgIcon className = "svc-item-value-controls__drag-icon" size = { 24 } iconName = { "icon-drag-area-indicator" } > < /SvgIcon> < /span>) : null} { this . model . allowRemove ? attachKey2click ( < span className = "svc-item-value-controls__button svc-item-value-controls__remove" aria - label = { this . model . tooltip } onClick = { ( ) => this . model . remove ( this . model ) } > < SvgIcon size = { 16 } iconName = { "icon-remove_16x16" } > < /SvgIcon> < /span>) : null} < />); return ( < div className = { "svc-item-value-wrapper" + ( this . model . allowAdd ? " svc-item-value--new" : "" ) + ( this . model . isDragging ? " svc-item-value--dragging" : "" ) + ( this . model . isDragDropGhost ? " svc-item-value--ghost" : "" ) + ( this . model . isDragDropMoveDown ? " svc-item-value--movedown" : "" ) + ( this . model . isDragDropMoveUp ? " svc-item-value--moveup" : "" ) } key = { this . props . element . key } data - sv - drop - target - item - value = { this . model . isDraggable ? this . model . item . value : undefined } onPointerDown = { ( event ) => this . model . onPointerDown ( event ) } > < div className = "svc-item-value__ghost" > < /div> < div className = "svc-item-value-controls" > { button } < /div> < div className = { "svc-item-value__item" } onClick = { ( event ) => this . model . select ( this . model , event ) } > { this . props . element } < /div> < /div>); } } ReactElementFactory . Instance . registerElement ( "svc-item-value" , ( props ) => { return React . createElement ( ItemValueAdornerComponent , props ) ; } ) ;