generated from mpetuska/template-kmp-library
-
-
Notifications
You must be signed in to change notification settings - Fork 11
/
MDCIconButton.kt
72 lines (68 loc) · 1.96 KB
/
MDCIconButton.kt
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
package showcases
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import dev.petuska.katalog.runtime.Showcase
import dev.petuska.katalog.runtime.layout.InteractiveShowcase
import dev.petuska.kmdc.icon.button.Icon
import dev.petuska.kmdc.icon.button.MDCIconButton
import dev.petuska.kmdc.icon.button.MDCIconButtonAttrsScope
import dev.petuska.kmdc.icon.button.onChange
import dev.petuska.kmdc.touch.target.MDCTouchTarget
import dev.petuska.kmdcx.icons.MDCIcon
import dev.petuska.kmdcx.icons.mdcIcon
import org.jetbrains.compose.web.attributes.disabled
import org.jetbrains.compose.web.dom.Text
import sandbox.control.BooleanControl
import sandbox.control.ChoiceControl
private class MDCIconButtonVM {
var disabled by mutableStateOf(false)
var on by mutableStateOf<Boolean?>(true)
var touch by mutableStateOf(false)
}
@Composable
@Showcase(id = "MDCIconButton")
fun MDCIconButton() = InteractiveShowcase(
viewModel = { MDCIconButtonVM() },
controls = {
ChoiceControl(
title = "On",
options = mapOf(
"true" to true,
"false" to false,
"null" to null,
),
selected = ::on
)
BooleanControl("Disabled", ::disabled)
BooleanControl("Touch", ::touch)
},
) {
MDCTouchTarget {
MDCIconButton(
on = on,
touch = touch,
attrs = {
if (disabled) disabled()
if (on == null) mdcIcon()
registerEvents()
onChange { on = it.detail.isOn }
}
) {
if (on != null) {
Icon(on = true, attrs = { mdcIcon() }) {
Text(MDCIcon.Favorite.type)
}
Icon(on = false, attrs = { mdcIcon() }) {
Text(MDCIcon.FavoriteBorder.type)
}
} else {
Text(MDCIcon.Favorite.type)
}
}
}
}
private fun MDCIconButtonAttrsScope<*>.registerEvents() {
onChange { console.log("MDCIconButton#onChange", it.detail) }
}