@momo-kits/native-kits 0.89.3 → 0.89.5
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 +7 -1
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/Information.kt +92 -0
- package/compose/src/commonMain/kotlin/vn/momo/kits/components/TrustBanner.kt +163 -0
- package/compose/src/commonMain/kotlin/vn/momo/kits/const/Colors.kt +1 -1
- package/package.json +1 -1
|
@@ -38,6 +38,7 @@ import vn.momo.kits.const.Colors
|
|
|
38
38
|
import vn.momo.kits.const.Spacing
|
|
39
39
|
import vn.momo.kits.const.Typography
|
|
40
40
|
import vn.momo.kits.utils.bottomBorder
|
|
41
|
+
import vn.momo.kits.utils.getPlatformName
|
|
41
42
|
|
|
42
43
|
enum class TitlePosition {
|
|
43
44
|
LEFT, CENTER,
|
|
@@ -92,10 +93,15 @@ fun Header(
|
|
|
92
93
|
tintIconColor = AppTheme.current.colors.text.default
|
|
93
94
|
backgroundButton = Color.Transparent
|
|
94
95
|
}
|
|
96
|
+
val statusBarHeight = if (getPlatformName() == "iOS") {
|
|
97
|
+
WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
|
|
98
|
+
} else {
|
|
99
|
+
AppStatusBar.current
|
|
100
|
+
}
|
|
95
101
|
|
|
96
102
|
if (headerType != HeaderType.NONE) {
|
|
97
103
|
BoxWithConstraints(
|
|
98
|
-
Modifier.height(
|
|
104
|
+
Modifier.height(statusBarHeight + 52.dp)
|
|
99
105
|
.background(backgroundColor)
|
|
100
106
|
.fillMaxWidth()
|
|
101
107
|
.bottomBorder(
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
package vn.momo.kits.components
|
|
2
|
+
|
|
3
|
+
import androidx.compose.foundation.background
|
|
4
|
+
import androidx.compose.foundation.border
|
|
5
|
+
import androidx.compose.foundation.clickable
|
|
6
|
+
import androidx.compose.foundation.layout.Column
|
|
7
|
+
import androidx.compose.foundation.layout.Row
|
|
8
|
+
import androidx.compose.foundation.layout.height
|
|
9
|
+
import androidx.compose.foundation.layout.padding
|
|
10
|
+
import androidx.compose.foundation.layout.width
|
|
11
|
+
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
12
|
+
import androidx.compose.runtime.Composable
|
|
13
|
+
import androidx.compose.ui.Modifier
|
|
14
|
+
import androidx.compose.ui.draw.clip
|
|
15
|
+
import androidx.compose.ui.text.style.TextAlign
|
|
16
|
+
import androidx.compose.ui.unit.dp
|
|
17
|
+
import vn.momo.kits.const.Colors
|
|
18
|
+
import vn.momo.kits.const.Radius
|
|
19
|
+
import vn.momo.kits.const.Spacing
|
|
20
|
+
import vn.momo.kits.const.Typography
|
|
21
|
+
|
|
22
|
+
enum class InformationState {
|
|
23
|
+
DEFAULT ,
|
|
24
|
+
WARNING,
|
|
25
|
+
ERROR
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@Composable
|
|
29
|
+
fun Information(
|
|
30
|
+
title: String? = null,
|
|
31
|
+
description: String = "Description",
|
|
32
|
+
state: InformationState = InformationState.DEFAULT,
|
|
33
|
+
image: String? = null,
|
|
34
|
+
onPressCTA: (()-> Unit)? = null,
|
|
35
|
+
showIcon: Boolean = true,
|
|
36
|
+
CTA: String? = null,
|
|
37
|
+
showIconClose: Boolean = true,
|
|
38
|
+
onPressClose: (()->Unit)? = null,
|
|
39
|
+
){
|
|
40
|
+
var borderColor = Colors.blue_07
|
|
41
|
+
var backgroundColor = Colors.blue_10
|
|
42
|
+
var color = Colors.blue_03
|
|
43
|
+
var iconSource = "notifications_info"
|
|
44
|
+
|
|
45
|
+
if (state === InformationState.WARNING) {
|
|
46
|
+
borderColor = Colors.yellow_06
|
|
47
|
+
backgroundColor = Colors.yellow_09
|
|
48
|
+
color = Colors.orange_03
|
|
49
|
+
iconSource = "24_notifications_alert_triangle";
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
if (state === InformationState.ERROR) {
|
|
53
|
+
borderColor = Colors.red_07
|
|
54
|
+
backgroundColor = Colors.red_10
|
|
55
|
+
color = Colors.red_03
|
|
56
|
+
iconSource = "24_notifications_alert_octagon";
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
Column(modifier = Modifier.border(
|
|
60
|
+
width = 0.5.dp,
|
|
61
|
+
shape = RoundedCornerShape(Radius.S),
|
|
62
|
+
color = borderColor
|
|
63
|
+
).background(color = backgroundColor)
|
|
64
|
+
.padding(Spacing.M)
|
|
65
|
+
) {
|
|
66
|
+
Row {
|
|
67
|
+
if (image != null) {
|
|
68
|
+
Image(source = image, modifier = Modifier.padding(end = Spacing.S).width(40.dp).height(40.dp).clip(
|
|
69
|
+
RoundedCornerShape(Radius.S)
|
|
70
|
+
))
|
|
71
|
+
}
|
|
72
|
+
if (image == null && showIcon) {
|
|
73
|
+
Icon(source = iconSource, size = 16.dp, color = color, modifier = Modifier.padding(end = Spacing.S))
|
|
74
|
+
}
|
|
75
|
+
Column(modifier = Modifier.weight(1f)) {
|
|
76
|
+
if (title != null) {
|
|
77
|
+
Text(title, style = Typography.labelDefault)
|
|
78
|
+
}
|
|
79
|
+
Text(description, style = Typography.descriptionS)
|
|
80
|
+
}
|
|
81
|
+
if (onPressClose != null && showIconClose) {
|
|
82
|
+
Icon(source = "navigation_close", size = 16.dp, modifier = Modifier.clickable(onClick = onPressClose))
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
if (CTA != null && onPressCTA != null) {
|
|
86
|
+
Row(modifier = Modifier.padding(top = Spacing.S)) {
|
|
87
|
+
Text(CTA, modifier = Modifier.weight(1f).clickable(onClick = onPressCTA), textAlign = TextAlign.End, style = Typography.actionXs, color = color)
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
package vn.momo.kits.components
|
|
2
|
+
|
|
3
|
+
import androidx.compose.foundation.background
|
|
4
|
+
import androidx.compose.foundation.border
|
|
5
|
+
import androidx.compose.foundation.clickable
|
|
6
|
+
import androidx.compose.foundation.layout.Arrangement
|
|
7
|
+
import androidx.compose.foundation.layout.Column
|
|
8
|
+
import androidx.compose.foundation.layout.Row
|
|
9
|
+
import androidx.compose.foundation.layout.fillMaxWidth
|
|
10
|
+
import androidx.compose.foundation.layout.height
|
|
11
|
+
import androidx.compose.foundation.layout.padding
|
|
12
|
+
import androidx.compose.foundation.layout.size
|
|
13
|
+
import androidx.compose.foundation.layout.width
|
|
14
|
+
import androidx.compose.foundation.shape.CircleShape
|
|
15
|
+
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
16
|
+
import androidx.compose.material.Text
|
|
17
|
+
import androidx.compose.runtime.Composable
|
|
18
|
+
import androidx.compose.ui.Alignment
|
|
19
|
+
import androidx.compose.ui.Modifier
|
|
20
|
+
import androidx.compose.ui.draw.clip
|
|
21
|
+
import androidx.compose.ui.graphics.Color
|
|
22
|
+
import androidx.compose.ui.layout.ContentScale
|
|
23
|
+
import androidx.compose.ui.unit.dp
|
|
24
|
+
import androidx.compose.ui.unit.sp
|
|
25
|
+
|
|
26
|
+
val defaultBanner = TrustBannerData(
|
|
27
|
+
content = mapOf(
|
|
28
|
+
"vi" to "Bảo mật thông tin & An toàn tài sản của bạn là ưu tiên hàng đầu của MoMo.",
|
|
29
|
+
"en" to "Your data security and money safety are MoMo's top priorities."
|
|
30
|
+
),
|
|
31
|
+
pciImage = "https://static.momocdn.net/app/img/kits/trustBanner/pci.png",
|
|
32
|
+
sslImage = "https://static.momocdn.net/app/img/kits/trustBanner/ssl.png",
|
|
33
|
+
urlConfig = "login_and_security",
|
|
34
|
+
icons = listOf(
|
|
35
|
+
"https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png",
|
|
36
|
+
"https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png",
|
|
37
|
+
"https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png",
|
|
38
|
+
"https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png"
|
|
39
|
+
),
|
|
40
|
+
momoImage = "https://static.momocdn.net/app/img/kits/trustBanner/ic_momo_secu.png"
|
|
41
|
+
)
|
|
42
|
+
|
|
43
|
+
const val borderColor = 0xFFE8E8E8
|
|
44
|
+
const val tonalColor = 0xFFFDEAF4
|
|
45
|
+
const val backgroundBlue = 0xFFF2F8FF
|
|
46
|
+
const val contentColor = 0xFF484848
|
|
47
|
+
const val primaryColor = 0xFFEB2F96
|
|
48
|
+
|
|
49
|
+
data class TrustBannerClass(
|
|
50
|
+
val trustBanner: TrustBannerData
|
|
51
|
+
)
|
|
52
|
+
|
|
53
|
+
data class TrustBannerData (
|
|
54
|
+
val content: Map<String, String>,
|
|
55
|
+
val pciImage: String,
|
|
56
|
+
val sslImage: String,
|
|
57
|
+
val icons: List<String>,
|
|
58
|
+
val momoImage: String,
|
|
59
|
+
val urlConfig: String
|
|
60
|
+
)
|
|
61
|
+
@Composable
|
|
62
|
+
fun Avatar(iconURL: String) {
|
|
63
|
+
Image(
|
|
64
|
+
source = iconURL,
|
|
65
|
+
modifier = Modifier
|
|
66
|
+
.size(24.dp)
|
|
67
|
+
.background(Color.White, CircleShape)
|
|
68
|
+
.border(width = 1.dp, color = Color(borderColor), CircleShape),
|
|
69
|
+
options = Options(contentScale = ContentScale.Fit)
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@Composable
|
|
74
|
+
fun TrustBanner(
|
|
75
|
+
trustBanner: TrustBannerData = defaultBanner,
|
|
76
|
+
serviceName: String = "",
|
|
77
|
+
screenName: String = "",
|
|
78
|
+
onPress: ((Map<String, String>) -> Unit)? = null,
|
|
79
|
+
trackEvent: ((String,Map<String, String>) -> Unit)? = null,
|
|
80
|
+
language: String = "vi"
|
|
81
|
+
) {
|
|
82
|
+
Row(
|
|
83
|
+
modifier = Modifier
|
|
84
|
+
.clip(RoundedCornerShape(12.dp))
|
|
85
|
+
.background(color = Color(backgroundBlue))
|
|
86
|
+
.padding(12.dp)
|
|
87
|
+
.clickable {
|
|
88
|
+
if (trackEvent != null) {
|
|
89
|
+
trackEvent("service_component_clicked",mapOf(
|
|
90
|
+
"service_name" to serviceName,
|
|
91
|
+
"screen_name" to screenName,
|
|
92
|
+
"component_name" to "logo_trust",
|
|
93
|
+
"url_config" to trustBanner.urlConfig
|
|
94
|
+
))
|
|
95
|
+
}
|
|
96
|
+
if (onPress != null) {
|
|
97
|
+
onPress(mapOf(
|
|
98
|
+
"service_name" to serviceName,
|
|
99
|
+
"screen_name" to screenName,
|
|
100
|
+
"url_config" to trustBanner.urlConfig,
|
|
101
|
+
))
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
) {
|
|
105
|
+
Image(
|
|
106
|
+
source = trustBanner.momoImage,
|
|
107
|
+
modifier = Modifier
|
|
108
|
+
.width(64.dp)
|
|
109
|
+
.height(64.dp)
|
|
110
|
+
.padding(end = 8.dp)
|
|
111
|
+
)
|
|
112
|
+
Column {
|
|
113
|
+
Text(
|
|
114
|
+
text = trustBanner.content[language] ?: "",
|
|
115
|
+
modifier = Modifier.padding(bottom = 8.dp),
|
|
116
|
+
lineHeight = 16.sp,
|
|
117
|
+
fontSize = 12.sp,
|
|
118
|
+
color = Color(contentColor),
|
|
119
|
+
maxLines = 2
|
|
120
|
+
)
|
|
121
|
+
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
|
|
122
|
+
Row {
|
|
123
|
+
Image(
|
|
124
|
+
source = trustBanner.pciImage, modifier = Modifier
|
|
125
|
+
.padding(end = 4.dp)
|
|
126
|
+
.width(52.dp)
|
|
127
|
+
.height(20.dp)
|
|
128
|
+
)
|
|
129
|
+
Image(
|
|
130
|
+
source = trustBanner.sslImage, modifier = Modifier
|
|
131
|
+
.width(52.dp)
|
|
132
|
+
.height(20.dp)
|
|
133
|
+
)
|
|
134
|
+
}
|
|
135
|
+
Row(
|
|
136
|
+
modifier = Modifier
|
|
137
|
+
.width(96.dp)
|
|
138
|
+
.height(24.dp),
|
|
139
|
+
horizontalArrangement = Arrangement.spacedBy((-6).dp)
|
|
140
|
+
) {
|
|
141
|
+
trustBanner.icons.forEach { iconURL ->
|
|
142
|
+
Avatar(iconURL = iconURL)
|
|
143
|
+
}
|
|
144
|
+
Row(
|
|
145
|
+
modifier = Modifier
|
|
146
|
+
.size(24.dp)
|
|
147
|
+
.background(color = Color(tonalColor), CircleShape)
|
|
148
|
+
.border(width = 1.dp, color = Color(borderColor), CircleShape),
|
|
149
|
+
verticalAlignment = Alignment.CenterVertically,
|
|
150
|
+
horizontalArrangement = Arrangement.Center
|
|
151
|
+
) {
|
|
152
|
+
Text(
|
|
153
|
+
text = "36+",
|
|
154
|
+
color = Color(primaryColor),
|
|
155
|
+
lineHeight = 14.sp,
|
|
156
|
+
fontSize = 10.sp
|
|
157
|
+
)
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
@@ -32,7 +32,7 @@ object Colors {
|
|
|
32
32
|
val pink_07 = Color(0xFFF7ACD5)
|
|
33
33
|
val pink_08 = Color(0xFFFBD5EA)
|
|
34
34
|
val pink_09 = Color(0xFFFDEAF4)
|
|
35
|
-
val pink_10 = Color(
|
|
35
|
+
val pink_10 = Color(0xFFFEF4FA)
|
|
36
36
|
val pink_11 = Color(0xFFFEF8FC)
|
|
37
37
|
val pink_MoMo_Branding = Color(0xFFA50064)
|
|
38
38
|
val violet_01 = Color(0xFF7822C0)
|