Skip to content

Commit 0cab51c

Browse files
ShreckYeShreckYe
committed
Split the padding modifiers into outerPadding and innerPadding 
1 parent 1fe305a commit 0cab51c

File tree

9 files changed

+255
-25
lines changed

9 files changed

+255
-25
lines changed

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
package com.huanshankeji.compose.foundation.layout.ext
2+
3+
import androidx.compose.runtime.Stable
4+
import androidx.compose.ui.unit.Dp
5+
import com.huanshankeji.compose.foundation.layout.PaddingValues
6+
import com.huanshankeji.compose.foundation.layout.absolutePadding
7+
import com.huanshankeji.compose.foundation.layout.padding
8+
import com.huanshankeji.compose.ui.Modifier
9+
10+
@Stable
11+
actual fun Modifier.innerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier =
12+
padding(start, top, end, bottom)
13+
14+
@Stable
15+
actual fun Modifier.innerPadding(horizontal: Dp, vertical: Dp): Modifier =
16+
padding(horizontal, vertical)
17+
18+
@Stable
19+
actual fun Modifier.innerPadding(all: Dp): Modifier =
20+
padding(all)
21+
22+
@Stable
23+
actual fun Modifier.innerPadding(paddingValues: PaddingValues): Modifier =
24+
padding(paddingValues)
25+
26+
@Stable
27+
actual fun Modifier.absoluteInnerPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier =
28+
absolutePadding(left, top, right, bottom)

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
package com.huanshankeji.compose.foundation.layout.ext
2+
3+
import androidx.compose.runtime.Stable
4+
import androidx.compose.ui.unit.Dp
5+
import com.huanshankeji.compose.foundation.layout.PaddingValues
6+
import com.huanshankeji.compose.foundation.layout.absolutePadding
7+
import com.huanshankeji.compose.foundation.layout.padding
8+
import com.huanshankeji.compose.ui.Modifier
9+
10+
@Stable
11+
actual fun Modifier.outerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier =
12+
padding(start, top, end, bottom)
13+
14+
@Stable
15+
actual fun Modifier.outerPadding(horizontal: Dp, vertical: Dp): Modifier =
16+
padding(horizontal, vertical)
17+
18+
@Stable
19+
actual fun Modifier.outerPadding(all: Dp): Modifier =
20+
padding(all)
21+
22+
@Stable
23+
actual fun Modifier.outerPadding(paddingValues: PaddingValues): Modifier =
24+
padding(paddingValues)
25+
26+
@Stable
27+
actual fun Modifier.absoluteOuterPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier =
28+
absolutePadding(left, top, right, bottom)

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
package com.huanshankeji.compose.foundation
22

3+
import com.huanshankeji.compose.foundation.layout.Box
4+
import com.huanshankeji.compose.foundation.layout.ext.outerPadding
35
import com.huanshankeji.compose.ui.Modifier
46
import com.huanshankeji.compose.ui.graphics.Color
57

8+
/**
9+
* For consistency on different platforms, if used with a padding modifier,
10+
* use with [Modifier.outerPadding] and use after it, because the padding is not within the background.
11+
* Otherwise, add an outer [Box] and use [background] on it.
12+
*/
613
expect fun Modifier.background(color: Color): Modifier

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,48 @@ import androidx.compose.runtime.Immutable
44
import androidx.compose.runtime.Stable
55
import androidx.compose.ui.unit.Dp
66
import androidx.compose.ui.unit.dp
7-
import com.huanshankeji.compose.foundation.background
8-
import com.huanshankeji.compose.foundation.onClick
7+
import com.huanshankeji.compose.foundation.layout.ext.innerPadding
8+
import com.huanshankeji.compose.foundation.layout.ext.outerPadding
99
import com.huanshankeji.compose.ui.Modifier
1010

11+
private const val PADDING_DEPRECATED_MESSAGE = "Use `paddingFirst` or checkout out `paddingLast` instead."
12+
1113
/**
12-
* See KDoc of the overload with one parameter for platform differences.
14+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
1315
*/
16+
@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(start, top, end, bottom)"))
1417
@Stable
1518
expect fun Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier
1619

1720
/**
18-
* See KDoc of the overload with one parameter for platform differences.
21+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
1922
*/
23+
@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(horizontal, vertical)"))
2024
@Stable
2125
expect fun Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier
2226

2327
/**
2428
* Padding works differently on `androidx.compose` and CSS.
2529
* In `androidx.compose`, the `padding` modifier adds a layer of wrapper around the component, and [order of modifiers matters](https://developer.android.com/develop/ui/compose/modifiers#order-modifier-matters);
2630
* while in CSS, this function delegates to the `margin` CSS properties.
27-
*
28-
* As a result, for consistency on different platforms, it's recommend to put [padding] before the others such as [background] and [onClick],
29-
* and if you want to add inner padding (corresponding to the CSS `padding`) for the content of a component, you are recommended to wrap the content with a [Box] with [padding].
31+
* @see outerPadding
32+
* @see innerPadding
3033
*/
34+
@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(all)"))
3135
@Stable
3236
expect fun Modifier.padding(all: Dp): Modifier
3337

