import React from 'react' ; import { EuiFlexGroup , EuiFlexItem , EuiToolTip } from '@elastic/eui' ; import { FieldIcon , FieldIconProps } from '../../../../../opensearch_dashboards_react/public' ; import { shortenDottedString } from '../../helpers' ; import { getFieldTypeName } from './field_type_name' ; interface Props { fieldName : string ; fieldType : string ; useShortDots ? : boolean ; fieldIconProps ? : Omit < FieldIconProps , 'type' > ; scripted ? : boolean ; } export function FieldName ( { fieldName , fieldType , useShortDots , fieldIconProps , scripted = false , } ) { const typeName = getFieldTypeName ( fieldType ) ; const displayName = useShortDots ? shortenDottedString ( fieldName ) : fieldName ; return ( < EuiFlexGroup alignItems = "center" gutterSize = "s" responsive = { false } > < EuiFlexItem grow = { false } > < FieldIcon type = { fieldType } label = { typeName } scripted = { scripted } { ... fieldIconProps } /> < /EuiFlexItem> < EuiFlexItem className = "eui-textTruncate" > < EuiToolTip position = "top" content = { displayName } delay = "long" anchorClassName = "eui-textTruncate" > < span > { displayName } < /span> < /EuiToolTip> < /EuiFlexItem> < /EuiFlexGroup>); }