From dedef941dd377a931054b7d4a14df57e4dc6826a Mon Sep 17 00:00:00 2001 From: RC Date: Sat, 12 Jan 2019 11:57:06 -0800 Subject: [PATCH] fix(Bubble Icon Event Handlers): Allow bubble icons to be interactive https://github.com/rcdexta/react-event-timeline/issues/21 --- components/TimelineEvent.js | 65 +- components/styles.js | 1 + stories/App.story.js | 52 +- tests/__snapshots__/Storyshots.test.js.snap | 1529 ++++++++++++------- typings/index.d.ts | 1 + 5 files changed, 1107 insertions(+), 541 deletions(-) diff --git a/components/TimelineEvent.js b/components/TimelineEvent.js index b73e987..365bcf7 100644 --- a/components/TimelineEvent.js +++ b/components/TimelineEvent.js @@ -1,5 +1,6 @@ -import React, { Component } from 'react' import PropTypes from 'prop-types' +import React, { Component } from 'react' + import s from './styles' class TimelineEvent extends Component { @@ -16,8 +17,13 @@ class TimelineEvent extends Component { } mergeNotificationStyle(iconColor, bubbleStyle, orientation) { - const iconColorStyle = iconColor ? { ...s.eventType, ...{ color: iconColor, borderColor: iconColor } } : s.eventType - const leftOrRight = orientation === 'right' ? { ...s['eventType--right'] } : { ...s['eventType--left'] } + const iconColorStyle = iconColor + ? { ...s.eventType, ...{ color: iconColor, borderColor: iconColor } } + : s.eventType + const leftOrRight = + orientation === 'right' + ? { ...s['eventType--right'] } + : { ...s['eventType--left'] } return { ...iconColorStyle, ...leftOrRight, ...bubbleStyle } } @@ -43,7 +49,8 @@ class TimelineEvent extends Component { toggleStyle() { const { container, cardHeaderStyle, collapsible } = this.props - const messageStyle = container === 'card' ? { ...s.cardTitle, ...cardHeaderStyle } : {} + const messageStyle = + container === 'card' ? { ...s.cardTitle, ...cardHeaderStyle } : {} return collapsible ? { ...s.toggleEnabled, ...messageStyle } : messageStyle } @@ -59,7 +66,10 @@ class TimelineEvent extends Component {
) : ( - + … ) @@ -80,22 +90,47 @@ class TimelineEvent extends Component { orientation, collapsible, onClick, + onIconClick, className } = this.props - const leftOrRightEventStyling = orientation === 'right' ? { ...s['event--right'] } : { ...s['event--left'] } - const leftOrRightButtonStyling = orientation === 'left' ? { ...s['actionButtons--right'] } : { ...s['actionButtons--left'] } + const leftOrRightEventStyling = + orientation === 'right' + ? { ...s['event--right'] } + : { ...s['event--left'] } + const leftOrRightButtonStyling = + orientation === 'left' + ? { ...s['actionButtons--right'] } + : { ...s['actionButtons--left'] } return (
-
- {icon} +
+ + {icon} +
-
+
{createdAt &&
{createdAt}
}
{title}
- {subtitle &&
{subtitle}
} -
{buttons}
+ {subtitle && ( +
{subtitle}
+ )} +
+ {buttons} +
{this.props.children && this.renderChildren()}
@@ -125,7 +160,8 @@ TimelineEvent.propTypes = { collapsible: PropTypes.bool, showContent: PropTypes.bool, className: PropTypes.string, - onClick: PropTypes.func + onClick: PropTypes.func, + onIconClick: PropTypes.func } TimelineEvent.defaultProps = { @@ -140,7 +176,8 @@ TimelineEvent.defaultProps = { orientation: 'left', showContent: false, className: '', - onClick: () => {} + onClick: () => {}, + onIconClick: () => {} } export default TimelineEvent diff --git a/components/styles.js b/components/styles.js index 44f22ac..dbe9a4c 100644 --- a/components/styles.js +++ b/components/styles.js @@ -67,6 +67,7 @@ let style = { height: 32, position: 'relative', justifyContent: 'center', + cursor: 'pointer', alignSelf: 'center', alignItems: 'center' }, diff --git a/stories/App.story.js b/stories/App.story.js index 97711cc..bb0ec48 100644 --- a/stories/App.story.js +++ b/stories/App.story.js @@ -1,6 +1,7 @@ -import React, { Component } from 'react' import { storiesOf } from '@storybook/react' -import { Timeline, TimelineEvent, TimelineBlip } from '../components/index' +import React, { Component } from 'react' + +import { Timeline, TimelineBlip, TimelineEvent } from '../components' import Image from './sample.jpg' const globalStyles = { @@ -189,7 +190,7 @@ storiesOf('Timeline', module) { info: 'Timeline event container can be modelled as a card' } ) .add( - 'Event handlers', + 'Content Event handlers', () => ( { + class IconEventDemo extends React.Component { + constructor(props) { + super(props) + this.state = { + active: true, + iconColor: 'red' + } + this.toggleEvent = this.toggleEvent.bind(this) + } + + get icon() { + return this.state.active ? 'stop' : 'play_arrow' + } + + toggleEvent() { + alert('Will toggle event status between play and stop') + this.setState({ + active: !this.state.active, + iconColor: this.state.iconColor === 'red' ? 'green' : 'red' + }) + } + + render() { + return ( + + {this.icon}} + iconColor={this.state.iconColor} + onIconClick={this.toggleEvent} + > + Press icon on the bubble to stop music + + + ) + } + } + return + }, + { info: 'Timeline events can listen to user actions' } + ) .add( 'Event Styling', () => ( diff --git a/tests/__snapshots__/Storyshots.test.js.snap b/tests/__snapshots__/Storyshots.test.js.snap index fa58eeb..6b379cf 100644 --- a/tests/__snapshots__/Storyshots.test.js.snap +++ b/tests/__snapshots__/Storyshots.test.js.snap @@ -69,10 +69,12 @@ exports[`Storyshots Timeline Action buttons 1`] = ` } > `; -exports[`Storyshots Timeline Content with images 1`] = ` +exports[`Storyshots Timeline Content Event handlers 1`] = `
- John Doe sent a SMS + John Doe sent you a click bomb
-

- Please check if this image is good for printing -

- + Clicking this should raise an alert!
- The event can contain any content include media + Timeline events can listen to user actions
@@ -3313,7 +3318,7 @@ exports[`Storyshots Timeline Content with images 1`] = ` } } > - John Doe sent a SMS + John Doe sent you a click bomb " @@ -3407,134 +3412,36 @@ exports[`Storyshots Timeline Content with images 1`] = ` " -
- - - - > - -
-
-
- - < - p - - - - > - -
-
- - Please check if this image is good for printing - -
-
- - </ - p - > -
-
-
- - < - img - - - + +
+    + - src + onClick = - " + { - test-file-stub + onClick - " + } - +
- /> + > + +
+
+ + Clicking this should raise an alert!
`; -exports[`Storyshots Timeline Default View 1`] = ` +exports[`Storyshots Timeline Content with images 1`] = `
- I received the payment for $543. Should be shipping the item within a couple of hours. Thanks for the order! +

+ Please check if this image is good for printing +

+
-
- - - email - - -
-
-
-
-
- 2016-09-11 09:06 AM -
-
- You sent an email to John Doe -
+ /> + +
+
+
+
+
+
+
+ The event can contain any content include media +
+
+
+

+ Story Source +

+ 
+          

+            

+              

+                
+                  <
+                  div
+                
+                
+                  
+                     
+                    
+                      style
+                    
+                    
+                      =
+                      
+                        {
+                        
+                          {
+                          
+                            
+                              backgroundColor
+                            
+                          
+                          : 
+                          
+                            'rgb(255, 234, 234)'
+                          
+                          ,
+                          
+                            
+                              height
+                            
+                          
+                          : 
+                          
+                            '100vh'
+                          
+                          ,
+                          
+                            
+                              fontFamily
+                            
+                          
+                          : 
+                          
+                            'Roboto'
+                          
+                          }
+                        
+                        }
+                      
+                    
+                    
+                  
+                
+                
+                  >
+                
+              

+              

+                

+                  
+                    <
+                    Timeline
+                  
+                  
+                  
+                    >
+                  
+                

+                

+                  

+                    
+                      <
+                      TimelineEvent
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          title
+                        
+                        
+                          =
+                          
+                            "
+                            
+                              John Doe sent a SMS
+                            
+                            "
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          createdAt
+                        
+                        
+                          =
+                          
+                            "
+                            
+                              2016-09-12 10:06 PM
+                            
+                            "
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          icon
+                        
+                        
+                          =
+                          
+                            {
+                            
+                              <i />
+                            
+                            }
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          iconColor
+                        
+                        
+                          =
+                          
+                            "
+                            
+                              #6fba1c
+                            
+                            "
+                          
+                        
+                        

+                      
+                    
+                    
+                      >
+                    
+                  

+                  

+                    

+                      
+                        <
+                        p
+                      
+                      
+                      
+                        >
+                      
+                    

+                    

+                      
+                        Please check if this image is good for printing
+                      
+                    

+                    

+                      
+                        </
+                        p
+                        >
+                      
+                    

+                  

+                  

+                    
+                      <
+                      img
+                    
+                    
+                      
+                         
+                        
+                          src
+                        
+                        
+                          =
+                          
+                            "
+                            
+                              test-file-stub
+                            
+                            "
+                          
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                  

+                    
+                      </
+                      TimelineEvent
+                      >
+                    
+                  

+                

+                

+                  
+                    </
+                    Timeline
+                    >
+                  
+                

+              

+              

+                
+                  </
+                  div
+                  >
+                
+              

+            

+          

+          
+
+
+
+
+
+`; + +exports[`Storyshots Timeline Default View 1`] = ` +
+
+
+
+
+
+
+
+ + + textsms + + +
+
+
+
+
+ 2016-09-12 10:06 PM +
+
+ John Doe sent a SMS +
+
+
+
+ I received the payment for $543. Should be shipping the item within a couple of hours. Thanks for the order! +
+
+
+
+
+
+
+ + + email + + +
+
+
+
+
+ 2016-09-11 09:06 AM +
+
+ You sent an email to John Doe +
`; -exports[`Storyshots Timeline Event handlers 1`] = ` +exports[`Storyshots Timeline Icon Event handlers 1`] = `
- textsms + stop
@@ -5798,7 +6504,7 @@ exports[`Storyshots Timeline Event handlers 1`] = `
- John Doe sent you a click bomb + Playing Beethoven's Moonlight Sonata
- Clicking this should raise an alert! + Press icon on the bubble to stop music
{ - { - - - backgroundColor - - - : - - 'rgb(255, 234, 234)' - - , - - - height - - - : - - '100vh' - - , - - - fontFamily - - - : - - 'Roboto' - - } - - } - - - - - - - > - -
-
-
- - < - Timeline - - - - > - -
-
-
- - < - TimelineEvent - - - - -
-    - - - title - - - = - - " + { + - John Doe sent you a click bomb + backgroundColor - " - - - - -
-    - - - createdAt - - - = + : - " - - 2016-09-12 10:06 PM - - " - - - - - -
-    - - - icon - - - = - - { + 'rgb(255, 234, 234)' + + , + - <i /> + height - } - - - - -
-    - - - iconColor - - - = + : - " + '100vh' + + , + - #6fba1c + fontFamily - " - - - - -
-    - - - onClick - - - = + : - { - - onClick - } + > + 'Roboto' + } -
- - - - > - -
-
- - Clicking this should raise an alert! + -
-
+ + - - </ - TimelineEvent - > - -
-
-
+ > + +
+
+ - + + - </ - Timeline - > - -
+ } + > + /> +
) => void + onIconClick?: (evt: React.MouseEvent) => void } export interface TimelineBlipProps {