/
createTodoFilter.ts
40 lines (34 loc) · 1.11 KB
/
createTodoFilter.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { Widget, WidgetFactory, WidgetProperties, DNode } from '@dojo/widgets/interfaces';
import createWidgetBase from '@dojo/widgets/createWidgetBase';
import { v } from '@dojo/widgets/d';
export interface TodoFilterProperties extends WidgetProperties {
activeFilter?: string;
};
export type TodoFilter = Widget<TodoFilterProperties>;
export type TodoFilterFactory = WidgetFactory<TodoFilter, TodoFilterProperties>
function createFilterItems(activeFilter: string): DNode[] {
const filters = [ 'all', 'active', 'completed' ];
return filters.map((filterItem) => {
const label = filterItem[0].toUpperCase() + filterItem.substring(1);
return v('li', {}, [
v('a', {
innerHTML: label,
href: `#${filterItem}`,
classes: {
selected: activeFilter === filterItem
}
})
]);
});
}
const createTodoFilter: TodoFilterFactory = createWidgetBase.mixin({
mixin: {
tagName: 'ul',
classes: [ 'filters' ],
getChildrenNodes: function(this: TodoFilter): DNode[] {
const activeFilter = this.properties.activeFilter || '';
return createFilterItems(activeFilter);
}
}
});
export default createTodoFilter;