This repository has been archived by the owner on Feb 10, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
LabeledCheckboxes.tsx
67 lines (55 loc) · 1.71 KB
/
LabeledCheckboxes.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
import { Lens } from 'monocle-ts'
import * as React from 'react'
import { cmd } from '../src'
import { Html } from '../src/React'
// --- Flags
export type Flags = Model
export const flags: Flags = {
notifications: false,
autoplay: false,
location: false
}
// --- Model
export type Model = {
notifications: boolean
autoplay: boolean
location: boolean
}
export function init(flags: Flags): [Model, cmd.Cmd<Msg>] {
return [flags, cmd.none]
}
// --- Messages
export type Msg = { type: 'ToggleNotifications' } | { type: 'ToggleAutoplay' } | { type: 'ToggleLocation' }
// --- Update
const notificationsLens = Lens.fromProp<Model>()('notifications')
const autoplayLens = Lens.fromProp<Model>()('autoplay')
const locationLens = Lens.fromProp<Model>()('location')
const toggle = (b: boolean): boolean => !b
export function update(msg: Msg, model: Model): [Model, cmd.Cmd<Msg>] {
switch (msg.type) {
case 'ToggleNotifications':
return [notificationsLens.modify(toggle)(model), cmd.none]
case 'ToggleAutoplay':
return [autoplayLens.modify(toggle)(model), cmd.none]
case 'ToggleLocation':
return [locationLens.modify(toggle)(model), cmd.none]
}
}
// --- View
export function view(_: Model): Html<Msg> {
return dispatch => (
<fieldset>
{checkbox({ type: 'ToggleNotifications' as const }, 'Email Notifications')(dispatch)}
{checkbox({ type: 'ToggleAutoplay' as const }, 'Video Autoplay')(dispatch)}
{checkbox({ type: 'ToggleLocation' as const }, 'Use Location')(dispatch)}
</fieldset>
)
}
function checkbox<msg>(msg: msg, label: string): Html<msg> {
return dispatch => (
<label>
<input type="checkbox" onClick={() => dispatch(msg)} />
{label}
</label>
)
}