import * as React from 'react' ; import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome' ; import { AxisSide , Sides , Widths } from 'utils/axesConfig' ; type Props = { config : Sides ; widths : Widths ; editable ? : boolean ; onChange ? ( e ) : void ; } ; type ShowPopover = 'none' | 'left' | 'right' ; const Axis = ( props ) => { const [ showPopover , setShowPopover ] = React . useState < ShowPopover > ( 'none' ) ; const { config , widths , editable , onChange } = props ; const { left } = config ; const { right } = config ; const handlePopoverToggle = ( type ) : void => { if ( showPopover === type ) { setShowPopover ( 'none' ) ; } else { setShowPopover ( type ) ; } } ; const handleLeftIconClick = ( ) => handlePopoverToggle ( 'left' ) ; const handlRightIconClick = ( ) => handlePopoverToggle ( 'right' ) ; const popoverLeft = ( < AxisPopover isRight = { showPopover === 'right' } show = { showPopover === 'left' } side = { left } / > ) ; const popoverRight = ( < AxisPopover isRight = { showPopover === 'right' } show = { showPopover === 'right' } side = { right } / > ) ; return ( < div className = "axis" > { popoverLeft } { popoverRight } < div className = { `axis__icon left ${ left . iconType === 'symbol' ? 'big' : '' }` } style = { { background : left . iconColor } } onClick = { handleLeftIconClick } role = "button" > { left . iconType === 'font-awesome' && < FaIcon icon = { left . icon } />} { left . iconType === 'symbol' && left . icon } { left . iconType === 'vector' && < left . icon />} < /div> < div className = "axis__bars" > < div className = "axis__bar" style = { { background : left . barColor , width : `${ widths . left }%` , } } > { ! editable && widths . left > 20 && ( `${ widths . left }%` ) } { editable && ( < div className = "inputwrapper" > < input name = { left . title } value = { widths . left } onChange = { onChange } type = "number" min = { 0 } max = { 100 - widths . right } / > < span > % < /span> < /div>)} < /div> < div className = "axis__bar axis__bar--grey" style = { { width : `${ widths . center + 1 }%` , } } > { widths . center > 20 && ( `${ widths . center }%` ) } < /div> < div className = "axis__bar" style = { { background : right . barColor , width : `${ widths . right }%` , } } > { ! editable && widths . right > 20 && `${ widths . right }%` } { editable && ( < div className = "inputwrapper" > < input name = { right . title } value = { widths . right } onChange = { onChange } type = "number" min = { 0 } max = { 100 - widths . left } / > < span > % < /span> < /div>)} < /div> < /div> < div className = { `axis__icon right ${ right . iconType === 'symbol' ? 'big' : '' }` } style = { { background : right . iconColor } } onClick = { handlRightIconClick } role = "button" > { right . iconType === 'font-awesome' && < FaIcon icon = { right . icon } />} { right . iconType === 'symbol' && right . icon } { right . iconType === 'vector' && < right . icon />} < /div> < /div>); } ; type PopoverProps = { side : AxisSide ; isRight : boolean ; show : boolean ; } ; const AxisPopover = ( { side , show , isRight } ) => { const meta = side . meta [ 'pl-PL' ] ; if ( ! show ) return null ; return ( < div className = { `axis__popover ${ isRight ? 'right' : 'left' }` } > < div className = "axis__popover__title" style = { { background : side . barColor } } > { meta . title } < /div> < div className = "axis__popover__description" style = { { background : side . iconColor } } > { meta . description } < /div> < /div>); } ; export default Axis ;