import * as React from 'react' ; import { IKnowledgeBaseItem } from './interfaces' ; import { ISuperdesk } from 'superdesk-api' ; interface IProps { onSelect ( item ) : void ; onCancel ( ) : void ; backButton : JSX . Element ; items : Array < IKnowledgeBaseItem > ; superdesk : ISuperdesk ; } export class AnnotationSelectList extends React . Component < IProps > { render ( ) { const { UserHtmlSingleLine } = this . props . superdesk . components ; const { Item , Column , Row } = this . props . superdesk . components . List ; return ( < div > < div style = { { maxHeight : '20rem' , overflow : 'auto' , paddingTop : 15 } } > { this . props . items . map ( ( item , i ) => ( < Item key = { i } onClick = { ( ) => this . props . onSelect ( item ) } > < Column grow > < Row > < strong > { item . name } < /strong></Row > < Row > < span className = "sd-overflow-ellipsis sd-list-item--element-grow" > < UserHtmlSingleLine html = { item . definition_html } /> < /span> < /Row> < /Column> < /Item>))} < /div> { this . props . backButton } < /div>); } }