Skip to content

Commit 83962de

Browse files
ShreckYeShreckYe
committed
Add the card composables and test them in the demo, extract some common functions, and revamp ColumnScope and RowScope
Scrolling is enabled in the demo because there are too many components now to fit in. The corresponding commit: huanshankeji/compose-html-material@4905737
1 parent aa69d22 commit 83962de

File tree

17 files changed

+246
-39
lines changed

17 files changed

+246
-39
lines changed

‎compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.androidxCommon.kt‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import androidx.compose.runtime.Stable
66
import com.huanshankeji.compose.ui.Alignment
77
import com.huanshankeji.compose.ui.Modifier
88
import kotlin.jvm.JvmInline
9-
import androidx.compose.foundation.layout.ColumnScope as PlatformColumnScope
109

1110
@Composable
1211
actual fun Column(
@@ -19,14 +18,18 @@ actual fun Column(
1918
modifier.platformModifier,
2019
verticalArrangement.platformValue,
2120
horizontalAlignment.platformHorizontal,
22-
) { ColumnScope.Impl(this).content() }
21+
content.toCommonColumnScopeContent()
22+
)
23+
24+
25+
actual typealias PlatformColumnScope = androidx.compose.foundation.layout.ColumnScope
2326

2427
//@LayoutScopeMarker
2528
actual interface ColumnScope {
26-
val platformValue: PlatformColumnScope
29+
actual val platformValue: PlatformColumnScope
2730

2831
@JvmInline
29-
value class Impl(override val platformValue: PlatformColumnScope) : ColumnScope
32+
actual value class Impl(override val platformValue: PlatformColumnScope) : ColumnScope
3033

3134
@Stable
3235
actual fun Modifier.weight(

‎compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.androidxCommon.kt‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import androidx.compose.runtime.Stable
66
import com.huanshankeji.compose.ui.Alignment
77
import com.huanshankeji.compose.ui.Modifier
88
import kotlin.jvm.JvmInline
9-
import androidx.compose.foundation.layout.RowScope as PlatformRowScope
109

1110
@Composable
1211
actual fun Row(
@@ -22,12 +21,15 @@ actual fun Row(
2221
content.toPlatformRowScopeContent(),
2322
)
2423

24+
25+
actual typealias PlatformRowScope = androidx.compose.foundation.layout.RowScope
26+
2527
//@LayoutScopeMarker
2628
actual interface RowScope {
27-
val platformValue: PlatformRowScope
29+
actual val platformValue: PlatformRowScope
2830

2931
@JvmInline
30-
value class Impl(override val platformValue: PlatformRowScope) : RowScope
32+
actual value class Impl(override val platformValue: PlatformRowScope) : RowScope
3133

3234
actual fun Modifier.weight(
3335
@FloatRange(from = 0.0, fromInclusive = false)
@@ -39,7 +41,3 @@ actual interface RowScope {
3941
actual fun Modifier.align(alignment: Alignment.Vertical): Modifier =
4042
with(platformValue) { platformModify { align(alignment.platformHorizontal) } }
4143
}
42-
43-
44-
fun (@Composable (RowScope.() -> Unit)).toPlatformRowScopeContent(): @Composable PlatformRowScope.() -> Unit =
45-
{ RowScope.Impl(this).(this@toPlatformRowScopeContent)() }

‎compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/Content.kt‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
package com.huanshankeji.compose
2+
3+
/*
4+
// This API seems to reduce the readability of code
5+
fun <Scope> (@Composable () -> Unit).toContentWithoutScope(): @Composable Scope.() -> Unit =
6+
{ this@toContentWithoutScope() }
7+
*/

‎compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.kt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import androidx.compose.runtime.Composable
55
import androidx.compose.runtime.Stable
66
import com.huanshankeji.compose.ui.Alignment
77
import com.huanshankeji.compose.ui.Modifier
8+
import kotlin.jvm.JvmInline
89

910
@Composable
1011
expect fun Column(
@@ -14,8 +15,16 @@ expect fun Column(
1415
content: @Composable ColumnScope.() -> Unit
1516
)
1617

18+
19+
expect interface PlatformColumnScope
20+
1721
//@LayoutScopeMarker
1822
expect interface ColumnScope {
23+
val platformValue: PlatformColumnScope
24+
25+
@JvmInline
26+
value class Impl(override val platformValue: PlatformColumnScope) : ColumnScope
27+
1928
@Stable
2029
open fun Modifier.weight(
2130
@FloatRange(from = 0.0, fromInclusive = false)
@@ -25,3 +34,6 @@ expect interface ColumnScope {
2534
@Stable
2635
open fun Modifier.align(alignment: Alignment.Horizontal): Modifier
2736
}
37+
38+
fun (@Composable (ColumnScope.() -> Unit)).toCommonColumnScopeContent(): @Composable PlatformColumnScope.() -> Unit =
39+
{ ColumnScope.Impl(this).this@toCommonColumnScopeContent() }

‎compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.kt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,15 @@ expect fun Row(
1414
content: @Composable RowScope.() -> Unit
1515
)
1616

17+
18+
expect interface PlatformRowScope
19+
1720
//@LayoutScopeMarker
1821
expect interface RowScope {
22+
val platformValue: PlatformRowScope
23+
24+
value class Impl(override val platformValue: PlatformRowScope) : RowScope
25+
1926
@Stable
2027
open fun Modifier.weight(
2128
@FloatRange(from = 0.0, fromInclusive = false)
@@ -25,3 +32,6 @@ expect interface RowScope {
2532
@Stable
2633
open fun Modifier.align(alignment: Alignment.Vertical): Modifier
2734
}
35+
36+
fun (@Composable (RowScope.() -> Unit)).toPlatformRowScopeContent(): @Composable PlatformRowScope.() -> Unit =
37+
{ RowScope.Impl(this).this@toPlatformRowScopeContent() }

‎compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import com.huanshankeji.compose.ui.Modifier
88
import com.huanshankeji.compose.ui.PlatformModifier
99
import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent
1010
import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker
11-
import com.varabyte.kobweb.compose.foundation.layout.ColumnScope as PlatformColumnScope
1211

1312
@Composable
1413
actual fun Column(
@@ -23,15 +22,19 @@ actual fun Column(
2322
.sizeFitContent() // "fit-content" is added to make it consistent with the `androidx` one
2423
.then(modifier.platformModifier),
2524
verticalArrangement.platformValue,
26-
horizontalAlignment.platformValue
27-
) { ColumnScope.Impl(this).content() }
25+
horizontalAlignment.platformValue,
26+
content = content.toCommonColumnScopeContent()
27+
)
2828
}
2929

30+
31+
actual typealias PlatformColumnScope = com.varabyte.kobweb.compose.foundation.layout.ColumnScope
32+
3033
@LayoutScopeMarker
3134
actual interface ColumnScope {
32-
val platformValue: PlatformColumnScope
35+
actual val platformValue: PlatformColumnScope
3336

34-
value class Impl(override val platformValue: PlatformColumnScope) : ColumnScope
37+
actual value class Impl(override val platformValue: PlatformColumnScope) : ColumnScope
3538

3639
@Stable
3740
actual fun Modifier.weight(

‎compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import com.huanshankeji.compose.ui.Modifier
88
import com.huanshankeji.compose.ui.PlatformModifier
99
import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent
1010
import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker
11-
import com.varabyte.kobweb.compose.foundation.layout.RowScope as PlatformRowScope
1211

1312
@Composable
1413
actual fun Row(
@@ -28,11 +27,14 @@ actual fun Row(
2827
)
2928
}
3029

30+
31+
actual typealias PlatformRowScope = com.varabyte.kobweb.compose.foundation.layout.RowScope
32+
3133
@LayoutScopeMarker
3234
actual interface RowScope {
33-
val platformValue: PlatformRowScope
35+
actual val platformValue: PlatformRowScope
3436

35-
value class Impl(override val platformValue: PlatformRowScope) : RowScope
37+
actual value class Impl(override val platformValue: PlatformRowScope) : RowScope
3638

3739
@Stable
3840
actual fun Modifier.weight(
@@ -45,7 +47,3 @@ actual interface RowScope {
4547
actual fun Modifier.align(alignment: Alignment.Vertical): Modifier =
4648
with(platformValue) { platformModify { align(alignment.platformValue) } }
4749
}
48-
49-
50-
fun (@Composable (RowScope.() -> Unit)).toPlatformRowScopeContent(): @Composable PlatformRowScope.() -> Unit =
51-
{ RowScope.Impl(this).(this@toPlatformRowScopeContent)() }

‎compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/Card.androidxCommon.kt‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
package com.huanshankeji.compose.material3
2+
3+
import androidx.compose.runtime.Composable
4+
import com.huanshankeji.compose.foundation.layout.ColumnScope
5+
import com.huanshankeji.compose.foundation.layout.toCommonColumnScopeContent
6+
import com.huanshankeji.compose.ui.Modifier
7+
8+
@Composable
9+
actual fun Card(modifier: Modifier, content: @Composable ColumnScope.() -> Unit) =
10+
androidx.compose.material3.Card(modifier.platformModifier, content = content.toCommonColumnScopeContent())
11+
12+
@Composable
13+
actual fun ElevatedCard(modifier: Modifier, content: @Composable ColumnScope.() -> Unit) =
14+
androidx.compose.material3.ElevatedCard(modifier.platformModifier, content = content.toCommonColumnScopeContent())
15+
16+
@Composable
17+
actual fun OutlinedCard(modifier: Modifier, content: @Composable ColumnScope.() -> Unit) =
18+
androidx.compose.material3.OutlinedCard(modifier.platformModifier, content = content.toCommonColumnScopeContent())

‎compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/Card.androidxCommon.kt‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
package com.huanshankeji.compose.material3.ext
2+
3+
import androidx.compose.runtime.Composable
4+
import com.huanshankeji.compose.ui.Modifier
5+
6+
@Composable
7+
actual fun Card(modifier: Modifier, content: @Composable () -> Unit) =
8+
com.huanshankeji.compose.material3.Card(modifier) { content() }
9+
10+
@Composable
11+
actual fun ElevatedCard(modifier: Modifier, content: @Composable () -> Unit) =
12+
com.huanshankeji.compose.material3.ElevatedCard(modifier) { content() }
13+
14+
@Composable
15+
actual fun OutlinedCard(modifier: Modifier, content: @Composable () -> Unit) =
16+
com.huanshankeji.compose.material3.OutlinedCard(modifier) { content() }

‎compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/Card.kt‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
package com.huanshankeji.compose.material3
2+
3+
import androidx.compose.runtime.Composable
4+
import com.huanshankeji.compose.foundation.layout.ColumnScope
5+
import com.huanshankeji.compose.material3.ext.Card
6+
import com.huanshankeji.compose.ui.Modifier
7+
8+
@Composable
9+
expect fun Card(
10+
modifier: Modifier = Modifier,
11+
content: @Composable ColumnScope.() -> Unit
12+
)
13+
14+
/**
15+
* An alias for [Card].
16+
*/
17+
@Composable
18+
fun FilledCard(
19+
modifier: Modifier = Modifier,
20+
content: @Composable ColumnScope.() -> Unit
21+
) =
22+
Card(modifier, content)
23+
24+
// TODO clickable cards
25+
26+
@Composable
27+
expect fun ElevatedCard(
28+
modifier: Modifier = Modifier,
29+
content: @Composable ColumnScope.() -> Unit
30+
)
31+
32+
@Composable
33+
expect fun OutlinedCard(
34+
modifier: Modifier = Modifier,
35+
content: @Composable ColumnScope.() -> Unit
36+
)

0 commit comments

Comments
 (0)