import React from 'react' ; import { getType , PRESSURE_TYPE_PHONE } from "../utils" ; import './index.scss' ; const parseTarget = ( target ) : any | undefined => { const targetSplit = target . split ( '<' ) ; const valid = targetSplit . length === 2 ; return valid ? { name : targetSplit [ 0 ] . trim ( ) , value : targetSplit [ 1 ] . replace ( '>' , '' ) } : undefined ; } ; class TargetList extends React . Component < any , any > { constructor ( properties ) { super ( properties ) ; this . state = { targets : properties . targets || [ ] , selectedTargets : [ ] } ; } render ( ) { const { targets } = this . state ; const pressureType = getType ( targets ) ; const isPressurePhone = pressureType === PRESSURE_TYPE_PHONE ; return ( < div className = 'target-list px2 py1' > < div className = 'target-list-label bold' > Quem você vai pressionar { targets . length } < /div> < div className = 'target-list-container clearfix' > < div className = 'target-list-wrapper clearfix' > { targets . length > 0 && targets . map ( ( obj ) => { const target = parseTarget ( obj ) ; return ! target ? undefined : ( < label key = { target . name } className = 'target-item left py1 px2 mr1 bg-white rounded' > < p className = 'black h6 m0' > < span className = 'target-name bold flex' > { target . name } < /span> { ! isPressurePhone && < span className = 'target-value' > { target . value } < /span>} < /p> < /label>); } ) } < /div> < /div> < /div>); } } export default TargetList ;