Support FillMax and FitContent and make Card default to FitContent on JS

ShreckYe · ShreckYe · commit cf3153266904 · 2022-12-15T01:40:54.000+08:00
diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScope.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScope.kt
@@ -1,29 +1,52 @@
 package com.huanshankeji.compose.ui
 
 //import androidx.compose.ui.Modifier
-import com.huanshankeji.compose.ui.unit.SizeValue
+import com.huanshankeji.compose.ui.unit.NumericSize
+import com.huanshankeji.compose.ui.unit.Size
+
+typealias NotNullModifierOrAttrs<TElement> = ModifierOrAttrsScope<TElement>.() -> Unit
+typealias ModifierOrAttrs<TElement> = NotNullModifierOrAttrs<TElement>?
+
+@Suppress("NOTHING_TO_INLINE")
+inline fun <TElement : Element> modifierOrAttrs(noinline modifierOrAttrs: NotNullModifierOrAttrs<TElement>) =
+    modifierOrAttrs
+
+operator fun <TElement : Element> NotNullModifierOrAttrs<TElement>.plus(other: ModifierOrAttrs<TElement>): ModifierOrAttrs<TElement> =
+    if (other === null) this
+    else {
+        {
+            this@plus()
+            other()
+        }
+    }
 
-typealias ModifierOrAttrs<TElement> = (ModifierOrAttrsScope<TElement>.() -> Unit)?
 
 expect abstract class Element
 
+
 expect class ModifierOrAttrsScope<out TElement : Element> {
     fun style(builder: StyleScope.() -> Unit)
 }
 
 expect class StyleScope {
-    fun margin(value: SizeValue)
-    fun height(value: SizeValue)
-    fun width(value: SizeValue)
+    fun margin(value: NumericSize)
+    fun height(value: Size)
+    fun width(value: Size)
 }
 
+fun StyleScope.height(value: NumericSize) =
+    height(Size.Numeric(value))
+
+fun StyleScope.width(value: NumericSize) =
+    width(Size.Numeric(value))
+
 private const val PADDING_MESSAGE =
     "This function is a placeholder for code completion. " +
             "Use `margin` to add space around the composable, which is equivalent to `Modifier.padding`. " +
             "Set `margin` in the inner composable to add inner padding."
 
 @Deprecated(PADDING_MESSAGE)
