import classNames from 'classnames' ; import React , { KeyboardEventHandler , MouseEventHandler , useCallback } from 'react' ; import { isRTLString } from '../../utils/common' ; import { LegendLabelOptions } from '../../utils/themes/theme' ; interface LabelProps { label : string ; isSeriesHidden ? : boolean ; isToggleable ? : boolean ; onToggle ? : ( negate : boolean ) => void ; options : LegendLabelOptions ; } internal export function Label ( { label , isToggleable , onToggle , isSeriesHidden , options } ) { const maxLines = Math . abs ( options . maxLines ) ; const labelClassNames = classNames ( 'echLegendItem__label' , { 'echLegendItem__label--clickable' : Boolean ( onToggle ) , 'echLegendItem__label--singleline' : maxLines === 1 , 'echLegendItem__label--multiline' : maxLines > 1 , } ) ; const onClick = useCallback ( ( { shiftKey } ) => onToggle ?. ( shiftKey ) , [ onToggle ] ) ; const onKeyDown = useCallback ( ( { key , shiftKey } ) => { if ( key === ' ' || key === 'Enter' ) onToggle ?. ( shiftKey ) ; } , [ onToggle ] ) ; const dir = isRTLString ( label ) ? 'rtl' : 'ltr' ; const title = options . maxLines > 0 ? label : '' ; const clampStyles = maxLines > 1 ? { WebkitLineClamp : maxLines } : { } ; return isToggleable ? ( < div role = "button" tabIndex = { 0 } dir = { dir } className = { labelClassNames } title = { title } onClick = { onClick } onKeyDown = { onKeyDown } aria - pressed = { isSeriesHidden } style = { clampStyles } aria - label = { isSeriesHidden ? `${ label }; Activate to show series in graph` : `${ label }; Activate to hide series in graph` } > { label } < /div>) : (<div dir={dir} className={labelClassNames} title={label} style={clampStyles}> { label } < /div>); }