Accordion

This commit is contained in:
InsanusMokrassar 2022-02-23 20:25:27 +06:00
parent 528f6652e0
commit 6f913c0a83
4 changed files with 144 additions and 0 deletions

View File

@ -2,6 +2,8 @@
## 0.0.37
* Support of `Accordion` element
## 0.0.36
* Reorder arguments in `DefaultComment` fun

View File

@ -0,0 +1,89 @@
package dev.inmo.jsuikit.elements
import androidx.compose.runtime.Composable
import dev.inmo.jsuikit.modifiers.UIKitAccordion
import dev.inmo.jsuikit.modifiers.include
import dev.inmo.jsuikit.utils.Attrs
import org.jetbrains.compose.web.attributes.AttrsBuilder
import org.jetbrains.compose.web.dom.*
import org.w3c.dom.*
@Composable
fun <T> Accordion(
data: Iterable<T>,
attrs: Attrs<HTMLUListElement> = Attrs.empty(),
itemAttrsBuilder: AttrsBuilder<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
itemContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit
) {
Ul(
{
include()
attrs.builder(this)
}
) {
data.forEachIndexed { i, t ->
Li({ itemAttrsBuilder(i, t) }) {
itemContentBuilder(i, t)
}
}
}
}
@Composable
fun <T> DefaultAccordion(
data: Iterable<T>,
attrs: Attrs<HTMLUListElement> = Attrs.empty(),
itemAttrsBuilder: AttrsBuilder<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
titleAttrsBuilder: AttrsBuilder<HTMLAnchorElement>.(Int, T) -> Unit = { _, _ -> },
titleContentBuilder: @Composable ElementScope<HTMLAnchorElement>.(Int, T) -> Unit = { _, _ -> },
beforeTitleContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
afterTitleContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
afterContentContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
contentAttrsBuilder: AttrsBuilder<HTMLDivElement>.(Int, T) -> Unit = { _, _ -> },
contentContentBuilder: @Composable ElementScope<HTMLDivElement>.(Int, T) -> Unit
) = Accordion(
data,
attrs,
itemAttrsBuilder
) { i, t ->
beforeTitleContentBuilder(i, t)
A(
attrs = {
include(UIKitAccordion.Title)
titleAttrsBuilder(i, t)
}
) {
titleContentBuilder(i, t)
}
afterTitleContentBuilder(i, t)
Div(
{
include(UIKitAccordion.Content)
contentAttrsBuilder(i, t)
}
) {
contentContentBuilder(i, t)
}
afterContentContentBuilder(i, t)
}
@Composable
fun <T> DefaultAccordion(
data: Iterable<T>,
titleResolver: (Int, T) -> String,
attrs: Attrs<HTMLUListElement> = Attrs.empty(),
itemAttrsBuilder: AttrsBuilder<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
titleAttrsBuilder: AttrsBuilder<HTMLAnchorElement>.(Int, T) -> Unit = { _, _ -> },
contentAttrsBuilder: AttrsBuilder<HTMLDivElement>.(Int, T) -> Unit = { _, _ -> },
contentContentBuilder: @Composable ElementScope<HTMLDivElement>.(Int, T) -> Unit
) = DefaultAccordion(
data,
attrs,
itemAttrsBuilder,
titleAttrsBuilder,
{ i, t ->
org.jetbrains.compose.web.dom.Text(titleResolver(i, t))
},
contentAttrsBuilder = contentAttrsBuilder,
contentContentBuilder = contentContentBuilder
)

View File

@ -0,0 +1,51 @@
package dev.inmo.jsuikit.modifiers
import dev.inmo.jsuikit.utils.*
import org.w3c.dom.PageTransitionEvent
sealed class UIKitAccordion(
vararg classnames: String,
override val otherAttrs: Map<String, String> = emptyMap()
) : UIKitModifier {
@Suppress("UNCHECKED_CAST")
override val classes: Array<String> = classnames as Array<String>
object Title : UIKitAccordion("uk-accordion-title")
object Content : UIKitAccordion("uk-accordion-content")
class Custom internal constructor(
otherAttrs: Map<String, String> = emptyMap()
) : UIKitAccordion (otherAttrs = otherAttrs)
companion object : UIKitAccordion("uk-accordion") {
val Open = UIKitUtility.Open
operator fun invoke(
activeItemIndex: Int? = null,
animation: Boolean? = null,
collapsible: Boolean? = null,
contentSelector: String? = null,
animationDuration: Milliseconds? = null,
multiple: Boolean? = null,
targetsSelector: String? = null,
toggleSelector: String? = null,
transition: PageTransitionEvent? = null,
offsetTopPixels: Int? = null,
) = Custom(
mapOf(
buildAttribute("uk-accordion") {
"active" to activeItemIndex
"animation" to animation
"collapsible" to collapsible
"content" to contentSelector
"duration" to animationDuration
"multiple" to multiple
"targets" to targetsSelector
"toggle" to toggleSelector
"transition" to transition
"offset" to offsetTopPixels
}
)
)
}
}

View File

@ -109,4 +109,6 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
object Disabled : UIKitUtility("uk-disabled")
object Drag : UIKitUtility("uk-drag")
object Active : UIKitUtility("uk-active")
object Open : UIKitUtility("uk-open")
}