mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
34 lines
865 B
JavaScript
34 lines
865 B
JavaScript
/**
|
|
* @fileoverview Percentage of todo achievement.
|
|
*/
|
|
|
|
import React, { PropTypes } from 'react'
|
|
import CSSModules from 'browser/lib/CSSModules'
|
|
import styles from './TodoProcess.styl'
|
|
|
|
const TodoProcess = ({
|
|
todoStatus: {
|
|
total: totalTodo,
|
|
completed: completedTodo
|
|
}
|
|
}) => (
|
|
<div styleName='todo-process' style={{display: totalTodo > 0 ? '' : 'none'}}>
|
|
<div styleName='todo-process-text'>
|
|
<i className='fa fa-fw fa-check-square-o' />
|
|
{completedTodo} of {totalTodo}
|
|
</div>
|
|
<div styleName='todo-process-bar'>
|
|
<div styleName='todo-process-bar--inner' style={{width: parseInt(completedTodo / totalTodo * 100) + '%'}} />
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
TodoProcess.propTypes = {
|
|
todoStatus: {
|
|
total: PropTypes.number.isRequired,
|
|
completed: PropTypes.number.isRequired
|
|
}
|
|
}
|
|
|
|
export default CSSModules(TodoProcess, styles)
|