@momo-kits/native-kits 0.117.1-beta.7 → 0.117.1-beta.8

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.
Files changed (7) hide show
  1. package/compose/src/commonMain/kotlin/vn/momo/kits/application/Header.kt +8 -5
  2. package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderBackground.kt +12 -5
  3. package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderDefault.kt +22 -10
  4. package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderRight.kt +24 -10
  5. package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt +5 -1
  6. package/ios/Application/Screen.swift +1 -1
  7. package/package.json +1 -1
package/compose/src/commonMain/kotlin/vn/momo/kits/application/Header.kt CHANGED
@@ -23,6 +23,7 @@ import androidx.compose.runtime.setValue
23
23
  import androidx.compose.runtime.snapshotFlow
24
24
  import androidx.compose.ui.Alignment
25
25
  import androidx.compose.ui.Modifier
26
+ import androidx.compose.ui.graphics.Color
26
27
  import androidx.compose.ui.graphics.graphicsLayer
27
28
  import androidx.compose.ui.semantics.semantics
28
29
  import androidx.compose.ui.semantics.testTag
@@ -53,11 +54,13 @@ fun Header(
53
54
  scrollState: Int = 0,
54
55
  inputSearchProps: InputSearchProps? = null,
55
56
  headerRightWidth: Dp = 0.dp,
56
- useAnimationSearch: Boolean = false
57
+ useAnimationSearch: Boolean = false,
58
+ tintColor: Color? = null
57
59
  ) {
58
60
  val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
59
- val tintIconColor = AppTheme.current.colors.text.default
60
- val backgroundButton = Colors.black_01.copy(alpha = 0.6f)
61
+ val tintIconColor = tintColor ?: AppTheme.current.colors.text.default
62
+ val backgroundButton = if (tintColor == Colors.black_01) Colors.black_20.copy(alpha = 0.6f) else Colors.black_01.copy(alpha = 0.6f)
63
+ val borderColor = if (tintColor == Colors.black_01) Colors.black_01.copy(alpha = 0.2f) else Colors.black_20.copy(alpha = 0.2f)
61
64
 
62
65
  var colorFraction by remember { mutableStateOf(0f) }
63
66
 
@@ -105,7 +108,7 @@ fun Header(
105
108
  .then(
106
109
  Modifier.border(
107
110
  0.2.dp,
108
- Colors.black_20.copy(alpha = 0.2f),
111
+ borderColor,
109
112
  RoundedCornerShape(100)
110
113
  )
111
114
  )
@@ -122,7 +125,7 @@ fun Header(
122
125
  ) {
123
126
  Icon(
124
127
  source = "arrow-back",
125
- color = Colors.black_20,
128
+ color = tintIconColor,
126
129
  size = 20.dp,
127
130
  )
128
131
  }
package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderBackground.kt CHANGED
@@ -34,6 +34,7 @@ fun animateColor(start: Color, stop: Color, fraction: Float): Color {
34
34
  fun HeaderBackground(
35
35
  headerType: HeaderType = HeaderType.DEFAULT,
36
36
  scrollState: Int,
37
+ headerTransparent: Boolean = false,
37
38
  ) {
38
39
  val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
39
40
 
@@ -42,11 +43,15 @@ fun HeaderBackground(
42
43
  )
43
44
 
44
45
  val backgroundColor by animateColorAsState(
45
- targetValue = animateColor(
46
- Color.Transparent,
47
- AppTheme.current.colors.background.surface,
48
- opacityAni
49
- ),
46
+ targetValue = if (headerTransparent) {
47
+ Color.Transparent
48
+ } else {
49
+ animateColor(
50
+ Color.Transparent,
51
+ AppTheme.current.colors.background.surface,
52
+ opacityAni
53
+ )
54
+ }
50
55
  )
51
56
 
52
57
  when (headerType) {
@@ -54,6 +59,8 @@ fun HeaderBackground(
54
59
  HeaderDefault(
55
60
  opacityAni = opacityAni,
56
61
  statusBarHeight = statusBarHeight,
62
+ backgroundColor = backgroundColor,
63
+ headerTransparent = headerTransparent
57
64
  )
58
65
  }
59
66
 
package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderDefault.kt CHANGED
@@ -23,14 +23,16 @@ import vn.momo.kits.utils.bottomBorder
23
23
  fun HeaderDefault(
24
24
  opacityAni: Float,
25
25
  statusBarHeight: Dp,
26
+ backgroundColor: Color?,
27
+ headerTransparent: Boolean = false
26
28
  ) {
27
29
  val height = statusBarHeight + HEADER_HEIGHT.dp
28
30
  Box(
29
31
  modifier = Modifier.fillMaxWidth().height(height)
30
- .background(AppTheme.current.colors.background.surface)
32
+ .background(backgroundColor ?: AppTheme.current.colors.background.surface)
31
33
  .bottomBorder(
32
34
  strokeWidth = 1.dp,
33
- color = AppTheme.current.colors.border.default
35
+ color = backgroundColor?: AppTheme.current.colors.border.default
34
36
  )
35
37
  ) {
36
38
  Box(
@@ -39,14 +41,24 @@ fun HeaderDefault(
39
41
  .fillMaxWidth()
40
42
  .alpha(opacityAni)
41
43
  .background(
42
- Brush.linearGradient(
43
- colors = listOf(
44
- Color(0xFFFDCADE),
45
- Color(0x00FDCADE)
46
- ),
47
- start = Offset(0f, 0f),
48
- end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
49
- )
44
+ if (headerTransparent)
45
+ Brush.linearGradient(
46
+ colors = listOf(
47
+ Color.Transparent,
48
+ Color.Transparent,
49
+ ),
50
+ start = Offset(0f, 0f),
51
+ end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
52
+ )
53
+ else
54
+ Brush.linearGradient(
55
+ colors = listOf(
56
+ Color(0xFFFDCADE),
57
+ Color(0x00FDCADE)
58
+ ),
59
+ start = Offset(0f, 0f),
60
+ end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
61
+ )
50
62
  )
51
63
  )
52
64
  if (AppTheme.current.assets.headerBackground != null) {
package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderRight.kt CHANGED
@@ -30,6 +30,7 @@ import vn.momo.kits.const.Colors
30
30
  import kotlinx.serialization.json.Json
31
31
  import kotlinx.serialization.json.jsonObject
32
32
  import kotlinx.serialization.json.jsonPrimitive
33
+ import vn.momo.kits.const.AppTheme
33
34
 
34
35
  data class HeaderRightData(
35
36
  val useShortcut: Boolean = false,
@@ -80,11 +81,12 @@ object Spacing {
80
81
  @Composable
81
82
  fun HeaderRight(
82
83
  headerRight: HeaderRightData? = null,
84
+ tintColor: Color? = null,
83
85
  ) {
84
86
  Row(
85
87
  verticalAlignment = Alignment.CenterVertically,
86
88
  ) {
87
- ToolkitHeaderRight(headerRight = headerRight)
89
+ ToolkitHeaderRight(headerRight = headerRight, tintColor = tintColor)
88
90
  }
89
91
  }
90
92
 
@@ -113,7 +115,7 @@ private fun getNavigationButtonConfig(
113
115
  }
114
116
 
115
117
  @Composable
116
- private fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
118
+ private fun ToolkitHeaderRight(headerRight: HeaderRightData? = null, tintColor: Color? = null) {
117
119
  var isFavorite by remember { mutableStateOf(false) }
118
120
  val isLoading by remember { mutableStateOf(false) }
119
121
  val api = PlatformApi.current as? ComposeApi
@@ -191,6 +193,10 @@ private fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
191
193
  isShowShortcut = false
192
194
  }
193
195
 
196
+ val tintIconColor = tintColor ?: AppTheme.current.colors.text.default
197
+ val backgroundButton = if (tintColor == Colors.black_01) Colors.black_20.copy(alpha = 0.6f) else Colors.black_01.copy(alpha = 0.6f)
198
+ val borderColor = if (tintColor == Colors.black_01) Colors.black_01.copy(alpha = 0.2f) else Colors.black_20.copy(alpha = 0.2f)
199
+
194
200
  Row(
195
201
  verticalAlignment = Alignment.CenterVertically
196
202
  ) {
@@ -199,7 +205,8 @@ private fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
199
205
  disabled = isLoading,
200
206
  icon = navButtonConfig.icon,
201
207
  showBadge = showBadge,
202
- onClick = navButtonConfig.onPress
208
+ onClick = navButtonConfig.onPress,
209
+ tintColor = tintIconColor
203
210
  )
204
211
  }
205
212
  Row(
@@ -207,16 +214,17 @@ private fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
207
214
  horizontalArrangement = Arrangement.Center,
208
215
  modifier = Modifier
209
216
  .padding(start = Spacing.S)
210
- .border(0.2.dp, Color(0x33000000), shape = RoundedCornerShape(14.dp))
217
+ .border(0.2.dp, borderColor, shape = RoundedCornerShape(14.dp))
211
218
  .width(toolkitWidth)
212
219
  .height(28.dp)
213
220
  .clip(shape = RoundedCornerShape(14.dp))
214
- .background(Color(0x99FFFFFF))
221
+ .background(backgroundButton)
215
222
  ) {
216
223
  if (context != null) {
217
224
  Icon(
218
225
  source = "help_center",
219
226
  size = 20.dp,
227
+ color = tintIconColor,
220
228
  modifier = Modifier.padding(4.dp).clickable {
221
229
  onPressHelpCenter()
222
230
  })
@@ -224,13 +232,14 @@ private fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
224
232
  modifier = Modifier
225
233
  .width(0.5.dp)
226
234
  .height(12.dp)
227
- .background(Colors.black_20)
235
+ .background(tintColor ?: Colors.black_20)
228
236
  )
229
237
  }
230
238
 
231
239
  Icon(
232
240
  source = "16_navigation_close_circle",
233
241
  size = 20.dp,
242
+ color = tintIconColor,
234
243
  modifier = Modifier.padding(4.dp).clickable { onPressClose() }
235
244
  )
236
245
  }
@@ -242,8 +251,12 @@ fun NavigationButton(
242
251
  disabled: Boolean,
243
252
  icon: String,
244
253
  showBadge: Boolean? = false,
245
- onClick: () -> Unit
254
+ onClick: () -> Unit,
255
+ tintColor: Color?
246
256
  ) {
257
+ val backgroundButton = if (tintColor == Colors.black_01) Colors.black_20.copy(alpha = 0.6f) else Colors.black_01.copy(alpha = 0.6f)
258
+ val borderColor = if (tintColor == Colors.black_01) Colors.black_01.copy(alpha = 0.2f) else Colors.black_20.copy(alpha = 0.2f)
259
+
247
260
  Box(
248
261
  modifier = Modifier
249
262
  .size(28.dp)
@@ -253,8 +266,8 @@ fun NavigationButton(
253
266
  modifier = Modifier
254
267
  .matchParentSize()
255
268
  .clip(CircleShape)
256
- .background(Color(0x99FFFFFF))
257
- .border(0.2.dp, Color(0x33000000), CircleShape)
269
+ .background(backgroundButton)
270
+ .border(0.2.dp, borderColor, CircleShape)
258
271
  )
259
272
  Box(
260
273
  modifier = Modifier.matchParentSize(),
@@ -262,7 +275,8 @@ fun NavigationButton(
262
275
  ) {
263
276
  Icon(
264
277
  source = icon,
265
- size = 20.dp
278
+ size = 20.dp,
279
+ color = tintColor
266
280
  )
267
281
  }
268
282
 
package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt CHANGED
@@ -52,6 +52,8 @@ const val HEADER_HEIGHT = 52
52
52
  @Composable
53
53
  fun Screen(
54
54
  backgroundColor: Color? = null,
55
+ tintColor: Color? = null,
56
+ headerTransparent: Boolean = false,
55
57
  isBack: Boolean = true,
56
58
  headerType: HeaderType = HeaderType.DEFAULT,
57
59
  verticalArrangement: Arrangement.Vertical = Arrangement.Top,
@@ -103,7 +105,8 @@ fun Screen(
103
105
  if (animatedHeader === null) {
104
106
  HeaderBackground(
105
107
  headerType = headerType,
106
- scrollState = scrollState.value
108
+ scrollState = scrollState.value,
109
+ headerTransparent = headerTransparent
107
110
  )
108
111
  } else {
109
112
  Box(
@@ -129,6 +132,7 @@ fun Screen(
129
132
  inputSearchProps = inputSearchProps,
130
133
  scrollState = scrollState.value,
131
134
  useAnimationSearch = useAnimationSearch,
135
+ tintColor = tintColor
132
136
  )
133
137
 
134
138
  Column(
package/ios/Application/Screen.swift CHANGED
@@ -104,7 +104,7 @@ public struct Screen<Content: View>: View {
104
104
  headerType: headerType,
105
105
  titlePosition: titlePosition,
106
106
  title: title,
107
- headerRight: headerRightInstance,
107
+ headerRight: headerRight ?? headerRightInstance,
108
108
  goBack: goBack,
109
109
  opacity: min(scrollOffset / 114, 1),
110
110
  animatedHeader: animatedHeader,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/native-kits",
3
- "version": "0.117.1-beta.7",
3
+ "version": "0.117.1-beta.8",
4
4
  "private": false,
5
5
  "dependencies": {},
6
6
  "devDependencies": {},