import * as React from 'react' ; import { ReactElement } from 'react' ; import { TemplateProps } from '../props' ; import { getPropertyValues } from './utils' ; const CLASS_NAME = 'ontodia-default-template' ; export class DefaultElementTemplate extends React . Component < TemplateProps , { } > { render ( ) { const props = this . props ; const image = props . imgUrl ? ( < div className = { `${ CLASS_NAME }__thumbnail` } > < img src = { props . imgUrl } /> < /div>) : undefined; const expander = props . isExpanded ? ( < div > < div className = 'ontodia-default-template_body_expander' > < div className = 'ontodia-default-template_body_expander__iri_label' > IRI : < /div> < div className = 'ontodia-default-template_body_expander_iri' > < a className = 'ontodia-default-template_body_expander_iri__link' href = { props . iri } title = { props . iri } > { props . iri } < /a> < /div> < /div> < hr className = 'ontodia-default-template_body_expander__hr' / > { this . renderPropertyTable ( ) } < /div>) : null; return ( < div className = 'ontodia-default-template' style = { { backgroundColor : props . color , borderColor : props . color , } } data - expanded = { this . props . isExpanded } > < div className = 'ontodia-default-template_type-line' title = { props . label } > < div className = 'ontodia-default-template_type-line__icon' aria - hidden = 'true' > < img src = { props . iconUrl } /> < /div> < div title = { props . types } className = 'ontodia-default-template_type-line_text-container' > < div className = 'ontodia-default-template_type-line_text-container__text' > { props . types } < /div> < /div> < /div> { image } < div className = 'ontodia-default-template_body' style = { { borderColor : props . color } } > < span className = 'ontodia-default-template_body__label' title = { props . label } > { props . label } < /span> { expander } < /div> < /div>); } renderPropertyTable ( ) { const { propsAsList } = this . props ; if ( propsAsList && propsAsList . length > 0 ) { return < div className = 'ontodia-default-template_body_expander_property-table' > { propsAsList . map ( prop => { const propertyValues = getPropertyValues ( prop . property ) ; const values = propertyValues . map ( ( text , index ) => ( < div className = 'ontodia-default-template_body_expander_property-table_row_key_values__value' key = { index } title = { text } > { text } < /div>)); return ( < div key = { prop . id } className = 'ontodia-default-template_body_expander_property-table_row' > < div title = { prop . name + ' (' + prop . id + ')' } className = 'ontodia-default-template_body_expander_property-table_row__key' > { prop . name } < /div> < div className = 'ontodia-default-template_body_expander_property-table_row_key_values' > { values } < /div> < /div>); } ) } < /div>; } else { return < div > no properties < /div>; } } }