-
Notifications
You must be signed in to change notification settings - Fork 1
/
todo-app.tsx
102 lines (88 loc) · 2.04 KB
/
todo-app.tsx
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { h, Fragment, render, useCallback, useHook } from 'vdomini'
let inputValue = ''
const main = {
id: 0,
priority: 'chore',
}
type Todo = { id: number; text: string; priority: string }
type PriorityTarget = { id: number; priority: string }
const TodoItem = ({ todo }: { todo: Todo }) => (
<li>
{todo.text} {todo.priority === 'important' && '!!!'}
<PrioritySelect target={todo} onchange={useHook()} />
</li>
)
const PrioritySelect = ({
target,
onchange,
}: {
target: PriorityTarget
onchange?: () => void
}) => {
return (
<>
<PriorityRadio target={target} onchange={onchange} value="important" />
<PriorityRadio target={target} onchange={onchange} value="chore" />
</>
)
}
const PriorityRadio = ({
value,
target,
onchange,
}: {
value: string
target: PriorityTarget
onchange?: () => void
}) => (
<label>
{value}
<input
type="radio"
name={'priority' + target.id}
value={value}
onchange={() => ((target.priority = value), onchange?.())}
checked={target.priority === value}
/>
</label>
)
const inputRef: { current?: HTMLInputElement } = {}
const TodoApp = ({ todos }: { todos: Todo[] }) => {
const addTodo = useCallback(() => {
todos.unshift({
id: Math.random(),
text: inputValue,
priority: main.priority,
})
main.priority = 'chore'
inputValue = ''
inputRef.current!.focus()
})
return (
<>
<h1>My Todo App</h1>
<input
ref={inputRef}
type="string"
value={inputValue}
autofocus
oninput={() => {
inputValue = inputRef.current!.value
}}
onkeydown={(e: KeyboardEvent) => {
e.key === 'Enter' && addTodo()
}}
/>
<PrioritySelect target={main} />
<button onclick={addTodo}>Add Todo</button>
<ul>
{todos.map(todo => (
<TodoItem key={todo.id} todo={todo} />
))}
</ul>
</>
)
}
const todos: Todo[] = []
const update = () => render(<TodoApp todos={todos} />, document.body)
update()