@momo-kits/native-kits 0.89.30-beta.7 → 0.89.30-nav.10
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 +14 -13
- package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt +18 -5
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/Button.kt +1 -1
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/Input.kt +1 -1
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/InputDropDown.kt +1 -2
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/InputMoney.kt +1 -1
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/PopupNotify.kt +6 -6
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/PromotionPopup.kt +2 -3
- package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt +10 -0
- package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Conditional.kt +11 -0
- package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Icons.kt +1 -3
- package/package.json +1 -1
|
@@ -144,14 +144,16 @@ fun Header(
|
|
|
144
144
|
headerType: HeaderType = HeaderType.DEFAULT,
|
|
145
145
|
titlePosition: TitlePosition,
|
|
146
146
|
title: String,
|
|
147
|
+
isBack: Boolean,
|
|
147
148
|
headerRight: @Composable (() -> Unit)? = null,
|
|
148
|
-
goBack: (() -> Unit)
|
|
149
|
+
goBack: (() -> Unit) = { },
|
|
149
150
|
opacity: Float? = null,
|
|
150
151
|
animatedHeader: AnimatedHeader? = null,
|
|
151
152
|
scrollState: Int = 0
|
|
152
153
|
) {
|
|
153
154
|
val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
|
|
154
155
|
val tintIconColor = AppTheme.current.colors.text.default
|
|
156
|
+
val backgroundButton = Colors.black_01.copy(alpha = 0.2f)
|
|
155
157
|
|
|
156
158
|
var colorFraction by remember { mutableStateOf(0f) }
|
|
157
159
|
|
|
@@ -170,7 +172,7 @@ fun Header(
|
|
|
170
172
|
)
|
|
171
173
|
)
|
|
172
174
|
|
|
173
|
-
if (headerType != HeaderType.NONE
|
|
175
|
+
if (headerType != HeaderType.NONE) {
|
|
174
176
|
BoxWithConstraints(
|
|
175
177
|
Modifier.height(statusBarHeight + 52.dp)
|
|
176
178
|
.fillMaxWidth()
|
|
@@ -185,19 +187,19 @@ fun Header(
|
|
|
185
187
|
horizontalArrangement = Arrangement.SpaceBetween
|
|
186
188
|
) {
|
|
187
189
|
Box {
|
|
188
|
-
if (
|
|
190
|
+
if (isBack) {
|
|
189
191
|
Box(
|
|
190
192
|
modifier = Modifier
|
|
191
193
|
.size(28.dp)
|
|
192
194
|
.then(
|
|
193
195
|
Modifier.border(
|
|
194
|
-
0.
|
|
195
|
-
Colors.black_20.copy(alpha = 0.
|
|
196
|
-
RoundedCornerShape(
|
|
196
|
+
0.5.dp,
|
|
197
|
+
Colors.black_20.copy(alpha = 0.4f),
|
|
198
|
+
RoundedCornerShape(100)
|
|
197
199
|
)
|
|
198
200
|
)
|
|
199
201
|
.background(
|
|
200
|
-
|
|
202
|
+
backgroundButton,
|
|
201
203
|
RoundedCornerShape(100)
|
|
202
204
|
)
|
|
203
205
|
.clickable(
|
|
@@ -205,13 +207,12 @@ fun Header(
|
|
|
205
207
|
)
|
|
206
208
|
.padding(Spacing.XS)
|
|
207
209
|
.semantics {
|
|
208
|
-
|
|
209
|
-
"btn_navigation_back"
|
|
210
|
+
testTag = "btn_navigation_back"
|
|
210
211
|
},
|
|
211
212
|
contentAlignment = Alignment.Center
|
|
212
213
|
) {
|
|
213
214
|
Icon(
|
|
214
|
-
source = "
|
|
215
|
+
source = "ic_back_ios",
|
|
215
216
|
color = if (animatedHeader !== null) tintIconColorAnim else tintIconColor,
|
|
216
217
|
size = 20.dp,
|
|
217
218
|
)
|
|
@@ -232,7 +233,7 @@ fun Header(
|
|
|
232
233
|
.padding(horizontal = Spacing.M),
|
|
233
234
|
verticalAlignment = Alignment.CenterVertically,
|
|
234
235
|
) {
|
|
235
|
-
if (
|
|
236
|
+
if (isBack) {
|
|
236
237
|
Spacer(Modifier.width(40.dp))
|
|
237
238
|
}
|
|
238
239
|
Box(
|
|
@@ -245,12 +246,12 @@ fun Header(
|
|
|
245
246
|
title = title,
|
|
246
247
|
color = if (animatedHeader !== null) tintIconColorAnim else tintIconColor,
|
|
247
248
|
modifier = Modifier.semantics {
|
|
248
|
-
contentDescription =
|
|
249
|
+
contentDescription = title
|
|
249
250
|
testTag = "title_navigation_header"
|
|
250
251
|
}
|
|
251
252
|
)
|
|
252
253
|
}
|
|
253
|
-
if (
|
|
254
|
+
if (isBack) {
|
|
254
255
|
Spacer(Modifier.width(40.dp))
|
|
255
256
|
}
|
|
256
257
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
package vn.momo.kits.application
|
|
2
2
|
|
|
3
3
|
import androidx.compose.animation.core.animateFloatAsState
|
|
4
|
+
import androidx.compose.foundation.ScrollState
|
|
4
5
|
import androidx.compose.foundation.background
|
|
5
6
|
import androidx.compose.foundation.gestures.detectTapGestures
|
|
6
7
|
import androidx.compose.foundation.layout.Arrangement
|
|
@@ -24,6 +25,8 @@ import androidx.compose.ui.Modifier
|
|
|
24
25
|
import androidx.compose.ui.graphics.Color
|
|
25
26
|
import androidx.compose.ui.graphics.graphicsLayer
|
|
26
27
|
import androidx.compose.ui.input.pointer.pointerInput
|
|
28
|
+
import androidx.compose.ui.layout.LayoutCoordinates
|
|
29
|
+
import androidx.compose.ui.layout.onGloballyPositioned
|
|
27
30
|
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
|
|
28
31
|
import androidx.compose.ui.unit.Dp
|
|
29
32
|
import androidx.compose.ui.unit.dp
|
|
@@ -33,6 +36,7 @@ import vn.momo.kits.const.AppStatusBar
|
|
|
33
36
|
import vn.momo.kits.const.AppTheme
|
|
34
37
|
import vn.momo.kits.const.Colors
|
|
35
38
|
import vn.momo.kits.const.Spacing
|
|
39
|
+
import vn.momo.kits.modifier.conditional
|
|
36
40
|
import vn.momo.kits.modifier.shadow
|
|
37
41
|
import vn.momo.kits.platform.getStatusBarHeight
|
|
38
42
|
|
|
@@ -45,13 +49,16 @@ enum class HeaderType {
|
|
|
45
49
|
@Composable
|
|
46
50
|
fun Screen(
|
|
47
51
|
backgroundColor: Color? = null,
|
|
48
|
-
isBack: Boolean = true,
|
|
52
|
+
isBack: Boolean = true,
|
|
53
|
+
headerType: HeaderType = HeaderType.DEFAULT,
|
|
49
54
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
|
50
55
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
|
51
56
|
title: String = "Stack",
|
|
52
57
|
titlePosition: TitlePosition = TitlePosition.LEFT,
|
|
53
|
-
goBack: (() -> Unit)
|
|
58
|
+
goBack: (() -> Unit) = { },
|
|
54
59
|
scrollable: Boolean = true,
|
|
60
|
+
scrollState: ScrollState = rememberScrollState(),
|
|
61
|
+
onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
|
|
55
62
|
useAvoidKeyboard: Boolean = true,
|
|
56
63
|
footer: @Composable (() -> Unit)? = null,
|
|
57
64
|
headerRight: @Composable (() -> Unit)? = null,
|
|
@@ -72,7 +79,6 @@ fun Screen(
|
|
|
72
79
|
|
|
73
80
|
val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
|
|
74
81
|
val bottomPadding = min(indicator, 21.dp)
|
|
75
|
-
val scrollState = rememberScrollState()
|
|
76
82
|
|
|
77
83
|
val opacity by animateFloatAsState(
|
|
78
84
|
targetValue = ((scrollState.value / 114f)).coerceIn(0f, 1f)
|
|
@@ -94,7 +100,7 @@ fun Screen(
|
|
|
94
100
|
.background(Color.White.copy(alpha = opacity))
|
|
95
101
|
.graphicsLayer { alpha = opacity }
|
|
96
102
|
) {
|
|
97
|
-
HeaderBackground(
|
|
103
|
+
HeaderBackground(headerType)
|
|
98
104
|
}
|
|
99
105
|
}
|
|
100
106
|
|
|
@@ -103,6 +109,7 @@ fun Screen(
|
|
|
103
109
|
title = title,
|
|
104
110
|
titlePosition = titlePosition,
|
|
105
111
|
headerRight = headerRight,
|
|
112
|
+
isBack = isBack,
|
|
106
113
|
goBack = goBack,
|
|
107
114
|
opacity = opacity,
|
|
108
115
|
animatedHeader = animatedHeader,
|
|
@@ -121,7 +128,13 @@ fun Screen(
|
|
|
121
128
|
) {
|
|
122
129
|
|
|
123
130
|
Column(
|
|
124
|
-
modifier =
|
|
131
|
+
modifier = Modifier
|
|
132
|
+
.conditional(scrollable) { weight(1f) }
|
|
133
|
+
.padding(bottom = keyboardSize)
|
|
134
|
+
.conditional(onContentLayout != null) {
|
|
135
|
+
onGloballyPositioned(onContentLayout ?: {})
|
|
136
|
+
}
|
|
137
|
+
.conditional(scrollable) { verticalScroll(scrollState) },
|
|
125
138
|
verticalArrangement = verticalArrangement,
|
|
126
139
|
horizontalAlignment = horizontalAlignment
|
|
127
140
|
) {
|
|
@@ -260,7 +260,7 @@ fun Button(
|
|
|
260
260
|
minWidth = size.value.width
|
|
261
261
|
).height(size.value.height)
|
|
262
262
|
.semantics {
|
|
263
|
-
contentDescription =
|
|
263
|
+
contentDescription = title; testTag = testId
|
|
264
264
|
},
|
|
265
265
|
horizontalArrangement = Arrangement.Center,
|
|
266
266
|
verticalAlignment = Alignment.CenterVertically,
|
|
@@ -204,7 +204,7 @@ fun Input(
|
|
|
204
204
|
val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
|
|
205
205
|
|
|
206
206
|
Column(modifier = Modifier.semantics {
|
|
207
|
-
contentDescription =
|
|
207
|
+
contentDescription = floatingValue; testTag = testId
|
|
208
208
|
}) {
|
|
209
209
|
BasicTextField(
|
|
210
210
|
enabled = !disabled,
|
|
@@ -17,7 +17,6 @@ import androidx.compose.runtime.MutableState
|
|
|
17
17
|
import androidx.compose.runtime.getValue
|
|
18
18
|
import androidx.compose.runtime.mutableStateOf
|
|
19
19
|
import androidx.compose.runtime.remember
|
|
20
|
-
import androidx.compose.runtime.setValue
|
|
21
20
|
import androidx.compose.ui.Alignment
|
|
22
21
|
import androidx.compose.ui.Modifier
|
|
23
22
|
import androidx.compose.ui.graphics.Color
|
|
@@ -78,7 +77,7 @@ fun InputDropDown(
|
|
|
78
77
|
val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
|
|
79
78
|
|
|
80
79
|
Column(modifier = Modifier.clickable(enabled = !disabled, onClick = onPress).semantics {
|
|
81
|
-
contentDescription =
|
|
80
|
+
contentDescription = floatingValue; testTag = testId
|
|
82
81
|
}) {
|
|
83
82
|
Box {
|
|
84
83
|
if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
|
|
@@ -110,7 +110,7 @@ fun InputMoney(
|
|
|
110
110
|
val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
|
|
111
111
|
|
|
112
112
|
Column(modifier = Modifier.semantics {
|
|
113
|
-
contentDescription =
|
|
113
|
+
contentDescription = floatingValue; testTag = testId
|
|
114
114
|
}) {
|
|
115
115
|
BasicTextField(
|
|
116
116
|
enabled = !disabled,
|
|
@@ -97,7 +97,7 @@ fun PopupNotify(
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
Box(Modifier.semantics {
|
|
100
|
-
contentDescription =
|
|
100
|
+
contentDescription = title; testTag = "popup_notify"
|
|
101
101
|
}, contentAlignment = Alignment.TopEnd) {
|
|
102
102
|
Column(
|
|
103
103
|
modifier = Modifier
|
|
@@ -166,7 +166,7 @@ fun PopupNotify(
|
|
|
166
166
|
color = AppTheme.current.colors.background.surface,
|
|
167
167
|
size = 14.dp,
|
|
168
168
|
modifier = Modifier.semantics {
|
|
169
|
-
|
|
169
|
+
testTag = "ic_popup_close"
|
|
170
170
|
}
|
|
171
171
|
)
|
|
172
172
|
}
|
|
@@ -235,7 +235,7 @@ fun renderRow(
|
|
|
235
235
|
title = it.title,
|
|
236
236
|
type = ButtonType.TEXT,
|
|
237
237
|
modifier = Modifier.semantics {
|
|
238
|
-
contentDescription =
|
|
238
|
+
contentDescription = it.title; testTag = "btn_popup_cancel"
|
|
239
239
|
}
|
|
240
240
|
)
|
|
241
241
|
}
|
|
@@ -250,7 +250,7 @@ fun renderRow(
|
|
|
250
250
|
},
|
|
251
251
|
title = primary?.title ?: "",
|
|
252
252
|
modifier = Modifier.semantics {
|
|
253
|
-
contentDescription = "
|
|
253
|
+
contentDescription = primary?.title ?: ""; testTag = "btn_popup_allow"
|
|
254
254
|
}
|
|
255
255
|
)
|
|
256
256
|
}
|
|
@@ -273,7 +273,7 @@ fun renderColumn(
|
|
|
273
273
|
},
|
|
274
274
|
title = primary?.title ?: "",
|
|
275
275
|
modifier = Modifier.semantics {
|
|
276
|
-
contentDescription = "
|
|
276
|
+
contentDescription = primary?.title ?: ""; testTag = "btn_popup_allow"
|
|
277
277
|
}
|
|
278
278
|
)
|
|
279
279
|
secondary?.let {
|
|
@@ -288,7 +288,7 @@ fun renderColumn(
|
|
|
288
288
|
title = it.title,
|
|
289
289
|
type = ButtonType.TEXT,
|
|
290
290
|
modifier = Modifier.semantics {
|
|
291
|
-
contentDescription =
|
|
291
|
+
contentDescription = it.title; testTag = "btn_popup_cancel"
|
|
292
292
|
}
|
|
293
293
|
)
|
|
294
294
|
}
|
|
@@ -17,7 +17,6 @@ import androidx.compose.runtime.remember
|
|
|
17
17
|
import androidx.compose.ui.Alignment
|
|
18
18
|
import androidx.compose.ui.Modifier
|
|
19
19
|
import androidx.compose.ui.draw.clip
|
|
20
|
-
import androidx.compose.ui.semantics.contentDescription
|
|
21
20
|
import androidx.compose.ui.semantics.semantics
|
|
22
21
|
import androidx.compose.ui.semantics.testTag
|
|
23
22
|
import androidx.compose.ui.unit.dp
|
|
@@ -30,7 +29,7 @@ fun PromotionPopup(
|
|
|
30
29
|
source: String = "",
|
|
31
30
|
onClose: (() -> Unit) = {},
|
|
32
31
|
) {
|
|
33
|
-
Column(Modifier.semantics {
|
|
32
|
+
Column(Modifier.semantics { testTag = "popup_notify" }) {
|
|
34
33
|
if (source.isNotEmpty()) {
|
|
35
34
|
Image(
|
|
36
35
|
source = source,
|
|
@@ -69,7 +68,7 @@ fun PromotionPopup(
|
|
|
69
68
|
color = AppTheme.current.colors.background.surface,
|
|
70
69
|
size = 14.dp,
|
|
71
70
|
modifier = Modifier.semantics {
|
|
72
|
-
|
|
71
|
+
testTag = "ic_popup_close"
|
|
73
72
|
}
|
|
74
73
|
)
|
|
75
74
|
}
|
|
@@ -58,6 +58,16 @@ fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Norma
|
|
|
58
58
|
"MoMoSignature-700" to "momosignature.otf",
|
|
59
59
|
"MoMoSignature-800" to "momosignature.otf",
|
|
60
60
|
"MoMoSignature-900" to "momosignature.otf",
|
|
61
|
+
|
|
62
|
+
"MoMoTrustDisplay-100" to "momotrustdisplay.otf",
|
|
63
|
+
"MoMoTrustDisplay-200" to "momotrustdisplay.otf",
|
|
64
|
+
"MoMoTrustDisplay-300" to "momotrustdisplay.otf",
|
|
65
|
+
"MoMoTrustDisplay-400" to "momotrustdisplay.otf",
|
|
66
|
+
"MoMoTrustDisplay-500" to "momotrustdisplay.otf",
|
|
67
|
+
"MoMoTrustDisplay-600" to "momotrustdisplay.otf",
|
|
68
|
+
"MoMoTrustDisplay-700" to "momotrustdisplay.otf",
|
|
69
|
+
"MoMoTrustDisplay-800" to "momotrustdisplay.otf",
|
|
70
|
+
"MoMoTrustDisplay-900" to "momotrustdisplay.otf",
|
|
61
71
|
)
|
|
62
72
|
val font = fontMap[key] ?: "sfprotext_regular.ttf"
|
|
63
73
|
return getFont(font)
|
|
@@ -1317,7 +1317,5 @@ val Icons = mapOf(
|
|
|
1317
1317
|
"ic_checked" to "https://img.mservice.com.vn/app/img/kits/checked_ic.png",
|
|
1318
1318
|
"ic_minus" to "https://img.mservice.com.vn/app/img/kits/minus.png",
|
|
1319
1319
|
"ic_navigation" to "https://static.momocdn.net/app/img/kits/ic_navigation.png",
|
|
1320
|
-
"ic_money_bag" to "https://static.momocdn.net/app/img/kits/ic_money_bag.png"
|
|
1321
|
-
"help_center" to "https://static.momocdn.net/app/img/kits/ic_money_bag_2.png",
|
|
1322
|
-
"arrow_back" to "https://static.momocdn.net/app/img/kits/arrow-back.png",
|
|
1320
|
+
"ic_money_bag" to "https://static.momocdn.net/app/img/kits/ic_money_bag.png"
|
|
1323
1321
|
)
|