38+
/**
39+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
40+
*/
41+
@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(paddingValues)"))
3442
@Stable
3543
expect fun Modifier.padding(paddingValues: PaddingValues): Modifier
3644

45+
/**
46+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
47+
*/
48+
@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.absolutePaddingFirst(left, top, right, bottom)"))
3749
@Stable
3850
expect fun Modifier.absolutePadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier
3951

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
package com.huanshankeji.compose.foundation.layout.ext
2+
3+
import androidx.compose.runtime.Stable
4+
import androidx.compose.ui.unit.Dp
5+
import androidx.compose.ui.unit.dp
6+
import com.huanshankeji.compose.foundation.background
7+
import com.huanshankeji.compose.foundation.clickable
8+
import com.huanshankeji.compose.foundation.layout.PaddingValues
9+
import com.huanshankeji.compose.foundation.layout.padding
10+
import com.huanshankeji.compose.ui.Modifier
11+
12+
/**
13+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
14+
*/
15+
@Stable
16+
expect fun Modifier.innerPadding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier
17+
18+
/**
19+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
20+
*/
21+
@Stable
22+
expect fun Modifier.innerPadding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier
23+
24+
/**
25+
* This delegates to the CSS `padding` property on JS DOM and adds the padding inside.
26+
* For consistency on different platforms, please use it as the **last** modifier **after** the other modifiers such as [background] and [clickable].
27+
* See the KDoc of the [padding] overload with one [Dp] parameter for more information.
28+
* @see outerPadding
29+
*/
30+
@Stable
31+
expect fun Modifier.innerPadding(all: Dp): Modifier
32+
33+
/**
34+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
35+
*/
36+
@Stable
37+
expect fun Modifier.innerPadding(paddingValues: PaddingValues): Modifier
38+
39+
/**
40+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
41+
*/
42+
@Stable
43+
expect fun Modifier.absoluteInnerPadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
package com.huanshankeji.compose.foundation.layout.ext
2+
3+
import androidx.compose.runtime.Stable
4+
import androidx.compose.ui.unit.Dp
5+
import androidx.compose.ui.unit.dp
6+
import com.huanshankeji.compose.foundation.background
7+
import com.huanshankeji.compose.foundation.clickable
8+
import com.huanshankeji.compose.foundation.layout.PaddingValues
9+
import com.huanshankeji.compose.foundation.layout.padding
10+
import com.huanshankeji.compose.ui.Modifier
11+
12+
/**
13+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
14+
*/
15+
@Stable
16+
expect fun Modifier.outerPadding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier
17+
18+
/**
19+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
20+
*/
21+
@Stable
22+
expect fun Modifier.outerPadding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier
23+
24+
/**
25+
* This delegates to the CSS `margin` property on JS DOM and adds the padding outside.
26+
* For consistency on different platforms, please use it as the **first** modifier **before** the other modifiers such as [background] and [clickable].
27+
* See the KDoc of the [padding] overload with one [Dp] parameter for more information.
28+
* @see innerPadding
29+
*/
30+
@Stable
31+
expect fun Modifier.outerPadding(all: Dp): Modifier
32+
33+
/**
34+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
35+
*/
36+
@Stable
37+
expect fun Modifier.outerPadding(paddingValues: PaddingValues): Modifier
38+
39+
/**
40+
* See the KDoc of the overload with one [Dp] parameter for platform differences.
41+
*/
42+
@Stable
43+
expect fun Modifier.absoluteOuterPadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier

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

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,29 @@ package com.huanshankeji.compose.foundation.layout
33
import androidx.compose.runtime.Immutable
44
import androidx.compose.runtime.Stable
55
import androidx.compose.ui.unit.Dp
6+
import com.huanshankeji.compose.foundation.layout.ext.absoluteOuterPadding
7+
import com.huanshankeji.compose.foundation.layout.ext.outerPadding
68
import com.huanshankeji.compose.ui.Modifier
7-
import com.huanshankeji.compose.ui.unit.toPx
8-
import com.varabyte.kobweb.compose.ui.modifiers.margin
9-
import com.varabyte.kobweb.compose.ui.modifiers.marginInline
109

1110
@Stable
1211
actual fun Modifier.padding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier =
13-
platformModify {
14-
marginInline(start.toPx(), end.toPx())
15-
.margin {
16-
top(top.toPx())
17-
bottom(bottom.toPx())
18-
}
19-
}
12+
outerPadding(start, top, end, bottom)
2013

2114
@Stable
2215
actual fun Modifier.padding(horizontal: Dp, vertical: Dp): Modifier =
23-
platformModify { margin(vertical.toPx(), horizontal.toPx()) }
16+
outerPadding(horizontal, vertical)
2417

