add Tab support

This commit is contained in:
InsanusMokrassar 2022-08-20 17:43:44 +06:00
parent 0dff161ce6
commit 7b2810b206
5 changed files with 112 additions and 5 deletions

View File

@ -2,6 +2,8 @@
## 0.2.1 ## 0.2.1
* `Tab` elements become supported
## 0.2.0 ## 0.2.0
**ALL DEPRECATIONS HAVE BEEN REMOVED** **ALL DEPRECATIONS HAVE BEEN REMOVED**

View File

@ -0,0 +1,46 @@
package dev.inmo.jsuikit.elements
import androidx.compose.runtime.Composable
import dev.inmo.jsuikit.modifiers.UIKitTab
import dev.inmo.jsuikit.modifiers.include
import dev.inmo.jsuikit.utils.optionallyDraw
import org.jetbrains.compose.web.attributes.AttrsScope
import org.jetbrains.compose.web.dom.*
import org.w3c.dom.HTMLLIElement
import org.w3c.dom.HTMLUListElement
@Composable
fun <T> Tabs(
data: Iterable<T>,
tabsItemBuilder: @Composable ElementScope<HTMLLIElement>.(i: Int, data: T) -> Unit,
tabsItemAttrs: AttrsScope<HTMLLIElement>.(i: Int, data: T) -> Unit = { _, _ -> },
tabsContainerAttrs: AttrsScope<HTMLUListElement>.() -> Unit = {},
contentContainerAttrs: (AttrsScope<HTMLUListElement>.() -> Unit)? = null,
contentItemAttrs: (AttrsScope<HTMLLIElement>.(i: Int, data: T) -> Unit)? = null,
contentItemBuilder: (@Composable ElementScope<HTMLLIElement>.(i: Int, data: T) -> Unit)? = null
) {
Ul({
include(UIKitTab);
tabsContainerAttrs()
}) {
data.forEachIndexed { i, data ->
Li({ tabsItemAttrs(i, data) }) {
tabsItemBuilder(i, data)
}
}
}
optionallyDraw(contentItemAttrs != null, contentItemBuilder != null, contentContainerAttrs != null) {
Ul({
contentContainerAttrs ?.invoke(this)
}) {
optionallyDraw(contentItemAttrs != null, contentItemBuilder != null) {
data.forEachIndexed { i, data ->
Li({ contentItemAttrs ?.invoke(this, i, data) }) {
contentItemBuilder ?.invoke(this, i, data)
}
}
}
}
}
}

View File

@ -0,0 +1,51 @@
package dev.inmo.jsuikit.modifiers
import dev.inmo.jsuikit.utils.buildAttribute
import org.jetbrains.compose.web.css.selectors.CSSSelector
import kotlin.time.Duration
sealed class UIKitTab(
override val classes: Array<String> = emptyArray(),
override val otherAttrs: Map<String, String> = emptyMap()
) : UIKitModifier {
sealed class Position(
classes: Array<String> = emptyArray(),
otherAttrs: Map<String, String> = emptyMap()
) : UIKitTab(classes, otherAttrs) {
object Bottom : Position(arrayOf("uk-tab-bottom"))
object Left : Position(arrayOf("uk-tab-left"))
object Right : Position(arrayOf("uk-tab-right"))
}
class Custom(
connect: CSSSelector? = null,
toggle: CSSSelector? = null,
active: Int? = null,
animationsIn: Array<UIKitAnimation>? = null,
animationsOut: Array<UIKitAnimation>? = null,
animationDuration: Duration? = null,
swiping: Boolean? = null,
media: String? = null
) : UIKitTab(
arrayOf("uk-tab"),
mapOf(
buildAttribute("uk-tab") {
"connect" to connect
"toggle" to toggle
"active" to active
"animation" to (
(animationsIn ?.let {
it.joinToString(" ") { it.name }
} ?: "") + (animationsOut ?.let {
it.joinToString(" ", ",") { it.name }
} ?: "")
).takeIf { it.isNotBlank() }
"duration" to animationDuration
"swiping" to swiping
"media" to media
}
)
)
companion object : UIKitTab(arrayOf("uk-tab"), mapOf("uk-tab" to ""))
}

View File

@ -3,7 +3,9 @@ package dev.inmo.jsuikit.utils
import dev.inmo.jsuikit.modifiers.UIKitModifier import dev.inmo.jsuikit.modifiers.UIKitModifier
import dev.inmo.jsuikit.modifiers.include import dev.inmo.jsuikit.modifiers.include
import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.attributes.AttrsScope
import org.jetbrains.compose.web.attributes.HtmlAttrMarker
import org.jetbrains.compose.web.attributes.builders.InputAttrsScope import org.jetbrains.compose.web.attributes.builders.InputAttrsScope
import org.jetbrains.compose.web.dom.AttrBuilderContext
import org.w3c.dom.Element import org.w3c.dom.Element
import org.w3c.dom.HTMLInputElement import org.w3c.dom.HTMLInputElement

View File

@ -4,13 +4,19 @@ import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.dom.ContentBuilder import org.jetbrains.compose.web.dom.ContentBuilder
import org.w3c.dom.Element import org.w3c.dom.Element
@Composable
inline fun optionallyDraw (
vararg bools: Boolean,
whatToDraw: @Composable () -> Unit
) {
if (bools.any { it }) {
whatToDraw()
}
}
@Composable @Composable
inline fun <T : Element> optionallyDraw ( inline fun <T : Element> optionallyDraw (
attrs: Attrs<T>? = null, attrs: Attrs<T>? = null,
noinline contentBuilder: ContentBuilder<T>? = null, noinline contentBuilder: ContentBuilder<T>? = null,
whatToDraw: @Composable () -> Unit whatToDraw: @Composable () -> Unit
) { ) = optionallyDraw(attrs != null || contentBuilder != null, whatToDraw = whatToDraw)
if (attrs != null || contentBuilder != null) {
whatToDraw()
}
}