import React from 'react' ; import { EuiFlexItem , EuiFlexGroup , EuiIcon } from '@elastic/eui' ; import { EuiText } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { withEmbeddableSubscription } from '../../../../src/plugins/embeddable/public' ; import { BookEmbeddableInput , BookEmbeddableOutput , BookEmbeddable } from './book_embeddable' ; interface Props { input : BookEmbeddableInput ; output : BookEmbeddableOutput ; embeddable : BookEmbeddable ; } function wrapSearchTerms ( task ? , search ? ) { if ( ! search || ! task ) return task ; const parts = task . split ( new RegExp ( `(${ search })` , 'g' ) ) ; return parts . map ( ( part , i ) => part === search ? ( < span key = { i } style = { { backgroundColor : 'yellow' } } > { part } < /span>) : (part)); } export function BookEmbeddableComponentInner ( { input : { search } , output : { attributes } , embeddable , } ) { const title = attributes ?. title ; const author = attributes ?. author ; const readIt = attributes ?. readIt ; const byReference = embeddable . inputIsRefType ( embeddable . getInput ( ) ) ; return ( < EuiFlexGroup gutterSize = "s" > < EuiFlexItem > < EuiFlexGroup direction = "column" gutterSize = "s" > { title ? ( < EuiFlexItem > < EuiText data - test - subj = "bookEmbeddableTitle" > < h3 > { wrapSearchTerms ( title , search ) } < /h3> < /EuiText> < /EuiFlexItem>) : null} { author ? ( < EuiFlexItem > < EuiText data - test - subj = "bookEmbeddableAuthor" > - { wrapSearchTerms ( author , search ) } < /EuiText> < /EuiFlexItem>) : null} { readIt ? ( < EuiFlexItem > < EuiIcon type = "check" / > < /EuiFlexItem>) : (<EuiFlexItem> < EuiIcon type = "cross" / > < /EuiFlexItem>)} < /EuiFlexGroup> < /EuiFlexItem> < EuiFlexItem > < EuiText data - test - subj = "bookEmbeddableAuthor" > < EuiIcon type = { byReference ? 'folderCheck' : 'folderExclamation' } />{' '} < span > { byReference ? i18n . translate ( 'embeddableExamples.book.byReferenceLabel' , { defaultMessage : 'Book is By Reference' , } ) : i18n . translate ( 'embeddableExamples.book.byValueLabel' , { defaultMessage : 'Book is By Value' , } ) } < /span> < /EuiText> < /EuiFlexItem> < /EuiFlexGroup>); } export const BookEmbeddableComponent = withEmbeddableSubscription < BookEmbeddableInput , BookEmbeddableOutput , BookEmbeddable , { } > ( BookEmbeddableComponentInner ) ;