51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
var Component = require('../../../component')
|
|
var html = require('nanohtml')
|
|
|
|
var clearButton = require('./clear-button')
|
|
var filterButton = require('./filter-button')
|
|
|
|
module.exports = class Footer extends Component {
|
|
constructor (name, state, emit) {
|
|
super(name)
|
|
this.state = state
|
|
this.emit = emit
|
|
|
|
this.local = this.state.components.footer = {}
|
|
this.setState()
|
|
}
|
|
|
|
setState () {
|
|
this.local.rawTodos = this.state.todos.clock
|
|
this.local.rawHref = this.state.href
|
|
|
|
this.local.filter = this.state.href.replace(/^\//, '') || ''
|
|
this.local.activeCount = this.state.todos.active.length
|
|
this.local.hasDone = this.state.todos.done.length || null
|
|
}
|
|
|
|
update () {
|
|
if (this.local.rawTodos !== this.state.todos.clock ||
|
|
this.local.rawHref !== this.state.href) {
|
|
this.setState()
|
|
return true
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
|
|
createElement () {
|
|
return html`<footer class="footer">
|
|
<span class="todo-count">
|
|
<strong>${this.local.activeCount}</strong>
|
|
item${this.state.todos.all === 1 ? '' : 's'} left
|
|
</span>
|
|
<ul class="filters">
|
|
${filterButton('All', '', this.local.filter, this.emit)}
|
|
${filterButton('Active', 'active', this.local.filter, this.emit)}
|
|
${filterButton('Completed', 'completed', this.local.filter, this.emit)}
|
|
</ul>
|
|
${this.local.hasDone && clearButton(this.emit)}
|
|
</footer>`
|
|
}
|
|
}
|