/
Timeline.js
37 lines (33 loc) · 1.16 KB
/
Timeline.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import s from './styles'
class Timeline extends Component {
render () {
const { orientation = 'left', children, lineColor, lineStyle, style, ...otherProps } = this.props
const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { orientation }))
let leftOrRight = (orientation === 'right') ? { ...s['containerBefore--right'] } : { ...s['containerBefore--left'] }
let lineAppearance = { ...leftOrRight, ...lineStyle }
lineAppearance = lineColor ? { ...lineAppearance, background: lineColor } : lineAppearance
return (
<div>
<section style={{ ...s.container, ...style }} {...otherProps}>
<div style={{ ...s.containerBefore, ...lineAppearance }} />
{childrenWithProps}
<div style={s.containerAfter} />
</section >
</div>
)
}
}
Timeline.propTypes = {
children: PropTypes.node.isRequired,
orientation: PropTypes.string,
style: PropTypes.object,
lineColor: PropTypes.string,
lineStyle: PropTypes.object
}
Timeline.defaultProps = {
style: {},
lineStyle: {}
}
export default Timeline