fix(): Pass event handler props to underlying DOM

#2
rcdexta · Nov 8, 2016 · e5cf1a2 · e5cf1a2
1 parent 059e665
commit e5cf1a2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/components/TimelineEvent.js b/components/TimelineEvent.js
@@ -22,15 +22,16 @@ class TimelineEvent extends Component {
   }
 
   render () {
+    const {createdAt, title, contentStyle, buttons, icon, iconColor, ...otherProps} = this.props
     return <div style={s.event}>
       <div style={this.eventNotificationStyle()}>
-        <span style={s.materialIcons}>{this.props.icon}</span>
+        <span style={s.materialIcons}>{icon}</span>
       </div>
-      <div style={s.eventContent}>
+      <div style={s.eventContent} {...otherProps}>
         <div style={s.eventContentBefore} />
-        <div style={s.time}>{this.props.createdAt}</div>
-        <div style={s.title}>{this.props.title}</div>
-        <div style={s.actionButtons}>{this.props.buttons}</div>
+        <div style={s.time}>{createdAt}</div>
+        <div style={s.title}>{title}</div>
+        <div style={s.actionButtons}>{buttons}</div>
         <div style={{clear: 'both', marginBottom: 10}} />
         <div style={this.contentStyle()}>
           {this.props.children}

diff --git a/stories/App.story.js b/stories/App.story.js
@@ -62,7 +62,7 @@ storiesOf('Timeline', module)
                            iconColor="#6fba1c"
             >
                 <p>Please check if this image is good for printing</p>
-                <img src={Image} />
+                <img src={Image}/>
             </TimelineEvent>
         </Timeline>
     ))
@@ -78,4 +78,18 @@ storiesOf('Timeline', module)
             </TimelineEvent>
         </Timeline>
     ))
+    .add('Event handlers', () => {
+        function sayClicked() {
+            alert('You clicked here!')
+        }
+        return <Timeline>
+            <TimelineEvent title="John Doe sent you a click bomb"
+                           createdAt="2016-09-12 10:06 PM"
+                           icon={<i className="material-icons md-18">textsms</i>}
+                           iconColor="#6fba1c"
+                           onClick={sayClicked}>
+                Clicking this should raise an alert!
+            </TimelineEvent>
+        </Timeline>
+    })