import { FiCornerDownRight } from 'react-icons/fi' ; import { MdSwapVert } from 'react-icons/md' ; import { DomainError } from '../../../vis/models' ; import styles from './DomainTooltip.module.css' ; const ERRORS = { [ DomainError . MinGreater ] : { message : 'Min greater than max' , fallback : 'data range' , } , [ DomainError . InvalidMinWithScale ] : { message : 'Custom min invalid with this scale' , fallback : 'data min' , } , [ DomainError . InvalidMaxWithScale ] : { message : 'Custom max invalid with this scale' , fallback : 'data max' , } , [ DomainError . CustomMaxFallback ] : { message : 'Custom min invalid with this scale' , fallback : 'custom max' , } , } ; interface Props { error : DomainError ; showSwapBtn ? : boolean ; onSwap ? : ( ) => void ; } function ErrorMessage ( props ) { const { error , showSwapBtn = false , onSwap } = props ; const { message , fallback } = ERRORS [ error ] ; return ( < p className = { styles . error } > < span className = { styles . errorMessage } > { message } < br / > < FiCornerDownRight /> falling back to <strong>{fallback}</strong > < /span> { showSwapBtn && onSwap && ( < button className = { styles . swapBtn } type = "button" aria - label = "Swap min and max" onClick = { ( ) => onSwap ( ) } > < MdSwapVert /> < /button>)} < /p>); } export default ErrorMessage ;