-fun StyleScope.padding(value: SizeValue): Unit =
+fun StyleScope.padding(value: NumericSize): Unit =
     throw NotImplementedError(PADDING_MESSAGE)
 
 /*
diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt
@@ -1,6 +1,13 @@
 package com.huanshankeji.compose.ui.unit
 
-expect abstract class SizeValue
-expect class DpOrPxValue : SizeValue
+expect abstract class NumericSize
+expect class DpOrPx : NumericSize
 
-expect val Int.dpOrPx: DpOrPxValue
+expect val Int.dpOrPx: DpOrPx
+
+
+sealed class Size {
+    class Numeric(val value: NumericSize) : Size()
+    object FillMax : Size()
+    object FitContent : Size()
+}
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScope.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScope.kt
@@ -1,9 +1,12 @@
 package com.huanshankeji.compose.ui
 
-import com.huanshankeji.compose.ui.unit.SizeValue
+import com.huanshankeji.compose.ui.unit.NumericSize
+import com.huanshankeji.compose.ui.unit.Size
+import com.huanshankeji.compose.ui.unit.Size.*
 import org.jetbrains.compose.web.attributes.AttrsScope
 import org.jetbrains.compose.web.css.height
 import org.jetbrains.compose.web.css.margin
+import org.jetbrains.compose.web.css.percent
 import org.jetbrains.compose.web.css.width
 import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.w3c.dom.HTMLElement
@@ -22,12 +25,24 @@ actual class ModifierOrAttrsScope<out TElement : Element>(val attrsScope: AttrsS
 }
 
 actual class StyleScope(val styleScope: org.jetbrains.compose.web.css.StyleScope) {
-    actual fun margin(value: SizeValue) =
+    actual fun margin(value: NumericSize) =
         styleScope.margin(value.platformValue)
 
-    actual fun height(value: SizeValue) =
-        styleScope.height(value.platformValue)
-
-    actual fun width(value: SizeValue) =
-        styleScope.width(value.platformValue)
+    actual fun height(value: Size) =
+        styleScope.run {
+            when (value) {
+                FitContent -> property("height", "fit-content")
+                FillMax -> height(100.percent)
+                is Numeric -> height(value.value.platformValue)
+            }
+        }
+
+    actual fun width(value: Size) =
+        styleScope.run {
+            when (value) {
+                FitContent -> property("width", "fit-content")
+                FillMax -> width(100.percent)
+                is Numeric -> width(value.value.platformValue)
+            }
+        }
 }
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt
@@ -5,8 +5,8 @@ import org.jetbrains.compose.web.css.CSSSizeValue
 import org.jetbrains.compose.web.css.CSSUnit
 import org.jetbrains.compose.web.css.px
 
-actual abstract class SizeValue(val platformValue: CSSLengthOrPercentageValue)
-actual class DpOrPxValue(platformValue: CSSSizeValue<CSSUnit.px>) : SizeValue(platformValue)
+actual abstract class NumericSize(val platformValue: CSSLengthOrPercentageValue)
+actual class DpOrPx(platformValue: CSSSizeValue<CSSUnit.px>) : NumericSize(platformValue)
 
-actual val Int.dpOrPx: DpOrPxValue
-    get() = DpOrPxValue(this.px)
+actual val Int.dpOrPx: DpOrPx
+    get() = DpOrPx(this.px)
diff --git a/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScopeJvm.kt b/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScopeJvm.kt
@@ -1,10 +1,12 @@
 package com.huanshankeji.compose.ui
 
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.ui.Modifier
-import com.huanshankeji.compose.ui.unit.SizeValue
+import com.huanshankeji.compose.ui.unit.NumericSize
+import com.huanshankeji.compose.ui.unit.Size
+import com.huanshankeji.compose.ui.unit.Size.*
 
 fun <TElement : Element> ModifierOrAttrs<TElement>.toModifier(): Modifier =
     this?.let {
@@ -32,15 +34,23 @@ actual class ModifierOrAttrsScope<out TElement : Element>(modifier: Modifier) {
 }
 
 actual class StyleScope(val modifierOrAttrsScope: ModifierOrAttrsScope<*>) {
-    actual fun margin(value: SizeValue) = modifierOrAttrsScope.modify {
+    actual fun margin(value: NumericSize) = modifierOrAttrsScope.modify {
         padding(value.platformValue)
     }
 
-    actual fun height(value: SizeValue) = modifierOrAttrsScope.modify {
-        height(value.platformValue)
+    actual fun height(value: Size) = modifierOrAttrsScope.modify {
+        when (value) {
+            FitContent -> this
+            FillMax -> fillMaxHeight()
+            is Numeric -> height(value.value.platformValue)
+        }
     }
 
-    actual fun width(value: SizeValue) = modifierOrAttrsScope.modify {
-        width(value.platformValue)
+    actual fun width(value: Size) = modifierOrAttrsScope.modify {
+        when (value) {
+            FitContent -> this
+            FillMax -> fillMaxHeight()
+            is Numeric -> height(value.value.platformValue)
+        }
     }
 }
diff --git a/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt b/compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt
@@ -3,8 +3,8 @@ package com.huanshankeji.compose.ui.unit
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
-actual abstract class SizeValue(val platformValue: Dp)
-actual class DpOrPxValue(platformValue: Dp) : SizeValue(platformValue)
+actual abstract class NumericSize(val platformValue: Dp)
+actual class DpOrPx(platformValue: Dp) : NumericSize(platformValue)
 
-actual val Int.dpOrPx: DpOrPxValue
-    get() = DpOrPxValue(this.dp)
+actual val Int.dpOrPx: DpOrPx
+    get() = DpOrPx(this.dp)
diff --git a/compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/material/Card.kt b/compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/material/Card.kt
@@ -2,12 +2,17 @@ package com.huanshankeji.compose.material
 
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.ModifierOrAttrs
+import com.huanshankeji.compose.ui.modifierOrAttrs
+import com.huanshankeji.compose.ui.plus
 import com.huanshankeji.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.unit.Size
 import dev.petuska.kmdc.card.MDCCard
 import org.w3c.dom.HTMLDivElement
 
 actual typealias CardElement = HTMLDivElement
 
 @Composable
 actual fun Card(modifierOrAttrs: ModifierOrAttrs<CardElement>, content: @Composable () -> Unit) =
-    MDCCard(attrs = modifierOrAttrs.toAttrs()) { content() }
+    MDCCard(attrs = (modifierOrAttrs<CardElement> {
+        style { width(Size.FitContent) }
+    } + modifierOrAttrs).toAttrs()) { content() }
diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Composables.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Composables.kt
@@ -7,6 +7,7 @@ import com.huanshankeji.compose.layout.Column
 import com.huanshankeji.compose.layout.Row
 import com.huanshankeji.compose.material.*
 import com.huanshankeji.compose.material.icon.MaterialIcons
+import com.huanshankeji.compose.ui.height
 import com.huanshankeji.compose.ui.unit.dpOrPx
 
 @OptIn(ConfusableTextApi::class)
