Browse Source

[compose-dom] Let classes lists get merged instead of overriding earlier calls

pull/696/head 0.4.0-build211
Oleksandr Karpovich 3 years ago committed by Oleksandr Karpovich
parent
commit
2b788ef9df
  1. 3
      web/core/src/jsMain/kotlin/androidx/compose/web/DomApplier.kt
  2. 1
      web/core/src/jsMain/kotlin/androidx/compose/web/attributes/AttrsBuilder.kt
  3. 85
      web/core/src/jsTest/kotlin/elements/AttributesTests.kt

3
web/core/src/jsMain/kotlin/androidx/compose/web/DomApplier.kt

@ -47,6 +47,9 @@ class DomNodeWrapper(val node: Node) {
fun updateProperties(list: List<Pair<(HTMLElement, Any) -> Unit, Any>>) {
val htmlElement = node as? HTMLElement ?: return
if (node.className.isNotEmpty()) node.className = ""
list.forEach { it.first(htmlElement, it.second) }
}

1
web/core/src/jsMain/kotlin/androidx/compose/web/attributes/AttrsBuilder.kt

@ -74,6 +74,5 @@ class ClassesAttrBuilder {
}
val setClassList: (HTMLElement, Array<out String>) -> Unit = { e, classList ->
e.className = ""
e.classList.add(*classList)
}

85
web/core/src/jsTest/kotlin/elements/AttributesTests.kt

@ -6,9 +6,11 @@ import androidx.compose.runtime.setValue
import androidx.compose.web.attributes.disabled
import androidx.compose.web.attributes.forId
import androidx.compose.web.elements.Button
import androidx.compose.web.elements.Div
import androidx.compose.web.elements.Label
import androidx.compose.web.elements.Text
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLDivElement
import runTest
import kotlin.test.Test
import kotlin.test.assertEquals
@ -80,4 +82,87 @@ class AttributesTests {
assertEquals("", btn.getAttribute("disabled"))
}
@Test
fun multipleClassesCallsAddMoreClasses() = runTest {
composition {
Div(attrs = {
classes("a", "b")
classes("c", "d")
}) {}
}
val div = root.firstChild as HTMLDivElement
assertEquals(
expected = "a b c d",
actual = div.getAttribute("class")
)
}
@Test
fun multipleClassesBuildersCallsAddMoreClasses() = runTest {
composition {
Div(attrs = {
classes("a", "b")
classes {
+"c"
+"d"
}
}) {}
}
val div = root.firstChild as HTMLDivElement
assertEquals(
expected = "a b c d",
actual = div.getAttribute("class")
)
}
@Test
fun multipleClassesBuildersCallsAddMoreClasses2() = runTest {
composition {
Div(attrs = {
classes {
+"c"
+"d"
}
classes("a", "b")
}) {}
}
val div = root.firstChild as HTMLDivElement
assertEquals(
expected = "c d a b",
actual = div.getAttribute("class")
)
}
@Test
fun multipleClassesBuildersCallsWithConditionsAddCorrectClasses() = runTest {
val addClassD = mutableStateOf(true)
composition {
Div(attrs = {
classes {
+"c"
if (addClassD.value) +"d"
}
classes("a", "b")
}) {}
}
val div = root.firstChild as HTMLDivElement
assertEquals(
expected = "c d a b",
actual = div.getAttribute("class")
)
addClassD.value = false
waitChanges()
assertEquals(
expected = "c a b",
actual = div.getAttribute("class")
)
}
}
Loading…
Cancel
Save