From b0b4ee24993b31d32dbd116d32f7d87a0dbb55ed Mon Sep 17 00:00:00 2001
From: RC <rc.chandru@gmail.com>
Date: Tue, 20 Feb 2018 13:52:29 +0530
Subject: [PATCH] Change bubblePosition prop to Orientation

---
 README.md                   |  2 +-
 components/Timeline.js      |  8 ++++----
 components/TimelineEvent.js | 16 ++++++++--------
 stories/App.story.js        | 29 +++++++++++++++++++++++++++++
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index e1bc94c..1f47385 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,7 @@ This is the wrapper component that creates the infinite vertical timeline
 | -------------- | ------ | ---------------------------------------- |
 | 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` |
+| orientatoin    | string | Display the timeline on `right` or `left`. Default: `left` |
 
 ### TimelineEvent
 
diff --git a/components/Timeline.js b/components/Timeline.js
index 29b9139..e4f7a59 100644
--- a/components/Timeline.js
+++ b/components/Timeline.js
@@ -4,9 +4,9 @@ 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']}
+    const { orientation = 'left', children, style = {}, ...otherProps } = this.props
+    const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { orientation }))
+    const leftOrRight = (orientation === 'right') ? {...s['containerBefore--right']} : {...s['containerBefore--left']}
     return (
       <div>
         <section style={{...s.container, ...style}} {...otherProps}>
@@ -21,7 +21,7 @@ class Timeline extends Component {
 
 Timeline.propTypes = {
   children: PropTypes.node.isRequired,
-  bubblePosition: PropTypes.string,
+  orientation: PropTypes.string,
   style: PropTypes.object
 }
 
diff --git a/components/TimelineEvent.js b/components/TimelineEvent.js
index 239c4ba..4f11496 100644
--- a/components/TimelineEvent.js
+++ b/components/TimelineEvent.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import s from './styles'
 
 class TimelineEvent extends Component {
-  mergeNotificationStyle(iconColor, bubbleStyle, bubblePosition) {
+  mergeNotificationStyle(iconColor, bubbleStyle, orientation) {
     const iconColorStyle = iconColor ? {...s.eventType, ...{color: iconColor, borderColor: iconColor}} : s.eventType
-    const leftOrRight = (bubblePosition === 'right') ? {...s['eventType--right']} : {...s['eventType--left']}
+    const leftOrRight = (orientation === 'right') ? {...s['eventType--right']} : {...s['eventType--left']}
     return {...iconColorStyle, ...bubbleStyle, ...leftOrRight}
   }
 
@@ -44,14 +44,14 @@ class TimelineEvent extends Component {
       cardHeaderStyle,
       titleStyle,
       subtitleStyle,
-      bubblePosition,
+      orientation,
       ...otherProps
     } = this.props
-    const leftOrRightEvent = (bubblePosition === 'right') ? {...s['event--right']} : {...s['event--left']}
-    const leftOrRightButton = (bubblePosition === 'left') ? {...s['actionButtons--right']} : {...s['actionButtons--left']}
+    const leftOrRightEvent = (orientation === 'right') ? {...s['event--right']} : {...s['event--left']}
+    const leftOrRightButton = (orientation === 'left') ? {...s['actionButtons--right']} : {...s['actionButtons--left']}
     return (
       <div style={{...s.event, ...leftOrRightEvent}}>
-        <div style={this.mergeNotificationStyle(iconColor, bubbleStyle, bubblePosition)}>
+        <div style={this.mergeNotificationStyle(iconColor, bubbleStyle, orientation)}>
           <span style={{...s.materialIcons, ...iconStyle}}>
             {icon}
           </span>
@@ -97,7 +97,7 @@ TimelineEvent.propTypes = {
   iconColor: PropTypes.string,
   iconStyle: PropTypes.object,
   bubbleStyle: PropTypes.object,
-  bubblePosition: PropTypes.string,
+  orientation: PropTypes.string,
   contentStyle: PropTypes.object,
   cardHeaderStyle: PropTypes.object,
   style: PropTypes.object,
@@ -114,7 +114,7 @@ TimelineEvent.defaultProps = {
   style: {},
   titleStyle: {},
   subtitleStyle: {},
-  bubblePosition: 'left'
+  orientation: 'left'
 }
 
 export default TimelineEvent
diff --git a/stories/App.story.js b/stories/App.story.js
index c294a79..6ae706d 100644
--- a/stories/App.story.js
+++ b/stories/App.story.js
@@ -46,6 +46,35 @@ storiesOf('Timeline', module)
       </Timeline>
     )
   )
+.add(
+	'Orientation',
+	withInfo('Timeline view with the other orientation')(() =>
+		<Timeline orientation='right'>
+			<TimelineEvent
+				title='John Doe sent a SMS'
+				createdAt='2016-09-12 10:06 PM'
+				icon={<i className='material-icons md-18'>textsms</i>}
+				iconColor='#6fba1c'
+			>
+				I received the payment for $543. Should be shipping the item within a couple of hours. Thanks for the order!
+			</TimelineEvent>
+			<TimelineEvent
+				title='You sent an email to John Doe'
+				createdAt='2016-09-11 09:06 AM'
+				icon={<i className='material-icons md-18'>email</i>}
+				iconColor='#03a9f4'
+			>
+				<p>Subject: Any updates?</p>
+				<p>
+					Like we talked, you said that you would share the shipment details? This is an urgent order and so I am
+					losing patience. Can you expedite the process and pls do share the details asap. Consider this a gentle
+					reminder if you are on track already!
+				</p>
+				<p>- Maya</p>
+			</TimelineEvent>
+		</Timeline>
+	)
+)
   .add(
     'Condensed Timeline',
     withInfo('Use TimelineBlip to display micro events')(() =>