a small incremental UI library for the web
javascript
web
ui
Show count and clear completed items
+27
-1
+27
-1
demos/todo/todo.tsx
+27
-1
demos/todo/todo.tsx
···
56
56
});
57
57
}
58
58
59
+
function clearComplete() {
60
+
setItems(items => items.filter(it => !it.complete));
61
+
}
62
+
63
+
const completeCount = items.reduce((acc, it) => (it.complete) ? acc + 1 : acc, 0);
64
+
59
65
useStyle(`
60
66
.container {
61
67
display: flex;
62
68
flex-direction: column;
63
69
}
64
70
71
+
.info {
72
+
margin: 8px 4px 0;
73
+
display: flex;
74
+
justify-content: space-between;
75
+
align-items: center;
76
+
}
77
+
78
+
button {
79
+
padding: 1px 2px;
80
+
background-color: transparent;
81
+
border: 1px solid black;
82
+
border-radius: 4px;
83
+
}
84
+
button:active { opacity: 40%; }
85
+
button:disabled { opacity: 40%; }
86
+
65
87
.items {
66
-
margin-top: 8px;
88
+
margin-top: 4px;
67
89
display: flex;
68
90
flex-direction: column;
69
91
border: 1px solid black;
···
74
96
return (
75
97
<div class="container">
76
98
<ItemInput addItem={name => setItems(items => [...items, makeItem(name)])} />
99
+
<div class="info">
100
+
<div>{completeCount} items completed</div>
101
+
<button onClick={clearComplete}>Clear completed</button>
102
+
</div>
77
103
<div class="items">{items.map(item => <Item item={item} toggleComplete={toggleComplete} />)}</div>
78
104
</div>
79
105
);