import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import _isArrayLikeObject from 'lodash/isArrayLikeObject' ; import TimelineStep , { TimelineStepProps } from './TimelineStep' ; import TimelineStepDetail , { TimelineStepDetailProps } from './TimelineStepDetail' ; import TimelineStepHeading , { TimelineStepHeadingProps } from './TimelineStepHeading' ; import { Timeline as _Timeline } from './styled' ; export type LocalTimelineProps = { activeStep ? : string ; children : React . ReactNode ; progressColor ? : string ; } ; export type TimelineProps = LocalTimelineProps ; export type TimelineComponents = { Step : React . FunctionComponent < TimelineStepProps > ; StepHeading : React . FunctionComponent < TimelineStepHeadingProps > ; StepDetail : React . FunctionComponent < TimelineStepDetailProps > ; } ; export const Timeline = ( { activeStep , children , progressColor } ) => { if ( ! _isArrayLikeObject ( children ) ) { return null ; } const activeIndexStep = React . Children . toArray ( children ) . findIndex ( ( child ) => child . props . a11yTitleId === activeStep ) ; return ( < _Timeline > { React . Children . map ( children , ( child , index ) => { const _child = child as React . ReactElement < any > ; const color = progressColor ? progressColor : _child . props . progressColor ; return index <= activeIndexStep ? React . cloneElement ( _child , { lineColor : index < activeIndexStep ? color : undefined , progressColor : color || undefined } ) : child ; } ) } < /_Timeline>); } ; Timeline . Step = TimelineStep ; Timeline . StepHeading = TimelineStepHeading ; Timeline . StepDetail = TimelineStepDetail ; export const timelinePropTypes = { activeStep : PropTypes . string , children : PropTypes . node . isRequired , progressColor : PropTypes . string } ; Timeline . propTypes = timelinePropTypes ; export const timelineDefaultProps = { activeStep : undefined , progressColor : undefined } ; Timeline . defaultProps = timelineDefaultProps ; const C = Timeline ; export default C ;