mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-11 00:36:26 +00:00
38 lines
931 B
JavaScript
38 lines
931 B
JavaScript
/**
|
|
* @fileoverview Percentage of todo achievement.
|
|
*/
|
|
|
|
import PropTypes from 'prop-types'
|
|
import React 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: PropTypes.exact({
|
|
total: PropTypes.number.isRequired,
|
|
completed: PropTypes.number.isRequired
|
|
})
|
|
}
|
|
|
|
export default CSSModules(TodoProcess, styles)
|