Skip to content

Commit 0ebd4fa

Browse files
ShreckYeShreckYe
committed
Partially resolve the issue that List/ScrollableList overflows in :demo by adding overflow-y to List/ScrollableList and setting a fixed height in :demo
Some other miscellaneous changes: 1. Make `List` scrollable on web by adding `overflow-y: auto` to it and rename it to `ScrollableList` 1. Try resolving the issue that an expandable scrollable element on web (with `overflow-y` set to `scroll` or `auto`) without `height`/`max-height` set overflows in a nested `div` without success 1. Rename `Composables.kt` to `App.kt` in `:demo` 1. Fix a bug in `StyleScope`.width` that `Modifier.height` is called in it 1. Update README.md
1 parent 51f105f commit 0ebd4fa

File tree

9 files changed

+55
-23
lines changed

9 files changed

+55
-23
lines changed

‎README.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
# Compose Multiplatform Material wrappers
22

3-
Some simple Compose Multiplatform Material Design component wrappers for desktop, Android, and web (mainly based on [KMDC](https://github.com/mpetuska/kmdc))
3+
Some simple Compose Multiplatform wrappers of common components, layouts, and Material Design components for desktop,
4+
Android, and web (mainly based on [KMDC](https://github.com/mpetuska/kmdc))
45

5-
We try to make the styles of the composable components follow those of the desktop and Android ones in `com.huanshankeji.compose.material`, meanwhile being compatible with the Web APIs. However, only a subset of the composable arguments is supported due to the API differences and limitations of the web composables this project depends on.
6+
We try to make the function types of the composable components follow those of the desktop and Android ones
7+
in `androidx.compose.foundation` and `androidx.compose.material`, meanwhile being compatible with the Web APIs. However,
8+
only subsets of the composables and composable arguments are supported due to the API differences, limitations of the
9+
web composables this project depends on, and our limited effort.
610

711
Visual consistency across different platforms is not guaranteed.
812

@@ -22,15 +26,15 @@ There is no plan to support Apple platforms until there is official support from
2226
#### Layouts
2327

2428
- `Box`
25-
- `Column`
26-
- `Row`
29+
- `Column` (via flexbox on web)
30+
- `Row` (via flexbox on web)
2731

2832
### Material components
2933

3034
- `Button`
3135
- `Card`
3236
- `Icon`
3337
- `IconButton`
34-
- `List`/`LazyColumn` (visually inconsistent)
38+
- `ScrollableList`/`LazyColumn` (visually inconsistent for now)
3539
- `Text`/`MaterialText`
3640
- `TopAppBarScaffold`

‎compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/layout/Box.kt‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ package com.huanshankeji.compose.layout
33
import androidx.compose.runtime.Composable
44
import com.huanshankeji.compose.ui.ModifierOrAttrs
55
import com.huanshankeji.compose.ui.toAttrs
6+
import com.huanshankeji.compose.web.attributes.attrs
7+
import com.huanshankeji.compose.web.attributes.plus
8+
import com.huanshankeji.compose.web.css.FIT_CONTENT
9+
import com.huanshankeji.compose.web.css.width
610
import org.jetbrains.compose.web.dom.Div
711
import org.jetbrains.compose.web.dom.ElementScope
812
import org.w3c.dom.HTMLDivElement
@@ -18,4 +22,8 @@ actual interface BoxScope {
1822

1923
@Composable
2024
actual fun Box(modifierOrAttrs: ModifierOrAttrs<BoxElement>, content: @Composable BoxScope.() -> Unit) =
21-
Div(modifierOrAttrs.toAttrs()) { BoxScope.Impl(this).content() }
25+
Div(attrs<BoxElement> {
26+
style { width(FIT_CONTENT) }
27+
} + modifierOrAttrs.toAttrs()) {
28+
BoxScope.Impl(this).content()
29+
}

‎compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScope.kt‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ package com.huanshankeji.compose.ui
33
import com.huanshankeji.compose.ui.unit.NumericSize
44
import com.huanshankeji.compose.ui.unit.Size
55
import com.huanshankeji.compose.ui.unit.Size.*
6+
import com.huanshankeji.compose.web.css.FIT_CONTENT
7+
import com.huanshankeji.compose.web.css.height
8+
import com.huanshankeji.compose.web.css.width
69
import org.jetbrains.compose.web.attributes.AttrsScope
710
import org.jetbrains.compose.web.css.height
811
import org.jetbrains.compose.web.css.margin
@@ -31,7 +34,7 @@ actual class StyleScope(val styleScope: org.jetbrains.compose.web.css.StyleScope
3134
actual fun height(value: Size) =
3235
styleScope.run {
3336
when (value) {
34-
FitContent -> property("height", "fit-content")
37+
FitContent -> height(FIT_CONTENT)
3538
FillMax -> height(100.percent)
3639
is Numeric -> height(value.value.platformValue)
3740
}
@@ -40,7 +43,7 @@ actual class StyleScope(val styleScope: org.jetbrains.compose.web.css.StyleScope
4043
actual fun width(value: Size) =
4144
styleScope.run {
4245
when (value) {
43-
FitContent -> property("width", "fit-content")
46+
FitContent -> width(FIT_CONTENT)
4447
FillMax -> width(100.percent)
4548
is Numeric -> width(value.value.platformValue)
4649
}

‎compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScopeJvm.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ package com.huanshankeji.compose.ui
33
import androidx.compose.foundation.layout.fillMaxHeight
44
import androidx.compose.foundation.layout.height
55
import androidx.compose.foundation.layout.padding
6+
import androidx.compose.foundation.layout.width
67
import androidx.compose.ui.Modifier
78
import com.huanshankeji.compose.ui.unit.NumericSize
89
import com.huanshankeji.compose.ui.unit.Size
@@ -50,7 +51,7 @@ actual class StyleScope(val modifierOrAttrsScope: ModifierOrAttrsScope<*>) {
5051
when (value) {
5152
FitContent -> this
5253
FillMax -> fillMaxHeight()
53-
is Numeric -> height(value.value.platformValue)
54+
is Numeric -> width(value.value.platformValue)
5455
}
5556
}
5657
}

‎compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/ListAndLazyColumn.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,12 @@ expect class HeaderScope
5858

5959

6060
@Composable
61-
expect fun List(modifierOrAttrs: ModifierOrAttrs<ListElement> = null, content: ListScope.() -> Unit)
61+
expect fun ScrollableList(modifierOrAttrs: ModifierOrAttrs<ListElement> = null, content: ListScope.() -> Unit)
6262

6363
/**
64-
* An alias for [List] that follows the name of [androidx.compose.foundation.lazy.LazyColumn].
64+
* An alias for [ScrollableList] that follows the name of [androidx.compose.foundation.lazy.LazyColumn].
6565
* The current implementation is not actually lazy on web.
6666
*/
6767
@Composable
6868
fun LazyColumn(modifierOrAttrs: ModifierOrAttrs<ListElement> = null, content: ListScope.() -> Unit) =
69-
List(modifierOrAttrs, content)
69+
ScrollableList(modifierOrAttrs, content)

‎compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/material/Card.kt‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@ package com.huanshankeji.compose.material
22

33
import androidx.compose.runtime.Composable
44
import com.huanshankeji.compose.ui.ModifierOrAttrs
5-
import com.huanshankeji.compose.ui.modifierOrAttrs
6-
import com.huanshankeji.compose.ui.plus
75
import com.huanshankeji.compose.ui.toAttrs
8-
import com.huanshankeji.compose.ui.unit.Size
6+
import com.huanshankeji.compose.web.attributes.attrs
7+
import com.huanshankeji.compose.web.attributes.plus
8+
import com.huanshankeji.compose.web.css.FIT_CONTENT
9+
import com.huanshankeji.compose.web.css.width
910
import dev.petuska.kmdc.card.MDCCard
1011
import org.w3c.dom.HTMLDivElement
1112

1213
actual typealias CardElement = HTMLDivElement
1314

1415
@Composable
1516
actual fun Card(modifierOrAttrs: ModifierOrAttrs<CardElement>, content: @Composable () -> Unit) =
16-
MDCCard(attrs = (modifierOrAttrs<CardElement> {
17-
style { width(Size.FitContent) }
18-
} + modifierOrAttrs).toAttrs()) { content() }
17+
MDCCard(attrs = attrs<CardElement> {
18+
style { width(FIT_CONTENT) }
19+
} + modifierOrAttrs.toAttrs()) { content() }

‎compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/material/ListAndLazyColumn.kt‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@ package com.huanshankeji.compose.material
33
import androidx.compose.runtime.Composable
44
import com.huanshankeji.compose.ui.ModifierOrAttrs
55
import com.huanshankeji.compose.ui.toAttrs
6+
import com.huanshankeji.compose.web.attributes.attrs
7+
import com.huanshankeji.compose.web.attributes.plus
68
import dev.petuska.kmdc.list.MDCList
79
import dev.petuska.kmdc.list.MDCListGroup
810
import dev.petuska.kmdc.list.MDCListScope
911
import dev.petuska.kmdc.list.Subheader
1012
import dev.petuska.kmdc.list.item.ListItem
1113
import dev.petuska.kmdc.list.item.MDCListItemScope
14+
import org.jetbrains.compose.web.css.*
1215
import org.jetbrains.compose.web.dom.ElementScope
1316
import org.w3c.dom.HTMLHeadingElement
1417
import org.w3c.dom.HTMLLIElement
@@ -75,7 +78,12 @@ actual class ItemScope(val mdcListItemScope: MDCListItemScope<HTMLLIElement>)
7578
actual class HeaderScope(val elementScope: ElementScope<HTMLHeadingElement>)
7679

7780
@Composable
78-
actual fun List(modifierOrAttrs: ModifierOrAttrs<ListElement>, content: ListScope.() -> Unit) =
79-
MDCList(attrs = modifierOrAttrs.toAttrs()) {
81+
actual fun ScrollableList(modifierOrAttrs: ModifierOrAttrs<ListElement>, content: ListScope.() -> Unit) =
82+
MDCList(attrs = attrs<ListElement> {
83+
style {
84+
//overflowY("scroll")
85+
overflowY("auto")
86+
}
87+
} + modifierOrAttrs.toAttrs()) {
8088
ListScope(this).ComposableRun(content)
8189
}

‎compose-multiplatform-material/src/jvmMain/kotlin/com/huanshankeji/compose/material/ListAndLazyColumnJvm.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ actual class ItemScope(val lazyItemScope: LazyItemScope)
3838
actual typealias HeaderScope = ItemScope
3939

4040
@Composable
41-
actual fun List(modifierOrAttrs: ModifierOrAttrs<ListElement>, content: ListScope.() -> Unit) =
41+
actual fun ScrollableList(modifierOrAttrs: ModifierOrAttrs<ListElement>, content: ListScope.() -> Unit) =
4242
androidx.compose.foundation.lazy.LazyColumn(modifierOrAttrs.toModifier()) {
4343
ListScope(this).content()
4444
}

‎demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Composables.kt‎ renamed to ‎demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import com.huanshankeji.compose.material.*
99
import com.huanshankeji.compose.material.icon.MaterialIcons
1010
import com.huanshankeji.compose.ui.height
1111
import com.huanshankeji.compose.ui.unit.dpOrPx
12+
import com.huanshankeji.compose.ui.width
1213

1314
@OptIn(ConfusableTextApi::class)
1415
@Composable
@@ -23,7 +24,9 @@ fun App() {
2324
Card({
2425
style {
2526
margin(16.dpOrPx)
26-
height(400.dpOrPx)
27+
val size = 400.dpOrPx
28+
height(size)
29+
width(size)
2730
}
2831
}) {
2932
Column({
@@ -49,7 +52,11 @@ fun App() {
4952
margin(16.dpOrPx)
5053
}
5154
}) {
52-
List {
55+
ScrollableList({
56+
style {
57+
height(200.dpOrPx)
58+
}
59+
}) {
5360
item {
5461
Text("Ungrouped item")
5562
}

0 commit comments

Comments
 (0)