import * as React from 'react' ; import { classes } from '../../helpers' ; import { timelineStyle } from './style' ; export const Timeline = ( props ) => { if ( Array . isArray ( props . children ) ) { return ( < span className = { timelineStyle ( ) } > < div className = { classes ( 'timeline' , `timeline-${ props . position }` ) } > { props . children . map ( ( v , i ) => { const position = getPosition ( i , props . position ) ; return React . cloneElement ( v as React . ReactElement , { position , key : `timeline-item-${ i }` } ) ; } ) } < /div> < /span>); } return ( < span className = { timelineStyle ( ) } > < div className = { classes ( 'timeline' , `timeline-${ props . position }` ) } > { props . children && React . cloneElement ( props . children as React . ReactElement , { position : getPosition ( 0 , props . position ) } ) } < /div> < /span>); } ; const getPosition = ( index , position ) : 'left' | 'right' => { if ( position === 'alternate' ) { return index % 2 === 0 ? 'left' : 'right' ; } return position ; } ; Timeline . defaultProps = { position : 'left' , } ; export interface TimelineProps { children : React . ReactNode ; default position ? : 'right' | 'left' | 'alternate' ; }