import * as React from 'react' ; import { AnnotationSelectList } from './AnnotationSelectList' ; import { AnnotationSelectSingleItem } from './AnnotationSelectSingleItem' ; import { ISuperdesk , ICrudManager } from 'superdesk-api' ; import { IKnowledgeBaseItem } from './interfaces' ; interface IProps { annotationText : string ; conceptItems : ICrudManager < IKnowledgeBaseItem > ; annotationTypeSelect : JSX . Element ; onCancel ( ) : void ; onApplyAnnotation ( html ) : void ; superdesk : ISuperdesk ; } interface IState { selected : IKnowledgeBaseItem | null ; } export class AnnotationsSelect extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . state = { selected : null , } ; } render ( ) { const { gettext } = this . props . superdesk . localization ; const backButton = ( < div className = "space-between" style = { { marginTop : 15 } } > < span /> < button onClick = { this . props . onCancel } className = "btn" > { gettext ( 'Cancel' ) } < /button> < /div>); if ( this . props . conceptItems . _items == null ) { return null ; } if ( this . props . conceptItems . _meta . total < 1 ) { return ( < div > < p style = { { marginTop : 20 } } > { gettext ( 'No matches found in the library.' ) } < /p> { backButton } < /div>); } if ( this . state . selected != null ) { return ( < AnnotationSelectSingleItem item = { this . state . selected } onBack = { ( ) => { this . setState ( { selected : null } ) ; } } annotationTypeSelect = { this . props . annotationTypeSelect } onApplyAnnotation = { this . props . onApplyAnnotation } superdesk = { this . props . superdesk } / > ) ; } else { return ( < AnnotationSelectList items = { this . props . conceptItems . _items } onSelect = { ( item ) => { this . setState ( { selected : item } ) ; } } backButton = { backButton } onCancel = { this . props . onCancel } superdesk = { this . props . superdesk } / > ) ; } } }