Skip to content

Commit 55257c7

Browse files
ShreckYeShreckYe
committed
Improve over the previous commit eliminating the need for the consumer to add the matchPositionRelativeParentJsOnly modifier in TopAppBarScaffold content, and add a fillMaxWidthStretch modifier
1 parent 32fb9ad commit 55257c7

File tree

8 files changed

+143
-14
lines changed

8 files changed

+143
-14
lines changed

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
package com.huanshankeji.compose.foundation.layout.ext
2+
3+
import androidx.compose.foundation.layout.fillMaxHeight
4+
import androidx.compose.foundation.layout.fillMaxSize
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.runtime.Stable
7+
import com.huanshankeji.compose.ui.Modifier
8+
9+
@Stable
10+
actual fun Modifier.fillMaxWidthStretch(): Modifier =
11+
platformModify { fillMaxWidth() }
12+
13+
@Stable
14+
actual fun Modifier.fillMaxHeightStretch(): Modifier =
15+
platformModify { fillMaxHeight() }
16+
17+
@Stable
18+
actual fun Modifier.fillMaxSizeStretch(): Modifier =
19+
platformModify { fillMaxSize() }

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import androidx.annotation.FloatRange
44
import androidx.compose.runtime.Stable
55
import androidx.compose.ui.unit.Dp
66
import androidx.compose.ui.unit.DpSize
7+
import com.huanshankeji.compose.foundation.layout.ext.fillMaxHeightStretch
8+
import com.huanshankeji.compose.foundation.layout.ext.fillMaxSizeStretch
9+
import com.huanshankeji.compose.foundation.layout.ext.fillMaxWidthStretch
710
import com.huanshankeji.compose.ui.Modifier
811

912
@Stable
@@ -36,12 +39,21 @@ expect fun Modifier.sizeIn(
3639
maxHeight: Dp = Dp.Unspecified
3740
): Modifier
3841

42+
/**
43+
* @see fillMaxWidthStretch
44+
*/
3945
@Stable
4046
expect fun Modifier.fillMaxWidth(@FloatRange(from = 0.0, to = 1.0) fraction: Float = 1f): Modifier
4147

48+
/**
49+
* @see fillMaxHeightStretch
50+
*/
4251
@Stable
4352
expect fun Modifier.fillMaxHeight(@FloatRange(from = 0.0, to = 1.0) fraction: Float = 1f): Modifier
4453

54+
/**
55+
* @see fillMaxSizeStretch
56+
*/
4557
@Stable
4658
expect fun Modifier.fillMaxSize(@FloatRange(from = 0.0, to = 1.0) fraction: Float = 1f): Modifier
4759

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
package com.huanshankeji.compose.foundation.layout.ext
2+
3+
import androidx.compose.runtime.Stable
4+
import com.huanshankeji.compose.foundation.layout.fillMaxHeight
5+
import com.huanshankeji.compose.foundation.layout.fillMaxSize
6+
import com.huanshankeji.compose.foundation.layout.fillMaxWidth
7+
import com.huanshankeji.compose.ui.Modifier
8+
9+
/**
10+
* Similar to [fillMaxWidth] but delegates to the `stretch` CSS value on JS DOM.
11+
* See https://developer.mozilla.org/en-US/docs/Web/CSS/width#stretch.
12+
*/
13+
@Stable
14+
expect fun Modifier.fillMaxWidthStretch(): Modifier
15+
16+
/**
17+
* Similar to [fillMaxHeight] but delegates to the `stretch` CSS value on JS DOM.
18+
*/
19+
@Stable
20+
expect fun Modifier.fillMaxHeightStretch(): Modifier
21+
22+
/**
23+
* Similar to [fillMaxSize] but delegates to the `stretch` CSS value on JS DOM.
24+
*/
25+
@Stable
26+
expect fun Modifier.fillMaxSizeStretch(): Modifier

‎compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/browser/Browser.kt‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
package com.huanshankeji.browser
2+
3+
import kotlinx.browser.window
4+
5+
// TODO consider moving to "kotlin-common"
6+
7+
enum class Browser {
8+
Webkit, Mozilla
9+
}
10+
11+
val browser = run {
12+
val userAgent = window.navigator.userAgent
13+
when {
14+
userAgent.contains("AppleWebKit") -> Browser.Webkit
15+
userAgent.contains("Mozilla") -> Browser.Mozilla
16+
else -> null
17+
}
18+
}

‎compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsDom.js.kt‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,20 @@ import com.huanshankeji.compose.ui.Modifier
44
import com.varabyte.kobweb.compose.ui.attrsModifier
55
import org.jetbrains.compose.web.css.*
66

