import React from 'react' ; import { InlineIcon } from '@iconify/react/dist/offline' ; import successIcon from '@iconify-icons/uil/check-circle' ; import pendingIcon from '@iconify-icons/uil/question-circle' ; import failedIcon from '@iconify-icons/uil/times-circle' ; type StatusIcon = 'success' | 'failed' | 'pending' ; interface TestIconsProps { id : string ; icon ? : StatusIcon ; } export function TestIcons ( props ) { const id = 'test-icons-' + props . id ; const icon = props . icon || 'pending' ; return ( < span className = "test-row-icons" id = { id } > < InlineIcon icon = { successIcon } className = { 'success ' + ( icon === 'success' ? 'visible' : 'hidden' ) } / > < InlineIcon icon = { pendingIcon } className = { 'pending ' + ( icon === 'pending' ? 'visible' : 'hidden' ) } / > < InlineIcon icon = { failedIcon } className = { 'failed ' + ( icon === 'failed' ? 'visible' : 'hidden' ) } / > < /span>); } export function toggleTest ( id , status ) { const node = document . getElementById ( 'test-icons-' + id ) ; if ( ! node ) { return ; } const visible = node . querySelector ( '.visible' ) ; if ( visible ) { visible . classList . remove ( 'visible' ) ; visible . classList . add ( 'hidden' ) ; } const toggle = node . querySelector ( '.' + status ) ; if ( toggle ) { toggle . classList . remove ( 'hidden' ) ; toggle . classList . add ( 'visible' ) ; } }