import React from 'react' ; import { EuiSpacer , EuiText , EuiCheckableCard , EuiTextColor , EuiTitle } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; const txtUnknown = i18n . translate ( 'xpack.uiActionsEnhanced.components.TriggerPickerItem.unknown' , { defaultMessage : 'Unknown' , } ) ; export interface TriggerPickerItemDescription { id : string ; title ? : string ; description ? : string ; } export interface TriggerPickerItemProps extends TriggerPickerItemDescription { /** Whether the item is selected. */ checked ? : boolean ; /** Whether to disable user interaction. */ disabled ? : boolean ; /** Called when item is selected by user. */ onSelect : ( id : string ) => void ; } export const TriggerPickerItem = ( { id , title = txtUnknown , description , checked , disabled , onSelect , } ) => { const descriptionFragment = ! ! description && ( < div > < EuiText size = { 's' } > < EuiTextColor color = { 'subdued' } > { description } < /EuiTextColor> < /EuiText> < /div>); const label = ( < > < EuiTitle size = { 'xxs' } > < span > { title } < /span> < /EuiTitle> { descriptionFragment } < />); return ( < > < EuiCheckableCard id = { id } label = { label } name = { id } value = { id } checked = { checked } disabled = { disabled } onChange = { ( ) => onSelect ( id ) } data - test - subj = { `triggerPicker-${ id }` } /> < EuiSpacer size = { 's' } / > < />); } ;