@momo-kits/native-kits 0.89.33-beta.30 → 0.89.33-beta.32
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/build.gradle.kts +2 -0
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/Components.kt +3 -2
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/NavigationContainer.kt +0 -3
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt +9 -2
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/InputSearch.kt +24 -9
- package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt +2 -2
- package/package.json +1 -1
package/compose/build.gradle.kts
CHANGED
|
@@ -39,6 +39,8 @@ kotlin {
|
|
|
39
39
|
implementation(libs.coil.multiplatform.compose)
|
|
40
40
|
implementation(libs.coil.multiplatform.core)
|
|
41
41
|
implementation(libs.coil.multiplatform.network.ktor)
|
|
42
|
+
implementation("com.google.code.gson:gson:2.10")
|
|
43
|
+
implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0")
|
|
42
44
|
}
|
|
43
45
|
}
|
|
44
46
|
val androidMain by getting {
|
|
@@ -66,6 +66,7 @@ data class AnimatedHeader(
|
|
|
66
66
|
@Composable
|
|
67
67
|
fun HeaderBackground(
|
|
68
68
|
headerType: HeaderType = HeaderType.DEFAULT,
|
|
69
|
+
headerBanner: String? = null,
|
|
69
70
|
scrollState: Int
|
|
70
71
|
) {
|
|
71
72
|
val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
|
|
@@ -101,7 +102,7 @@ fun HeaderBackground(
|
|
|
101
102
|
)
|
|
102
103
|
if (AppTheme.current.assets.headerBackground != null) {
|
|
103
104
|
Image(
|
|
104
|
-
source = AppTheme.current.assets.headerBackground!!,
|
|
105
|
+
source = headerBanner ?: AppTheme.current.assets.headerBackground!!,
|
|
105
106
|
modifier = Modifier.fillMaxWidth().height(height),
|
|
106
107
|
options = Options(
|
|
107
108
|
contentScale = ContentScale.FillWidth
|
|
@@ -129,7 +130,7 @@ fun HeaderBackground(
|
|
|
129
130
|
) {
|
|
130
131
|
if (AppTheme.current.assets.headerBackground != null) {
|
|
131
132
|
Image(
|
|
132
|
-
source = AppTheme.current.assets.headerBackground!!,
|
|
133
|
+
source = headerBanner ?: AppTheme.current.assets.headerBackground!!,
|
|
133
134
|
modifier = Modifier.fillMaxWidth().height(154.dp),
|
|
134
135
|
options = Options(
|
|
135
136
|
contentScale = ContentScale.FillWidth
|
|
@@ -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
|
|
@@ -32,6 +32,7 @@ import androidx.compose.ui.unit.Dp
|
|
|
32
32
|
import androidx.compose.ui.unit.dp
|
|
33
33
|
import androidx.compose.ui.unit.min
|
|
34
34
|
import androidx.compose.ui.zIndex
|
|
35
|
+
import kotlinx.serialization.json.Json
|
|
35
36
|
import vn.momo.kits.components.InputSearchProps
|
|
36
37
|
import vn.momo.kits.const.AppStatusBar
|
|
37
38
|
import vn.momo.kits.const.AppTheme
|
|
@@ -47,6 +48,8 @@ enum class HeaderType {
|
|
|
47
48
|
NONE
|
|
48
49
|
}
|
|
49
50
|
|
|
51
|
+
data class ConfigData(val headerBanner: String)
|
|
52
|
+
|
|
50
53
|
@Composable
|
|
51
54
|
fun Screen(
|
|
52
55
|
backgroundColor: Color? = null,
|
|
@@ -70,7 +73,6 @@ fun Screen(
|
|
|
70
73
|
content: @Composable () -> Unit,
|
|
71
74
|
) {
|
|
72
75
|
val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
|
|
73
|
-
val platformApi = PlatformApi.current
|
|
74
76
|
val keyboardController = LocalSoftwareKeyboardController.current
|
|
75
77
|
val keyboardHeight = WindowInsets.ime.asPaddingValues().calculateBottomPadding()
|
|
76
78
|
val keyboardSize = when {
|
|
@@ -80,6 +82,11 @@ fun Screen(
|
|
|
80
82
|
else -> 0.dp
|
|
81
83
|
}
|
|
82
84
|
|
|
85
|
+
val platformApi = PlatformApi.current
|
|
86
|
+
val rawData = platformApi.request("GetConfig", "DESIGN_SYSTEM")
|
|
87
|
+
val json = Json {ignoreUnknownKeys = true}
|
|
88
|
+
val headerBanner = json.decodeFromString<ConfigData>(rawData).headerBanner
|
|
89
|
+
|
|
83
90
|
val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
|
|
84
91
|
val bottomPadding = min(indicator, 21.dp)
|
|
85
92
|
|
|
@@ -96,7 +103,7 @@ fun Screen(
|
|
|
96
103
|
) {
|
|
97
104
|
|
|
98
105
|
if (animatedHeader === null) {
|
|
99
|
-
HeaderBackground(headerType = headerType, scrollState = scrollState.value)
|
|
106
|
+
HeaderBackground(headerType = headerType, scrollState = scrollState.value, headerBanner=headerBanner)
|
|
100
107
|
} else {
|
|
101
108
|
Box(
|
|
102
109
|
Modifier.zIndex(2f)
|
|
@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.size
|
|
|
15
15
|
import androidx.compose.foundation.layout.width
|
|
16
16
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
17
17
|
import androidx.compose.foundation.text.BasicTextField
|
|
18
|
+
import androidx.compose.foundation.text.KeyboardActions
|
|
18
19
|
import androidx.compose.foundation.text.KeyboardOptions
|
|
19
20
|
import androidx.compose.material3.CircularProgressIndicator
|
|
20
21
|
import androidx.compose.runtime.Composable
|
|
@@ -29,6 +30,7 @@ import androidx.compose.ui.focus.onFocusChanged
|
|
|
29
30
|
import androidx.compose.ui.graphics.Color
|
|
30
31
|
import androidx.compose.ui.text.TextStyle
|
|
31
32
|
import androidx.compose.ui.text.input.KeyboardType
|
|
33
|
+
import androidx.compose.ui.text.style.TextOverflow
|
|
32
34
|
import androidx.compose.ui.unit.dp
|
|
33
35
|
import androidx.compose.ui.unit.sp
|
|
34
36
|
import vn.momo.kits.const.AppTheme
|
|
@@ -44,6 +46,7 @@ fun RenderRightIconSearch(
|
|
|
44
46
|
icon: String,
|
|
45
47
|
color: Color,
|
|
46
48
|
onClick: () -> Unit,
|
|
49
|
+
iconModifier: Modifier = Modifier
|
|
47
50
|
) {
|
|
48
51
|
if (loading) {
|
|
49
52
|
Box(Modifier.padding(horizontal = Spacing.S)) {
|
|
@@ -64,7 +67,7 @@ fun RenderRightIconSearch(
|
|
|
64
67
|
source = icon,
|
|
65
68
|
color = color,
|
|
66
69
|
size = 24.dp,
|
|
67
|
-
modifier =
|
|
70
|
+
modifier = iconModifier.padding(start = Spacing.S, end = 0.dp).clickable(
|
|
68
71
|
onClick = onClick,
|
|
69
72
|
interactionSource = remember { MutableInteractionSource() },
|
|
70
73
|
indication = null
|
|
@@ -90,6 +93,11 @@ data class InputSearchProps(
|
|
|
90
93
|
val fontWeight: InputFontWeight = InputFontWeight.REGULAR,
|
|
91
94
|
val keyboardType: KeyboardType = KeyboardType.Text,
|
|
92
95
|
val backgroundColor: Color = Colors.black_01,
|
|
96
|
+
val clearCondition: (() -> Boolean)? = null,
|
|
97
|
+
val keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
|
|
98
|
+
val keyboardActions: KeyboardActions = KeyboardActions.Default,
|
|
99
|
+
val modifier: Modifier = Modifier,
|
|
100
|
+
val iconModifier: Modifier = Modifier,
|
|
93
101
|
)
|
|
94
102
|
|
|
95
103
|
@Composable
|
|
@@ -98,7 +106,6 @@ fun InputSearch(
|
|
|
98
106
|
text = remember { mutableStateOf("") },
|
|
99
107
|
iconColor = AppTheme.current.colors.text.default
|
|
100
108
|
),
|
|
101
|
-
|
|
102
109
|
) {
|
|
103
110
|
var isFocused by remember { mutableStateOf(false) }
|
|
104
111
|
var isBlurred = false
|
|
@@ -124,8 +131,9 @@ fun InputSearch(
|
|
|
124
131
|
lineHeight = 20.sp,
|
|
125
132
|
fontWeight = inputSearchProps.fontWeight.value
|
|
126
133
|
),
|
|
127
|
-
keyboardOptions =
|
|
128
|
-
|
|
134
|
+
keyboardOptions = inputSearchProps.keyboardOptions.copy(keyboardType = inputSearchProps.keyboardType),
|
|
135
|
+
keyboardActions = inputSearchProps.keyboardActions,
|
|
136
|
+
modifier = inputSearchProps.modifier.height(36.dp).onFocusChanged {
|
|
129
137
|
isFocused = it.isFocused
|
|
130
138
|
if (it.isFocused) {
|
|
131
139
|
inputSearchProps.onFocus()
|
|
@@ -137,7 +145,12 @@ fun InputSearch(
|
|
|
137
145
|
decorationBox = { innerTextField ->
|
|
138
146
|
Row(verticalAlignment = Alignment.CenterVertically) {
|
|
139
147
|
Row(
|
|
140
|
-
modifier = Modifier.weight(
|
|
148
|
+
modifier = Modifier.weight(
|
|
149
|
+
inputSearchProps.showButtonText.ifTrue(
|
|
150
|
+
8f,
|
|
151
|
+
1f
|
|
152
|
+
)
|
|
153
|
+
)
|
|
141
154
|
.background(
|
|
142
155
|
inputSearchProps.backgroundColor,
|
|
143
156
|
RoundedCornerShape(Radius.XL)
|
|
@@ -152,7 +165,6 @@ fun InputSearch(
|
|
|
152
165
|
),
|
|
153
166
|
verticalAlignment = Alignment.CenterVertically
|
|
154
167
|
) {
|
|
155
|
-
//leading icon
|
|
156
168
|
Icon(
|
|
157
169
|
source = "navigation_search",
|
|
158
170
|
modifier = Modifier.padding(end = Spacing.XS),
|
|
@@ -168,12 +180,14 @@ fun InputSearch(
|
|
|
168
180
|
lineHeight = 24.sp,
|
|
169
181
|
fontWeight = inputSearchProps.fontWeight.value
|
|
170
182
|
),
|
|
171
|
-
|
|
183
|
+
maxLines = 1,
|
|
184
|
+
color = placeholderColor,
|
|
185
|
+
overflow = TextOverflow.Ellipsis
|
|
172
186
|
)
|
|
173
187
|
}
|
|
174
188
|
innerTextField()
|
|
175
189
|
}
|
|
176
|
-
if (isFocused && inputSearchProps.text.value.isNotEmpty()) {
|
|
190
|
+
if (inputSearchProps.clearCondition?.invoke() == true || (isFocused && inputSearchProps.text.value.isNotEmpty())) {
|
|
177
191
|
Row {
|
|
178
192
|
Spacer(Modifier.width(Spacing.XS))
|
|
179
193
|
Icon(
|
|
@@ -192,7 +206,8 @@ fun InputSearch(
|
|
|
192
206
|
inputSearchProps.loading,
|
|
193
207
|
inputSearchProps.icon,
|
|
194
208
|
iconTintColor,
|
|
195
|
-
inputSearchProps.onRightIconPressed
|
|
209
|
+
inputSearchProps.onRightIconPressed,
|
|
210
|
+
iconModifier = inputSearchProps.iconModifier
|
|
196
211
|
)
|
|
197
212
|
}
|
|
198
213
|
}
|
|
@@ -106,7 +106,7 @@ val defaultTheme = Theme(
|
|
|
106
106
|
),
|
|
107
107
|
font = "SFProText",
|
|
108
108
|
assets = ThemeAssets(
|
|
109
|
-
headerBackground =
|
|
109
|
+
headerBackground = "https://static.momocdn.net/app/img/kits/background/header/header_Tet_2024_transparent.png"
|
|
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/kits/background/header/header_Tet_2024_transparent.png"
|
|
166
166
|
)
|
|
167
167
|
)
|
|
168
168
|
|