Merge branch 'master' of https://github.com/TechExMachina/react-event…

…-timeline into TechExMachina-master
rcdexta · Feb 20, 2018 · 4c4445e · 4c4445e
2 parents e4df4ee + b4f17ac
commit 4c4445e
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -63,10 +63,11 @@ Please refer to [story description](https://github.com/rcdexta/react-event-timel
 
 This is the wrapper component that creates the infinite vertical timeline
 
-| Name      | Type   | Description                              |
-| --------- | ------ | ---------------------------------------- |
-| className | string | The css class name of timeline container|
-| style     | object | Override inline styles of timeline container |
+| Name           | Type   | Description                              |
+| -------------- | ------ | ---------------------------------------- |
+| className      | string | The css class name of timeline container|
+| style          | object | Override inline styles of timeline container |
+| bubblePosition | string | Display the timeline at `right` or `left`. Default: `left` |
 
 ### TimelineEvent
 

diff --git a/components/Timeline.js b/components/Timeline.js
@@ -3,13 +3,15 @@ import PropTypes from 'prop-types'
 import s from './styles'
 
 class Timeline extends Component {
-
   render () {
+    const { bubblePosition = 'left', children, style = {}, ...otherProps } = this.props
+    const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { bubblePosition }))
+    const leftOrRight = (bubblePosition === 'right') ? {...s['containerBefore--right']} : {...s['containerBefore--left']}
     return (
       <div>
-        <section style={s.container} {...this.props}>
-          <div style={s.containerBefore} />
-          {this.props.children}
+        <section style={{...s.container, ...style}} {...otherProps}>
+          <div style={{...s.containerBefore, ...leftOrRight}} />
+          {childrenWithProps}
           <div style={s.containerAfter} />
         </section >
       </div>
@@ -18,7 +20,9 @@ class Timeline extends Component {
 }
 
 Timeline.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  bubblePosition: PropTypes.string,
+  style: PropTypes.object
 }
 
 export default Timeline
diff --git a/components/TimelineEvent.js b/components/TimelineEvent.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 import s from './styles'
 
 class TimelineEvent extends Component {
-
-  mergeNotificationStyle(iconColor, bubbleStyle) {
+  mergeNotificationStyle(iconColor, bubbleStyle, bubblePosition) {
     const iconColorStyle = iconColor ? {...s.eventType, ...{color: iconColor, borderColor: iconColor}} : s.eventType
-    return {...iconColorStyle, ...bubbleStyle}
+    const leftOrRight = (bubblePosition === 'right') ? {...s['eventType--right']} : {...s['eventType--left']}
+    return {...iconColorStyle, ...bubbleStyle, ...leftOrRight}
   }
 
   mergeContentStyle(contentStyle) {
@@ -44,11 +44,14 @@ class TimelineEvent extends Component {
       cardHeaderStyle,
       titleStyle,
       subtitleStyle,
+      bubblePosition,
       ...otherProps
     } = this.props
+    const leftOrRightEvent = (bubblePosition === 'right') ? {...s['event--right']} : {...s['event--left']}
+    const leftOrRightButton = (bubblePosition === 'left') ? {...s['actionButtons--right']} : {...s['actionButtons--left']}
     return (
-      <div style={s.event}>
-        <div style={this.mergeNotificationStyle(iconColor, bubbleStyle)}>
+      <div style={{...s.event, ...leftOrRightEvent}}>
+        <div style={this.mergeNotificationStyle(iconColor, bubbleStyle, bubblePosition)}>
           <span style={{...s.materialIcons, ...iconStyle}}>
             {icon}
           </span>
@@ -67,7 +70,7 @@ class TimelineEvent extends Component {
               <div style={{...s.subtitle, ...subtitleStyle}}>
                 {subtitle}
               </div>}
-            <div style={s.actionButtons}>
+            <div style={{...s.actionButtons, ...leftOrRightButton}}>
               {buttons}
             </div>
           </div>
@@ -94,6 +97,7 @@ TimelineEvent.propTypes = {
   iconColor: PropTypes.string,
   iconStyle: PropTypes.object,
   bubbleStyle: PropTypes.object,
+  bubblePosition: PropTypes.string,
   contentStyle: PropTypes.object,
   cardHeaderStyle: PropTypes.object,
   style: PropTypes.object,
@@ -109,7 +113,8 @@ TimelineEvent.defaultProps = {
   cardHeaderStyle: {},
   style: {},
   titleStyle: {},
-  subtitleStyle: {}
+  subtitleStyle: {},
+  bubblePosition: 'left'
 }
 
 export default TimelineEvent
diff --git a/components/styles.js b/components/styles.js
@@ -12,20 +12,32 @@ let style = {
     content: '',
     position: 'absolute',
     top: 0,
-    left: 18,
     height: '100%',
     width: 2,
     background: '#a0b2b8'
   },
+  'containerBefore--left': {
+    left: '16px'
+  },
+  'containerBefore--right': {
+    right: '14px'
+  },
   containerAfter: {
     content: '',
     display: 'table',
     clear: 'both'
   },
   event: {
     position: 'relative',
-    margin: '10px 0',
-    paddingLeft: 45
+    margin: '10px 0'
+  },
+  'event--left': {
+    paddingLeft: 45,
+    textAlign: 'left'
+  },
+  'event--right': {
+    paddingRight: 45,
+    textAlign: 'right'
   },
   eventAfter: {
     clear: 'both',
@@ -35,7 +47,6 @@ let style = {
   eventType: {
     position: 'absolute',
     top: 0,
-    left: 0,
     borderRadius: '50%',
     width: 30,
     height: 30,
@@ -44,6 +55,12 @@ let style = {
     border: '2px solid #6fba1c',
     display: 'flex'
   },
+  'eventType--left': {
+    left: 0
+  },
+  'eventType--right': {
+    right: 0
+  },
   materialIcons: {
     display: 'flex',
     width: 32,
@@ -85,10 +102,16 @@ let style = {
     display: 'table'
   },
   actionButtons: {
-    float: 'right',
-    textAlign: 'right',
     marginTop: -20
   },
+  'actionButtons--left': {
+    float: 'left',
+    textAlign: 'left'
+  },
+  'actionButtons--right': {
+    float: 'right',
+    textAlign: 'right'
+  },
   card: {
     boxShadow: 'rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px',
     backgroundColor: 'rgb(255, 255, 255)'