import React from 'react' ; import { EuiButtonEmpty , EuiHideFor , EuiShowFor , EuiButtonIcon , EuiFlexItem , } from '@elastic/eui' ; import { I18LABELS } from '../translations' ; import { PercentileRange } from './index' ; interface Props { percentileRange : PercentileRange ; setPercentileRange : ( value : PercentileRange ) => void ; } export function ResetPercentileZoom ( { percentileRange , setPercentileRange , } ) { const isDisabled = percentileRange . min === null && percentileRange . max === null ; const onClick = ( ) => { setPercentileRange ( { min : null , max : null } ) ; } ; return ! isDisabled ? ( < EuiFlexItem grow = { false } > < EuiShowFor sizes = { [ 'xs' ] } > < EuiButtonIcon iconType = "inspect" size = "s" aria - label = { I18LABELS . resetZoom } onClick = { onClick } / > < /EuiShowFor> < EuiHideFor sizes = { [ 'xs' ] } > < EuiButtonEmpty iconType = "inspect" size = "s" onClick = { onClick } > { I18LABELS . resetZoom } < /EuiButtonEmpty> < /EuiHideFor> < /EuiFlexItem>) : null; }