@momo-kits/native-kits 0.89.33-beta.37 → 0.89.33-beta.40
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/Components.kt +39 -22
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/NavigationContainer.kt +11 -3
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt +25 -2
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/InputSearch.kt +5 -1
- package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt +2 -2
- package/package.json +1 -1
|
@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.Box
|
|
|
10
10
|
import androidx.compose.foundation.layout.BoxWithConstraints
|
|
11
11
|
import androidx.compose.foundation.layout.Row
|
|
12
12
|
import androidx.compose.foundation.layout.Spacer
|
|
13
|
+
import androidx.compose.foundation.layout.fillMaxSize
|
|
13
14
|
import androidx.compose.foundation.layout.fillMaxWidth
|
|
14
15
|
import androidx.compose.foundation.layout.height
|
|
15
16
|
import androidx.compose.foundation.layout.padding
|
|
@@ -66,6 +67,7 @@ data class AnimatedHeader(
|
|
|
66
67
|
@Composable
|
|
67
68
|
fun HeaderBackground(
|
|
68
69
|
headerType: HeaderType = HeaderType.DEFAULT,
|
|
70
|
+
headerBanner: String? = null,
|
|
69
71
|
scrollState: Int
|
|
70
72
|
) {
|
|
71
73
|
val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
|
|
@@ -73,6 +75,14 @@ fun HeaderBackground(
|
|
|
73
75
|
targetValue = (1 - (scrollState / 200f)).coerceIn(0f, 1f),
|
|
74
76
|
)
|
|
75
77
|
|
|
78
|
+
|
|
79
|
+
val backgroundColor = if (scrollState == 0) {
|
|
80
|
+
Color.Transparent
|
|
81
|
+
} else {
|
|
82
|
+
AppTheme.current.colors.background.surface
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
|
|
76
86
|
when (headerType) {
|
|
77
87
|
HeaderType.DEFAULT -> {
|
|
78
88
|
val height = statusBarHeight + 52.dp
|
|
@@ -82,6 +92,7 @@ fun HeaderBackground(
|
|
|
82
92
|
strokeWidth = 1.dp,
|
|
83
93
|
color = AppTheme.current.colors.border.default
|
|
84
94
|
)
|
|
95
|
+
.background(backgroundColor)
|
|
85
96
|
) {
|
|
86
97
|
Box(
|
|
87
98
|
modifier = Modifier
|
|
@@ -101,7 +112,7 @@ fun HeaderBackground(
|
|
|
101
112
|
)
|
|
102
113
|
if (AppTheme.current.assets.headerBackground != null) {
|
|
103
114
|
Image(
|
|
104
|
-
source = AppTheme.current.assets.headerBackground!!,
|
|
115
|
+
source = headerBanner ?: AppTheme.current.assets.headerBackground!!,
|
|
105
116
|
modifier = Modifier.fillMaxWidth().height(height),
|
|
106
117
|
options = Options(
|
|
107
118
|
contentScale = ContentScale.FillWidth
|
|
@@ -113,28 +124,34 @@ fun HeaderBackground(
|
|
|
113
124
|
}
|
|
114
125
|
|
|
115
126
|
HeaderType.EXTENDED -> {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
.
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
) {
|
|
130
|
-
if (AppTheme.current.assets.headerBackground != null) {
|
|
131
|
-
Image(
|
|
132
|
-
source = AppTheme.current.assets.headerBackground!!,
|
|
133
|
-
modifier = Modifier.fillMaxWidth().height(154.dp),
|
|
134
|
-
options = Options(
|
|
135
|
-
contentScale = ContentScale.FillWidth
|
|
127
|
+
|
|
128
|
+
Box(
|
|
129
|
+
modifier = Modifier.fillMaxWidth().height(154.dp)
|
|
130
|
+
.alpha(opacityAni)
|
|
131
|
+
.background(
|
|
132
|
+
Brush.linearGradient(
|
|
133
|
+
colors = listOf(
|
|
134
|
+
Color(0xFFFDCADE),
|
|
135
|
+
Color(0x00FDCADE)
|
|
136
|
+
),
|
|
137
|
+
start = Offset(0f, 0f),
|
|
138
|
+
end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
|
|
139
|
+
)
|
|
136
140
|
)
|
|
137
|
-
|
|
141
|
+
) {
|
|
142
|
+
if (AppTheme.current.assets.headerBackground != null) {
|
|
143
|
+
Box(
|
|
144
|
+
modifier = Modifier.fillMaxWidth()
|
|
145
|
+
.background(backgroundColor)
|
|
146
|
+
) {
|
|
147
|
+
Image(
|
|
148
|
+
source = headerBanner ?: AppTheme.current.assets.headerBackground!!,
|
|
149
|
+
modifier = Modifier.fillMaxWidth().height(154.dp),
|
|
150
|
+
options = Options(
|
|
151
|
+
contentScale = ContentScale.FillWidth
|
|
152
|
+
)
|
|
153
|
+
)
|
|
154
|
+
}
|
|
138
155
|
}
|
|
139
156
|
}
|
|
140
157
|
}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
package vn.momo.kits.application
|
|
2
2
|
|
|
3
|
-
import androidx.compose.foundation.layout.WindowInsets
|
|
4
|
-
import androidx.compose.foundation.layout.asPaddingValues
|
|
5
|
-
import androidx.compose.foundation.layout.systemBars
|
|
6
3
|
import androidx.compose.runtime.Composable
|
|
7
4
|
import androidx.compose.runtime.CompositionLocalProvider
|
|
8
5
|
import androidx.compose.runtime.staticCompositionLocalOf
|
|
@@ -17,6 +14,8 @@ val AppNavigator = staticCompositionLocalOf<Navigator> {
|
|
|
17
14
|
error("no navigator provided!")
|
|
18
15
|
}
|
|
19
16
|
|
|
17
|
+
val PlatformApi = staticCompositionLocalOf<ComposeApi?> { null }
|
|
18
|
+
|
|
20
19
|
class Navigator {
|
|
21
20
|
fun push(content: @Composable () -> Unit) {
|
|
22
21
|
}
|
|
@@ -49,14 +48,23 @@ class Navigator {
|
|
|
49
48
|
}
|
|
50
49
|
}
|
|
51
50
|
|
|
51
|
+
interface ComposeApi {
|
|
52
|
+
fun request(funcName: String, params: String?): String
|
|
53
|
+
fun request(funcName: String, params: String?, onResponse: ((String) -> Unit)?): String
|
|
54
|
+
fun requestCallback(funcName: String, params: String?, onResponse: ((String) -> Unit)?)
|
|
55
|
+
fun removeCallback(id: String)
|
|
56
|
+
}
|
|
57
|
+
|
|
52
58
|
@Composable
|
|
53
59
|
fun ApplicationContainer(
|
|
54
60
|
theme: Theme = defaultTheme,
|
|
61
|
+
composeApi: ComposeApi,
|
|
55
62
|
content: @Composable () -> Unit,
|
|
56
63
|
) {
|
|
57
64
|
disableOverscroll()
|
|
58
65
|
CompositionLocalProvider(
|
|
59
66
|
AppTheme provides theme,
|
|
67
|
+
PlatformApi provides composeApi,
|
|
60
68
|
AppNavigator provides Navigator(),
|
|
61
69
|
AppStatusBar provides getStatusBarHeight(),
|
|
62
70
|
) {
|
|
@@ -19,7 +19,11 @@ import androidx.compose.foundation.layout.systemBars
|
|
|
19
19
|
import androidx.compose.foundation.rememberScrollState
|
|
20
20
|
import androidx.compose.foundation.verticalScroll
|
|
21
21
|
import androidx.compose.runtime.Composable
|
|
22
|
+
import androidx.compose.runtime.LaunchedEffect
|
|
22
23
|
import androidx.compose.runtime.getValue
|
|
24
|
+
import androidx.compose.runtime.mutableStateOf
|
|
25
|
+
import androidx.compose.runtime.remember
|
|
26
|
+
import androidx.compose.runtime.setValue
|
|
23
27
|
import androidx.compose.ui.Alignment
|
|
24
28
|
import androidx.compose.ui.Modifier
|
|
25
29
|
import androidx.compose.ui.graphics.Color
|
|
@@ -32,6 +36,8 @@ import androidx.compose.ui.unit.Dp
|
|
|
32
36
|
import androidx.compose.ui.unit.dp
|
|
33
37
|
import androidx.compose.ui.unit.min
|
|
34
38
|
import androidx.compose.ui.zIndex
|
|
39
|
+
import kotlinx.serialization.json.Json
|
|
40
|
+
import kotlinx.serialization.json.jsonObject
|
|
35
41
|
import vn.momo.kits.components.InputSearchProps
|
|
36
42
|
import vn.momo.kits.const.AppStatusBar
|
|
37
43
|
import vn.momo.kits.const.AppTheme
|
|
@@ -79,6 +85,17 @@ fun Screen(
|
|
|
79
85
|
else -> 0.dp
|
|
80
86
|
}
|
|
81
87
|
|
|
88
|
+
val platformApi = PlatformApi.current
|
|
89
|
+
var headerBanner by remember { mutableStateOf("") }
|
|
90
|
+
|
|
91
|
+
LaunchedEffect(Unit) {
|
|
92
|
+
platformApi?.request("getConfig", "DESIGN_SYSTEM") {
|
|
93
|
+
val json = Json { ignoreUnknownKeys = true }
|
|
94
|
+
val response = json.parseToJsonElement(it).jsonObject.toMap()
|
|
95
|
+
headerBanner = response["response"]?.jsonObject?.toMap()?.get("headerBar").toString()
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
82
99
|
val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
|
|
83
100
|
val bottomPadding = min(indicator, 21.dp)
|
|
84
101
|
|
|
@@ -87,7 +104,9 @@ fun Screen(
|
|
|
87
104
|
)
|
|
88
105
|
|
|
89
106
|
val headerAnimated =
|
|
90
|
-
@Composable {
|
|
107
|
+
@Composable {
|
|
108
|
+
animatedHeader?.composable?.invoke(scrollState.value)
|
|
109
|
+
}
|
|
91
110
|
|
|
92
111
|
Box(
|
|
93
112
|
Modifier.fillMaxSize()
|
|
@@ -95,7 +114,11 @@ fun Screen(
|
|
|
95
114
|
) {
|
|
96
115
|
|
|
97
116
|
if (animatedHeader === null) {
|
|
98
|
-
HeaderBackground(
|
|
117
|
+
HeaderBackground(
|
|
118
|
+
headerType = headerType,
|
|
119
|
+
scrollState = scrollState.value,
|
|
120
|
+
headerBanner = headerBanner
|
|
121
|
+
)
|
|
99
122
|
} else {
|
|
100
123
|
Box(
|
|
101
124
|
Modifier.zIndex(2f)
|
|
@@ -98,6 +98,7 @@ data class InputSearchProps(
|
|
|
98
98
|
val keyboardActions: KeyboardActions = KeyboardActions.Default,
|
|
99
99
|
val modifier: Modifier = Modifier,
|
|
100
100
|
val iconModifier: Modifier = Modifier,
|
|
101
|
+
val onClearPress: () -> Unit = {}
|
|
101
102
|
)
|
|
102
103
|
|
|
103
104
|
@Composable
|
|
@@ -195,7 +196,10 @@ fun InputSearch(
|
|
|
195
196
|
size = 16.dp,
|
|
196
197
|
color = AppTheme.current.colors.text.hint,
|
|
197
198
|
modifier = Modifier.clickable(
|
|
198
|
-
onClick = {
|
|
199
|
+
onClick = {
|
|
200
|
+
inputSearchProps.text.value = ""
|
|
201
|
+
inputSearchProps.onClearPress.invoke()
|
|
202
|
+
},
|
|
199
203
|
interactionSource = remember { MutableInteractionSource() },
|
|
200
204
|
indication = null
|
|
201
205
|
)
|
|
@@ -106,7 +106,7 @@ val defaultTheme = Theme(
|
|
|
106
106
|
),
|
|
107
107
|
font = "SFProText",
|
|
108
108
|
assets = ThemeAssets(
|
|
109
|
-
headerBackground =
|
|
109
|
+
headerBackground = null
|
|
110
110
|
)
|
|
111
111
|
)
|
|
112
112
|
|
|
@@ -162,7 +162,7 @@ val darkTheme = Theme(
|
|
|
162
162
|
),
|
|
163
163
|
font = "SFProText",
|
|
164
164
|
assets = ThemeAssets(
|
|
165
|
-
headerBackground = "https://static.momocdn.net/app/img/
|
|
165
|
+
headerBackground = "https://static.momocdn.net/app/img/app/img/header-background.png"
|
|
166
166
|
)
|
|
167
167
|
)
|
|
168
168
|
|