@momo-kits/native-kits 0.113.1-beta.16 → 0.113.1-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/Header.kt +0 -1
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderExtended.kt +10 -34
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt +1 -1
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/useHeaderSearchAnimation.kt +69 -0
- package/package.json +1 -1
- package/Screenshot_20250305_142328.png +0 -0
|
@@ -137,7 +137,6 @@ fun Header(
|
|
|
137
137
|
if (goBack != null && titlePosition == TitlePosition.LEFT) {
|
|
138
138
|
Spacer(Modifier.width(40.dp))
|
|
139
139
|
}
|
|
140
|
-
|
|
141
140
|
if (inputSearchProps != null && !useAnimationSearch) {
|
|
142
141
|
InputSearch(inputSearchProps = inputSearchProps.copy(backgroundColor = backgroundSearch))
|
|
143
142
|
} else {
|
|
@@ -33,9 +33,6 @@ import vn.momo.kits.const.Spacing
|
|
|
33
33
|
import vn.momo.kits.platform.getScreenDimensions
|
|
34
34
|
import vn.momo.kits.utils.bottomBorder
|
|
35
35
|
|
|
36
|
-
private const val SCREEN_PADDING = 12
|
|
37
|
-
private const val BACK_WIDTH = 28
|
|
38
|
-
|
|
39
36
|
@Composable
|
|
40
37
|
fun HeaderExtended(
|
|
41
38
|
opacityAni: Float,
|
|
@@ -47,38 +44,17 @@ fun HeaderExtended(
|
|
|
47
44
|
statusBarHeight: Dp,
|
|
48
45
|
backgroundColor: Color
|
|
49
46
|
) {
|
|
50
|
-
val
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
AppTheme.current.colors.background.default,
|
|
57
|
-
Colors.black_01,
|
|
58
|
-
opacityAni
|
|
59
|
-
),
|
|
60
|
-
)
|
|
61
|
-
|
|
62
|
-
val animatedTranslateX by animateFloatAsState(
|
|
63
|
-
targetValue = (scrollState / 52f).coerceIn(0f, 1f) * (leftPosition.value - 12) + 12,
|
|
47
|
+
val animations = useHeaderSearchAnimation(
|
|
48
|
+
opacityAni = opacityAni,
|
|
49
|
+
scrollState = scrollState,
|
|
50
|
+
headerRightWidth = headerRightWidth,
|
|
51
|
+
statusBarHeight = statusBarHeight,
|
|
52
|
+
isBack = isBack
|
|
64
53
|
)
|
|
65
54
|
|
|
66
|
-
val animatedWidth by animateFloatAsState(
|
|
67
|
-
targetValue = (scrollState / 52f).coerceIn(
|
|
68
|
-
0f,
|
|
69
|
-
1f
|
|
70
|
-
) * ((searchWidth - leftPosition.value - headerRightWidth.value + 12) - searchWidth) + searchWidth,
|
|
71
|
-
)
|
|
72
|
-
|
|
73
|
-
val animatedHeight by animateFloatAsState(
|
|
74
|
-
targetValue = (1 - (scrollState / 52f).coerceIn(
|
|
75
|
-
0f,
|
|
76
|
-
1f
|
|
77
|
-
)) * (statusBarHeight.value + 94 - (statusBarHeight.value + 52)) + (statusBarHeight.value + 52),
|
|
78
|
-
)
|
|
79
55
|
Box(
|
|
80
56
|
modifier = Modifier.fillMaxWidth()
|
|
81
|
-
.height(
|
|
57
|
+
.height(animations.height.dp)
|
|
82
58
|
) {
|
|
83
59
|
Box(
|
|
84
60
|
modifier = Modifier
|
|
@@ -132,16 +108,16 @@ fun HeaderExtended(
|
|
|
132
108
|
modifier = Modifier
|
|
133
109
|
.height(52.dp)
|
|
134
110
|
.offset(
|
|
135
|
-
x =
|
|
111
|
+
x = animations.translateX.dp
|
|
136
112
|
)
|
|
137
113
|
.padding(vertical = Spacing.S)
|
|
138
114
|
.align(Alignment.BottomStart)
|
|
139
115
|
) {
|
|
140
116
|
Box(
|
|
141
117
|
modifier = Modifier
|
|
142
|
-
.width(
|
|
118
|
+
.width(animations.width.dp)
|
|
143
119
|
.background(
|
|
144
|
-
color = backgroundSearch,
|
|
120
|
+
color = animations.backgroundSearch,
|
|
145
121
|
shape = RoundedCornerShape(Radius.XL)
|
|
146
122
|
)
|
|
147
123
|
) {
|
|
@@ -165,7 +165,7 @@ fun Screen(
|
|
|
165
165
|
Spacer(modifier = Modifier.padding(top = statusBarHeight + 52.dp + layoutOffset))
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
-
if (useAnimationSearch && headerType == HeaderType.EXTENDED
|
|
168
|
+
if (useAnimationSearch && inputSearchProps != null && headerType == HeaderType.EXTENDED) {
|
|
169
169
|
Spacer(modifier = Modifier.padding(top = statusBarHeight))
|
|
170
170
|
}
|
|
171
171
|
content()
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
package vn.momo.kits.application
|
|
2
|
+
|
|
3
|
+
import androidx.compose.animation.animateColorAsState
|
|
4
|
+
import androidx.compose.animation.core.animateFloatAsState
|
|
5
|
+
import androidx.compose.runtime.Composable
|
|
6
|
+
import androidx.compose.runtime.getValue
|
|
7
|
+
import androidx.compose.ui.graphics.Color
|
|
8
|
+
import androidx.compose.ui.unit.Dp
|
|
9
|
+
import androidx.compose.ui.unit.dp
|
|
10
|
+
import vn.momo.kits.const.AppTheme
|
|
11
|
+
import vn.momo.kits.const.Colors
|
|
12
|
+
import vn.momo.kits.platform.getScreenDimensions
|
|
13
|
+
|
|
14
|
+
data class HeaderAnimations(
|
|
15
|
+
val opacity: Float,
|
|
16
|
+
val backgroundSearch: Color,
|
|
17
|
+
val translateX: Float,
|
|
18
|
+
val width: Float,
|
|
19
|
+
val height: Float
|
|
20
|
+
)
|
|
21
|
+
|
|
22
|
+
private const val SCREEN_PADDING = 12
|
|
23
|
+
private const val BACK_WIDTH = 28
|
|
24
|
+
|
|
25
|
+
@Composable
|
|
26
|
+
fun useHeaderSearchAnimation(
|
|
27
|
+
opacityAni: Float,
|
|
28
|
+
scrollState: Int,
|
|
29
|
+
headerRightWidth: Dp,
|
|
30
|
+
statusBarHeight: Dp,
|
|
31
|
+
isBack: Boolean
|
|
32
|
+
): HeaderAnimations {
|
|
33
|
+
val screenWidth = getScreenDimensions().width
|
|
34
|
+
val leftPosition = if (isBack) (BACK_WIDTH + 20).dp else 20.dp
|
|
35
|
+
val searchWidth = screenWidth - (SCREEN_PADDING * 2)
|
|
36
|
+
|
|
37
|
+
val backgroundSearch by animateColorAsState(
|
|
38
|
+
targetValue = animateColor(
|
|
39
|
+
AppTheme.current.colors.background.default,
|
|
40
|
+
Colors.black_01,
|
|
41
|
+
opacityAni
|
|
42
|
+
),
|
|
43
|
+
)
|
|
44
|
+
|
|
45
|
+
val animatedTranslateX by animateFloatAsState(
|
|
46
|
+
targetValue = (scrollState / 52f).coerceIn(0f, 1f) * (leftPosition.value - 12) + 12,
|
|
47
|
+
)
|
|
48
|
+
|
|
49
|
+
val animatedWidth by animateFloatAsState(
|
|
50
|
+
targetValue = (scrollState / 52f).coerceIn(
|
|
51
|
+
0f,
|
|
52
|
+
1f
|
|
53
|
+
) * ((searchWidth - leftPosition.value - headerRightWidth.value + 12) - searchWidth) + searchWidth,
|
|
54
|
+
)
|
|
55
|
+
|
|
56
|
+
val animatedHeight by animateFloatAsState(
|
|
57
|
+
targetValue = (1 - (scrollState / 52f).coerceIn(
|
|
58
|
+
0f,
|
|
59
|
+
1f
|
|
60
|
+
)) * (statusBarHeight.value + 94 - (statusBarHeight.value + 52)) + (statusBarHeight.value + 52),
|
|
61
|
+
)
|
|
62
|
+
return HeaderAnimations(
|
|
63
|
+
opacity = opacityAni,
|
|
64
|
+
backgroundSearch = backgroundSearch,
|
|
65
|
+
translateX = animatedTranslateX,
|
|
66
|
+
width = animatedWidth,
|
|
67
|
+
height = animatedHeight
|
|
68
|
+
)
|
|
69
|
+
}
|
package/package.json
CHANGED
|
Binary file
|