2518
@Stable
2619
actual fun Modifier.padding(all: Dp): Modifier =
27-
platformModify { margin(all.toPx()) }
20+
outerPadding(all)
2821

2922
@Stable
3023
actual fun Modifier.padding(paddingValues: PaddingValues): Modifier =
31-
when (paddingValues) {
32-
is PaddingValues.Absolute -> with(paddingValues) { absolutePadding(left, top, right, bottom) }
33-
is PaddingValuesImpl -> with(paddingValues) { padding(start, top, end, bottom) }
34-
else -> throw IllegalArgumentException(paddingValues.toString())
35-
}
24+
outerPadding(paddingValues)
3625

3726
@Stable
3827
actual fun Modifier.absolutePadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier =
39-
platformModify { margin(top.toPx(), right.toPx(), bottom.toPx(), left.toPx()) }
28+
absoluteOuterPadding(left, top, right, bottom)
4029

4130
// copied and adapted from `androidx.compose.foundation.layout.Padding.kt`
4231

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
package com.huanshankeji.compose.foundation.layout.ext
2+
3+
import androidx.compose.runtime.Stable
4+
import androidx.compose.ui.unit.Dp
5+
import com.huanshankeji.compose.foundation.layout.PaddingValues
6+
import com.huanshankeji.compose.foundation.layout.PaddingValuesImpl
7+
import com.huanshankeji.compose.ui.Modifier
8+
import com.huanshankeji.compose.ui.unit.toPx
9+
import com.varabyte.kobweb.compose.ui.modifiers.padding
10+
import com.varabyte.kobweb.compose.ui.modifiers.paddingInline
11+
12+
@Stable
13+
actual fun Modifier.innerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier =
14+
platformModify {
15+
paddingInline(start.toPx(), end.toPx())
16+
.padding {
17+
top(top.toPx())
18+
bottom(bottom.toPx())
19+
}
20+
}
21+
22+
@Stable
23+
actual fun Modifier.innerPadding(horizontal: Dp, vertical: Dp): Modifier =
24+
platformModify { padding(vertical.toPx(), horizontal.toPx()) }
25+
26+
@Stable
27+
actual fun Modifier.innerPadding(all: Dp): Modifier =
28+
platformModify { padding(all.toPx()) }
29+
30+
@Stable
31+
actual fun Modifier.innerPadding(paddingValues: PaddingValues): Modifier =
32+
when (paddingValues) {
33+
is PaddingValues.Absolute -> with(paddingValues) { absoluteInnerPadding(left, top, right, bottom) }
34+
is PaddingValuesImpl -> with(paddingValues) { innerPadding(start, top, end, bottom) }
35+
else -> throw IllegalArgumentException(paddingValues.toString())
36+
}
37+
38+
@Stable
39+
actual fun Modifier.absoluteInnerPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier =
40+
platformModify { padding(top.toPx(), right.toPx(), bottom.toPx(), left.toPx()) }

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
package com.huanshankeji.compose.foundation.layout.ext
2+
3+
import androidx.compose.runtime.Stable
4+
import androidx.compose.ui.unit.Dp
5+
import com.huanshankeji.compose.foundation.layout.PaddingValues
6+
import com.huanshankeji.compose.foundation.layout.PaddingValuesImpl
7+
import com.huanshankeji.compose.ui.Modifier
8+
import com.huanshankeji.compose.ui.unit.toPx
9+
import com.varabyte.kobweb.compose.ui.modifiers.margin
10+
import com.varabyte.kobweb.compose.ui.modifiers.marginInline
11+
12+
@Stable
13+
actual fun Modifier.outerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier =
14+
platformModify {
15+
marginInline(start.toPx(), end.toPx())
16+
.margin {
17+
top(top.toPx())
18+
bottom(bottom.toPx())
19+
}
20+
}
21+
22+
@Stable
23+
actual fun Modifier.outerPadding(horizontal: Dp, vertical: Dp): Modifier =
24+
platformModify { margin(vertical.toPx(), horizontal.toPx()) }
25+
26+
@Stable
27+
actual fun Modifier.outerPadding(all: Dp): Modifier =
28+
platformModify { margin(all.toPx()) }
29+
30+
@Stable
31+
actual fun Modifier.outerPadding(paddingValues: PaddingValues): Modifier =
32+
when (paddingValues) {
33+
is PaddingValues.Absolute -> with(paddingValues) { absoluteOuterPadding(left, top, right, bottom) }
34+
is PaddingValuesImpl -> with(paddingValues) { outerPadding(start, top, end, bottom) }
35+
else -> throw IllegalArgumentException(paddingValues.toString())
36+
}
37+
38+
@Stable
39+
actual fun Modifier.absoluteOuterPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier =
40+
platformModify { margin(top.toPx(), right.toPx(), bottom.toPx(), left.toPx()) }

0 commit comments

Comments
 (0)