7+
fun StyleScope.matchPositionRelativeParent() {
8+
position(Position.Absolute)
9+
left(0.px)
10+
top(0.px)
11+
right(0.px)
12+
bottom(0.px)
13+
// Also considering using `inset` (https://developer.mozilla.org/en-US/docs/Web/CSS/inset)
14+
}
15+
716
actual fun Modifier.matchPositionRelativeParentJsOnly(): Modifier =
817
platformModify {
918
attrsModifier {
1019
style {
11-
position(Position.Absolute)
12-
left(0.px)
13-
top(0.px)
14-
right(0.px)
15-
bottom(0.px)
16-
// Also considering using `inset` (https://developer.mozilla.org/en-US/docs/Web/CSS/inset)
20+
matchPositionRelativeParent()
1721
}
1822
}
1923
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
package com.huanshankeji.compose.foundation.layout.ext
2+
3+
import androidx.compose.runtime.Stable
4+
import com.huanshankeji.browser.Browser
5+
import com.huanshankeji.browser.browser
6+
import com.huanshankeji.compose.ui.Modifier
7+
import com.huanshankeji.compose.web.css.height
8+
import com.huanshankeji.compose.web.css.width
9+
import com.varabyte.kobweb.compose.ui.styleModifier
10+
11+
private const val CSS_STRETCH_VALUE = "stretch" // This does not work on Chrome.
12+
private val cssStretchValueBrowserDependent =
13+
when (browser) {
14+
Browser.Webkit -> "-webkit-fill-available"
15+
Browser.Mozilla -> "-moz-available"
16+
null -> ""
17+
}
18+
19+
@Stable
20+
actual fun Modifier.fillMaxWidthStretch(): Modifier =
21+
platformModify { styleModifier { width(cssStretchValueBrowserDependent) } }
22+
23+
@Stable
24+
actual fun Modifier.fillMaxHeightStretch(): Modifier =
25+
platformModify { styleModifier { height(cssStretchValueBrowserDependent) } } // Setting this for `height` seems to be not available on Firefox. See https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility.
26+
27+
@Stable
28+
actual fun Modifier.fillMaxSizeStretch(): Modifier =
29+
platformModify {
30+
styleModifier {
31+
width(cssStretchValueBrowserDependent)
32+
height(cssStretchValueBrowserDependent) // Setting this for `height` seems to be not available on Firefox. See https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility.
33+
}
34+
}

‎compose-multiplatform-material2/src/commonMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.kt‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ enum class FabPosition {
3232

3333
/**
3434
* This one doesn't fill parent height on JS.
35+
* @param contentModifier be cautious when passing the parameter, as the content CSS class `mdc-top-app-bar--fixed-adjust` has its styles which may be overridden.
3536
*/
3637
@Composable
3738
expect fun PrimitiveTopAppBarScaffold(
@@ -45,7 +46,7 @@ expect fun PrimitiveTopAppBarScaffold(
4546

4647
/**
4748
* This variant fills parent space automatically and internally uses a flexbox on JS.
48-
* For it to work properly, it's recommended to set these CSS styles on body:
49+
* For it to work properly on JS DOM, it's recommended to use it as the top level element and to set these CSS styles on body:
4950
* ```
5051
* body {
5152
* margin: 0;
@@ -54,7 +55,8 @@ expect fun PrimitiveTopAppBarScaffold(
5455
* ```
5556
*
5657
* @param snackbarHost `androidx.compose.material.Scaffold` has a `SnackbarHostState` parameter for this lambda, but `androidx.compose.material3.Scaffold` doesn't. Therefore, we think this is probably a design flaw and don't provide the parameter.
57-
* @param isFloatingActionButtonDockedAndroidxCommon not available on JS DOM.
58+
* @param isFloatingActionButtonDockedAndroidxCommon available on `androidx.compose` targets only.
59+
// * @param isContentOverflowingOrExpandingJs available on JS DOM only.
5860
*/
5961
@Composable
6062
expect fun TopAppBarScaffold(
@@ -67,5 +69,6 @@ expect fun TopAppBarScaffold(
6769
floatingActionButton: @Composable (() -> Unit)? = null,
6870
floatingActionButtonPosition: FabPosition = FabPosition.End,
6971
isFloatingActionButtonDockedAndroidxCommon: Boolean = false,
72+
//isContentOverflowingOrExpandingJs: Boolean = true, // always overflows
7073
content: @Composable (PaddingValues) -> Unit
7174
)

‎compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt‎

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

33
import androidx.compose.runtime.Composable
44
import com.huanshankeji.compose.contentDescription
5+
import com.huanshankeji.compose.foundation.ext.matchPositionRelativeParent
56
import com.huanshankeji.compose.foundation.layout.Column
67
import com.huanshankeji.compose.foundation.layout.PaddingValues
78
import com.huanshankeji.compose.foundation.layout.fillMaxSize
@@ -10,7 +11,9 @@ import com.huanshankeji.compose.material.icons.Icon
1011
import com.huanshankeji.compose.material2.icons.mdcIconWithStyle
1112
import com.huanshankeji.compose.ui.Modifier
1213
import com.huanshankeji.compose.ui.toAttrs
14+
import com.varabyte.kobweb.compose.css.Overflow
1315
import com.varabyte.kobweb.compose.css.TextAlign
16+
import com.varabyte.kobweb.compose.css.overflow
1417
import com.varabyte.kobweb.compose.css.textAlign
1518
import dev.petuska.kmdc.top.app.bar.*
1619
import org.jetbrains.compose.web.css.*
@@ -120,14 +123,24 @@ actual fun TopAppBarScaffold(
120123
actions,
121124
Modifier.weight(1f).fillMaxWidth()
122125
) {
123-
Div(Modifier.fillMaxSize().toAttrs {
124-
style { position(Position.Relative) }
126+
Div({
127+
style {
128+
height(100.percent)
129+
position(Position.Relative)
130+
}
125131
}) {
126-
// see `ScaffoldLayoutWithMeasureFix`
127-
val innerPadding = PaddingValues()
128-
content(innerPadding)
132+
Div({
133+
style {
134+
matchPositionRelativeParent()
135+
overflow(Overflow.Auto)
136+
}
137+
}) {
138+
// see `ScaffoldLayoutWithMeasureFix`
139+
val innerPadding = PaddingValues()
140+
content(innerPadding)
129141

130-
floatingActionButton?.let { fabWithPosition(it) }
142+
floatingActionButton?.let { fabWithPosition(it) }
143+
}
131144
}
132145
}
133146

0 commit comments

Comments
 (0)