2016-11-23 20:29:54 +00:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import { h, render, Component } from 'preact';
|
2018-05-01 14:06:17 +00:00
|
|
|
import { bind } from 'decko';
|
2016-11-23 20:29:54 +00:00
|
|
|
|
2016-12-24 08:42:05 +00:00
|
|
|
const availablePeriods = [
|
2016-11-24 12:10:40 +00:00
|
|
|
{
|
2018-05-01 14:06:17 +00:00
|
|
|
id: 'day',
|
|
|
|
label: 'Today'
|
2016-11-24 12:10:40 +00:00
|
|
|
},
|
|
|
|
{
|
2018-05-01 14:06:17 +00:00
|
|
|
id: 'week',
|
|
|
|
label: 'This week'
|
2016-11-24 12:10:40 +00:00
|
|
|
},
|
|
|
|
{
|
2018-05-01 14:06:17 +00:00
|
|
|
id: 'month',
|
|
|
|
label: 'This month'
|
2016-11-24 12:10:40 +00:00
|
|
|
},
|
|
|
|
{
|
2018-05-01 14:06:17 +00:00
|
|
|
id: 'year',
|
|
|
|
label: 'This year'
|
2016-11-24 12:10:40 +00:00
|
|
|
}
|
|
|
|
]
|
|
|
|
|
2016-11-23 20:29:54 +00:00
|
|
|
class DatePicker extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
|
|
|
|
this.state = {
|
2018-05-01 14:06:17 +00:00
|
|
|
period: this.props.value
|
2016-11-23 20:29:54 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-01 14:06:17 +00:00
|
|
|
@bind
|
2016-11-23 20:29:54 +00:00
|
|
|
setPeriod(e) {
|
2018-05-01 14:06:17 +00:00
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
var nextState = {
|
|
|
|
period: e.target.dataset.value
|
|
|
|
}
|
|
|
|
|
2016-11-24 12:10:40 +00:00
|
|
|
if(this.state.period != nextState.period) {
|
|
|
|
this.setState(nextState)
|
2018-05-01 14:06:17 +00:00
|
|
|
this.props.onChange(nextState.period);
|
2016-11-24 12:10:40 +00:00
|
|
|
}
|
2016-11-23 20:29:54 +00:00
|
|
|
}
|
|
|
|
|
2018-05-01 14:06:17 +00:00
|
|
|
render(props, state) {
|
|
|
|
const links = availablePeriods.map((p) => {
|
|
|
|
let className = ( p.id == state.period ) ? 'active' : '';
|
|
|
|
return <li class={className} ><a href="#" data-value={p.id} onClick={this.setPeriod}>{p.label}</a></li>
|
2016-11-23 20:29:54 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
2018-05-01 14:06:17 +00:00
|
|
|
<ul>
|
|
|
|
{links}
|
|
|
|
</ul>
|
2016-11-23 20:29:54 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default DatePicker
|