import cls from 'classnames' ; import React , { useCallback , useContext , useMemo , useRef } from 'react' ; import { VerticalItemModel } from '../../models/TimelineVerticalModel' ; import { GlobalContext } from '../GlobalContext' ; import TimelineCard from '../timeline-elements/timeline-card-content/timeline-card-content' ; import TimelineItemTitle from '../timeline-elements/timeline-item-title/timeline-card-title' ; import VerticalCircle from './timeline-vertical-circle' ; import { TimelineCardContentWrapper , TimelineTitleWrapper , VerticalItemWrapper , } from './timeline-vertical.styles' ; const VerticalItem = ( props ) => { const contentRef = useRef < HTMLDivElement > ( null ) ; const { active , alternateCards , cardDetailedText , cardSubtitle , cardTitle , url , className , contentDetailsChildren , iconChild , hasFocus , id , media , onActive , onClick , onElapsed , slideShowRunning , theme , title , visible , } = props ; const handleOnActive = ( offset ) => { if ( contentRef . current ) { const { offsetTop , clientHeight } = contentRef . current ; onActive ( offsetTop + offset , offsetTop , clientHeight ) ; } } ; const { cardHeight , mode , flipLayout , timelineCircleDimension , lineWidth , disableClickOnCircle , } = useContext ( GlobalContext ) ; const handleShowMore = useCallback ( ( ) => { setTimeout ( ( ) => { handleOnActive ( 0 ) ; } , 100 ) ; } , [ ] ) ; const Title = useMemo ( ( ) => { return ( < TimelineTitleWrapper className = { className } alternateCards = { alternateCards } mode = { mode } hide = { ! title } flip = { flipLayout } > < TimelineItemTitle title = { title } active = { active } theme = { theme } align = { flipLayout ? 'left' : 'right' } / > < /TimelineTitleWrapper>); } , [ active ] ) ; const verticalItemClass = useMemo ( ( ) => cls ( { [ className ] : true } , 'vertical-item-row' , visible ? 'visible' : '' ) , [ ] ) ; const Content = useMemo ( ( ) => { const contentClass = cls ( 'card-content-wrapper' , visible ? 'visible' : '' , { [ className ] : true , } ) ; return ( < TimelineCardContentWrapper className = { contentClass } alternateCards = { alternateCards } noTitle = { ! title } flip = { flipLayout } > < TimelineCard active = { active } branchDir = { className } content = { cardSubtitle } customContent = { contentDetailsChildren } detailedText = { cardDetailedText } hasFocus = { hasFocus } id = { id } media = { media } onClick = { onClick } onElapsed = { onElapsed } onShowMore = { handleShowMore } slideShowActive = { slideShowRunning } theme = { theme } title = { cardTitle } url = { url } flip = { flipLayout } / > < /TimelineCardContentWrapper>); } , [ hasFocus , slideShowRunning , active ] ) ; const Circle = useMemo ( ( ) => { return ( < VerticalCircle active = { active } alternateCards = { alternateCards } className = { className } id = { id } mode = { mode } onActive = { handleOnActive } onClick = { onClick } slideShowRunning = { slideShowRunning } iconChild = { iconChild } theme = { theme } timelineCircleDimension = { timelineCircleDimension } lineWidth = { lineWidth } disableClickOnCircle = { disableClickOnCircle } / > ) ; } , [ slideShowRunning , active ] ) ; return ( < VerticalItemWrapper alternateCards = { alternateCards } cardHeight = { cardHeight } className = { verticalItemClass } data - testid = "vertical-item-row" key = { id } ref = { contentRef } role = "listitem" > { } { Title } { } { Content } { } { Circle } < /VerticalItemWrapper>); } ; export default VerticalItem ;