Skip to content

Commit

Permalink
feat($browser): Update react libraries. Add TimelineBlip component
Browse files Browse the repository at this point in the history
TimelineEvent might be a overkill for denoting simple events. Use a TimelineBlip in those cases
  • Loading branch information
rcdexta committed Jul 5, 2017
1 parent e4b4ea8 commit d4081a7
Show file tree
Hide file tree
Showing 8 changed files with 413 additions and 296 deletions.
37 changes: 26 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,30 +71,45 @@ This is the wrapper component that creates the infinite vertical timeline
Each event in the timeline will be represented by the `TimelineEvent` component. There can be multiple repeating instances of this component inside Timeline wrapper
| Name | Type | Description |
| ------------ | ------ | ---------------------------------------- |
| title | node | The title of the event. Can be string or any DOM element node(s) |
| createdAt | node | The time at which the event occurred. Can be datetime string or any DOM element node(s) |
| icon | node | The icon to show as event lable. Can be a SVG or font icon |
| iconColor | string | CSS color code for icon |
| iconStyle | node | Custom CSS for the icon |
| buttons | node | Action buttons to display to the right of the event content |
| contentStyle | node | Override content style |
| style | node | Override style for the entire event container |
| container | string | Optional value `card` will render event as a Card |
### TimelineBlip
Use this component if your event is too small and can be described in a single line
| Name | Type | Description |
| --------- | ------ | ---------------------------------------- |
| title | node | The title of the event. Can be string or any DOM element node(s) |
| createdAt | node | The time at which the event occurred. Can be datetime string or any DOM element node(s) |
| icon | node | The icon to show as event lable. Can be a SVG or font icon |
| iconColor | string | CSS color code for icon |
| iconStyle | node | Custom CSS for the icon |
| buttons | node | Action buttons to display to the right of the event content |
| contentStyle | node | Override content style |
| style | node | Override style for the entire event container |
| container | string | Optional value `card` will render event as a Card |
| iconStyle | node | Custom CSS for the icon |
| style | node | Override style for the entire event container |
Refere to Condensed Timeline in Storybook for examples of using this component
## Development
This project recommends using [react-storybook](https://github.com/kadirahq/react-storybook) as a UI component development environment. Use the following scripts for your development workflow:
1. `yarn storybook`: Start developing by using storybook
1. `yarn lint` : Lint all js files
1. `yarn lintfix` : fix linting errors of all js files
1. `yarn build`: transpile all ES6 component files into ES5(commonjs) and put it in `dist` directory
1. `yarn docs`: create static build of storybook in `docs` directory that can be used for github pages
2. `yarn lint` : Lint all js files
3. `yarn lintfix` : fix linting errors of all js files
4. `yarn build`: transpile all ES6 component files into ES5(commonjs) and put it in `dist` directory
5. `yarn docs`: create static build of storybook in `docs` directory that can be used for github pages
The storybook artefacts can be found in `stories` folder. Run `npm run storybook` and you should see your code changes live reloaded on the browser
Also use [semantic-release](https://github.com/semantic-release/semantic-release) to automate release to npm. Use `npm run commit` to commit your changes and then `npm run semantic-release` to automate deployment and publishing to npm repository.
## License
Expand Down
46 changes: 46 additions & 0 deletions components/TimelineBlip.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import s from './styles'

class TimelineBlip extends Component {

mergeNotificationStyle(iconColor) {
return iconColor ? { ...s.eventType, ...{ color: iconColor, borderColor: iconColor } } : s.eventType
}

iconStyle(iconStyle) {
return { ...s.materialIcons, iconStyle }
}

render() {
const { title, iconStyle, icon, iconColor, ...otherProps } = this.props
return (
<div style={{...s.event, marginBottom: 50}}>
<div style={this.mergeNotificationStyle(iconColor)}>
<span style={this.iconStyle(iconStyle)}>{icon}</span>
</div>
<div {...otherProps} style={s.blipStyle}>
<div>{title}</div>
</div>
<div style={s.eventAfter} />
</div>
)
}
}

TimelineBlip.propTypes = {
title: PropTypes.node.isRequired,
icon: PropTypes.node,
iconColor: PropTypes.string,
iconStyle: PropTypes.object,
style: PropTypes.object
}

TimelineBlip.defaultProps = {
createdAt: undefined,
iconStyle: {},
contentStyle: {},
style: {}
}

export default TimelineBlip
61 changes: 31 additions & 30 deletions components/TimelineEvent.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
import React, {Component} from 'react'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import s from './styles'

class TimelineEvent extends Component {

mergeNotificationStyle(iconColor) {
return iconColor ? {...s.eventType, ...{color: iconColor, borderColor: iconColor}} : s.eventType
return iconColor ? { ...s.eventType, ...{ color: iconColor, borderColor: iconColor } } : s.eventType
}

mergeContentStyle(contentStyle) {
const messageStyle = this.showAsCard() ? s.cardBody : s.message
return contentStyle ? {...messageStyle, ...contentStyle} : messageStyle
return contentStyle ? { ...messageStyle, ...contentStyle } : messageStyle
}

timeStyle() {
return this.showAsCard() ? {...s.time, color: '#fff'} : s.time
return this.showAsCard() ? { ...s.time, color: '#fff' } : s.time
}

showAsCard() {
const {container} = this.props
const { container } = this.props
return container === 'card'
}

containerStyle() {
const {style} = this.props
const containerStyle = {...s.eventContainer, ...style}
return this.showAsCard() ? {...containerStyle, ...s.card} : containerStyle
const { style } = this.props
const containerStyle = { ...s.eventContainer, ...style }
return this.showAsCard() ? { ...containerStyle, ...s.card } : containerStyle
}

iconStyle() {
return {...s.materialIcons, ...this.props.iconStyle}
iconStyle(iconStyle) {
return { ...s.materialIcons, iconStyle }
}

render() {
const {createdAt, title, contentStyle, buttons, icon, iconColor, container, ...otherProps} = this.props
return <div style={s.event}>
<div style={this.mergeNotificationStyle(iconColor)}>
<span style={this.iconStyle()}>{icon}</span>
</div>

<div {...otherProps} style={this.containerStyle()}>
<div style={s.eventContainerBefore} />
<div style={container === 'card' ? s.cardTitle : {}}>
<div style={this.timeStyle()}>{createdAt}</div>
<div>{title}</div>
<div style={s.actionButtons}>{buttons}</div>
const { createdAt, title, contentStyle, iconStyle, buttons, icon, iconColor, container, ...otherProps } = this.props
return (
<div style={s.event}>
<div style={this.mergeNotificationStyle(iconColor)}>
<span style={this.iconStyle(iconStyle)}>{icon}</span>
</div>
<div style={this.mergeContentStyle(contentStyle)}>
{this.props.children}
<div style={s.messageAfter} />
<div {...otherProps} style={this.containerStyle()}>
<div style={s.eventContainerBefore} />
<div style={container === 'card' ? s.cardTitle : {}}>
<div style={this.timeStyle()}>{createdAt}</div>
<div>{title}</div>
<div style={s.actionButtons}>{buttons}</div>
</div>
{this.props.children &&
<div style={this.mergeContentStyle(contentStyle)}>
{this.props.children}
<div style={s.messageAfter} />
</div>}
</div>
<div style={s.eventAfter} />
</div>
<div style={s.eventAfter} />
</div>
)
}

}

TimelineEvent.propTypes = {
Expand All @@ -65,12 +65,13 @@ TimelineEvent.propTypes = {
container: PropTypes.string,
icon: PropTypes.node,
iconColor: PropTypes.string,
iconStyle: PropTypes.string,
iconStyle: PropTypes.object,
contentStyle: PropTypes.object,
style: PropTypes.object
}

TimelineEvent.defaultProps = {
createdAt: undefined,
iconStyle: {},
contentStyle: {},
style: {}
Expand Down
3 changes: 2 additions & 1 deletion components/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Timeline from './Timeline'
import TimelineEvent from './TimelineEvent'
import TimelineBlip from './TimelineBlip'

export {Timeline, TimelineEvent}
export {Timeline, TimelineEvent, TimelineBlip}
5 changes: 5 additions & 0 deletions components/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,11 @@ let style = {
lineHeight: 1.6,
padding: '1.5em 1em',
minHeight: 40
},
blipStyle: {
position: 'absolute',
top: '50%',
marginTop: '9px'
}
}

Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@
},
"homepage": "https://github.com/rcdexta/react-event-timeline",
"devDependencies": {
"@kadira/react-storybook-addon-info": "^3.3.0",
"@kadira/storybook": "^2.24.0",
"@kadira/react-storybook-addon-info": "^3.4.0",
"@kadira/storybook": "^2.35.3",
"@kadira/storybook-addon-actions": "^1.1.1",
"@kadira/storybook-addon-knobs": "^1.3.0",
"@kadira/storybook-addon-options": "^1.0.1",
Expand Down Expand Up @@ -80,8 +80,8 @@
"classnames": "^2.2.3",
"invariant": "^2.0.0",
"prop-types": "^15.5.10",
"react": "^15.0.0",
"react-dom": "^15.0.0"
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"config": {
"commitizen": {
Expand Down
8 changes: 7 additions & 1 deletion stories/App.story.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Component } from 'react'
import { storiesOf } from '@kadira/storybook'

import { Timeline, TimelineEvent } from '../components/index'
import { Timeline, TimelineEvent, TimelineBlip } from '../components/index'
import Image from './sample.jpg'

const globalStyles = {
Expand Down Expand Up @@ -41,6 +41,12 @@ storiesOf('Timeline', module)

</Timeline>
))
.addWithInfo('Condensed Timeline', () => (
<Timeline>
<TimelineBlip title="Remove PropTypes warning" icon={<i className="material-icons md-18">assignment late</i>} iconColor="#6fba1c" />
<TimelineBlip title="John starred this thread" icon={<i className="material-icons md-18">grade</i>} iconColor="#6fba1c" />
</Timeline>
))
.addWithInfo('Action buttons', () => (
<Timeline>
<TimelineEvent
Expand Down
Loading

0 comments on commit d4081a7

Please sign in to comment.