import React from 'react' ; import { EuiFlexGroup , EuiSpacer , EuiFlexItem , EuiText , EuiPanel } from '@elastic/eui' ; import { IContainer , withEmbeddableSubscription , ContainerInput , ContainerOutput , EmbeddableStart , } from '../../../../src/plugins/embeddable/public' ; interface Props { embeddable : IContainer ; input : ContainerInput ; output : ContainerOutput ; embeddableServices : EmbeddableStart ; } function renderList ( embeddable , panels , embeddableServices ) { let number = 0 ; const list = Object . values ( panels ) . map ( ( panel ) => { const child = embeddable . getChild ( panel . explicitInput . id ) ; number ++ ; return ( < EuiPanel key = { number . toString ( ) } > < EuiFlexGroup gutterSize = "none" > < EuiFlexItem grow = { false } > < EuiText > < h3 > { number } < /h3> < /EuiText> < /EuiFlexItem> < EuiFlexItem > < embeddableServices . EmbeddablePanel embeddable = { child } /> < /EuiFlexItem> < /EuiFlexGroup> < /EuiPanel>); } ) ; return list ; } export function ListContainerComponentInner ( { embeddable , input , embeddableServices } ) { return ( < div > < h2 data - test - subj = "listContainerTitle" > { embeddable . getTitle ( ) } < /h2> < EuiSpacer size = "l" / > { renderList ( embeddable , input . panels , embeddableServices ) } < /div>); } export const ListContainerComponent = withEmbeddableSubscription < ContainerInput , ContainerOutput , IContainer , { embeddableServices : EmbeddableStart ; } > ( ListContainerComponentInner ) ;