@momo-kits/native-kits 0.89.3 → 0.89.4
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.
|
@@ -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
|
+
}
|