import React , { useCallback , useMemo } from 'react' ; import { TimelineVerticalModel } from '../../models/TimelineVerticalModel' ; import { TimelineOutline } from '../timeline-elements/timeline-outline/timeline-outline' ; import TimelineVerticalItem from './timeline-vertical-item' ; import { TimelineVerticalWrapper } from './timeline-vertical.styles' ; const TimelineVertical = ( { alternateCards = true , autoScroll , contentDetailsChildren , enableOutline , hasFocus , iconChildren , items , mode , onClick , onElapsed , onOutlineSelection , slideShowRunning , theme , } ) => { const handleOnActive = useCallback ( ( offset , wrapperOffset , height ) => { autoScroll ( { pointOffset : offset , contentHeight : height , contentOffset : wrapperOffset , } ) ; } , [ ] ) ; const handleOnShowMore = useCallback ( ( ) => { } , [ ] ) ; const outlineItems = useMemo ( ( ) => items . map ( ( item ) => ( { id : Math . random ( ) . toString ( 16 ) . slice ( 2 ) , name : item . title , } ) ) , [ items . length ] ) ; return ( < TimelineVerticalWrapper data - testid = "tree-main" role = "list" > { enableOutline && ( < TimelineOutline theme = { theme } mode = { mode } items = { outlineItems } onSelect = { onOutlineSelection } / > ) } { items . map ( ( item , index ) => { let className = '' ; if ( alternateCards ) { className = index % 2 === 0 ? 'left' : 'right' ; } else { className = 'right' ; } const contentDetails = ( contentDetailsChildren && ( contentDetailsChildren as React . ReactNode [ ] ) [ index ] ) || null ; const customIcon = ( iconChildren && ( iconChildren as React . ReactNode [ ] ) [ index ] ) || null ; return ( < TimelineVerticalItem { ... item } alternateCards = { alternateCards } className = { className } contentDetailsChildren = { contentDetails } iconChild = { customIcon } hasFocus = { hasFocus } index = { index } key = { item . id } onActive = { handleOnActive } onClick = { onClick } onElapsed = { onElapsed } onShowMore = { handleOnShowMore } slideShowRunning = { slideShowRunning } theme = { theme } / > ) ; } ) } < /TimelineVerticalWrapper>); } ; export default TimelineVertical ;