@momo-kits/native-kits 0.113.3-beta.3 → 0.113.3-beta.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.
Files changed (8) hide show
  1. package/compose/src/commonMain/kotlin/vn/momo/kits/application/AnimationSearchInput.kt +1 -1
  2. package/compose/src/commonMain/kotlin/vn/momo/kits/application/Header.kt +9 -4
  3. package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderBackground.kt +1 -1
  4. package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderDefault.kt +1 -1
  5. package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderExtended.kt +1 -16
  6. package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt +36 -7
  7. package/compose/src/commonMain/kotlin/vn/momo/kits/application/useHeaderSearchAnimation.kt +3 -3
  8. package/package.json +1 -1
package/compose/src/commonMain/kotlin/vn/momo/kits/application/AnimationSearchInput.kt CHANGED
@@ -33,7 +33,7 @@ fun AnimationSearchInput(
33
33
  ) {
34
34
  Box(
35
35
  modifier = Modifier
36
- .height(52.dp)
36
+ .height(HEADER_HEIGHT.dp)
37
37
  .padding(vertical = Spacing.S)
38
38
  .zIndex(1f)
39
39
  ) {
package/compose/src/commonMain/kotlin/vn/momo/kits/application/Header.kt CHANGED
@@ -85,13 +85,13 @@ fun Header(
85
85
 
86
86
  if (headerType != HeaderType.NONE) {
87
87
  BoxWithConstraints(
88
- Modifier.height(statusBarHeight + 52.dp)
88
+ Modifier.height(statusBarHeight + HEADER_HEIGHT.dp)
89
89
  .fillMaxWidth()
90
90
  .zIndex(10f),
91
91
  contentAlignment = Alignment.BottomCenter
92
92
  ) {
93
93
  Row(
94
- modifier = Modifier.height(52.dp)
94
+ modifier = Modifier.height(HEADER_HEIGHT.dp)
95
95
  .fillMaxWidth()
96
96
  .padding(horizontal = Spacing.M),
97
97
  verticalAlignment = Alignment.CenterVertically,
@@ -140,7 +140,7 @@ fun Header(
140
140
 
141
141
  // Title
142
142
  Row(
143
- modifier = Modifier.height(52.dp)
143
+ modifier = Modifier.height(HEADER_HEIGHT.dp)
144
144
  .fillMaxWidth()
145
145
  .padding(horizontal = Spacing.M),
146
146
  verticalAlignment = Alignment.CenterVertically,
@@ -153,10 +153,15 @@ fun Header(
153
153
  } else {
154
154
  Box(
155
155
  Modifier.weight(1f).graphicsLayer {
156
- alpha = if (searchAnimationEnable) 1f - (opacity) else 1f
156
+ alpha = if (useAnimationSearch) {
157
+ 1f - (opacity)
158
+ } else {
159
+ if (animatedHeader !== null) opacity else 1f
160
+ }
157
161
  },
158
162
  contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
159
163
  ) {
164
+
160
165
  HeaderTitle(
161
166
  title = title,
162
167
  color = tintIconColor,
package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderBackground.kt CHANGED
@@ -38,7 +38,7 @@ fun HeaderBackground(
38
38
  val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
39
39
 
40
40
  val opacityAni by animateFloatAsState(
41
- targetValue = (1 - (scrollState / 52f)).coerceIn(0f, 1f),
41
+ targetValue = (1 - (scrollState / HEADER_HEIGHT*1f)).coerceIn(0f, 1f),
42
42
  )
43
43
 
44
44
  val backgroundColor by animateColorAsState(
package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderDefault.kt CHANGED
@@ -24,7 +24,7 @@ fun HeaderDefault(
24
24
  opacityAni: Float,
25
25
  statusBarHeight: Dp,
26
26
  ) {
27
- val height = statusBarHeight + 52.dp
27
+ val height = statusBarHeight + HEADER_HEIGHT.dp
28
28
  Box(
29
29
  modifier = Modifier.fillMaxWidth().height(height)
30
30
  .background(AppTheme.current.colors.background.surface)
package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderExtended.kt CHANGED
@@ -1,18 +1,10 @@
1
1
  package vn.momo.kits.application
2
2
 
3
- import androidx.compose.animation.animateColorAsState
4
- import androidx.compose.animation.core.animateFloatAsState
5
3
  import androidx.compose.foundation.background
6
4
  import androidx.compose.foundation.layout.Box
7
5
  import androidx.compose.foundation.layout.fillMaxWidth
8
6
  import androidx.compose.foundation.layout.height
9
- import androidx.compose.foundation.layout.offset
10
- import androidx.compose.foundation.layout.padding
11
- import androidx.compose.foundation.layout.width
12
- import androidx.compose.foundation.shape.RoundedCornerShape
13
7
  import androidx.compose.runtime.Composable
14
- import androidx.compose.runtime.getValue
15
- import androidx.compose.ui.Alignment
16
8
  import androidx.compose.ui.Modifier
17
9
  import androidx.compose.ui.draw.alpha
18
10
  import androidx.compose.ui.geometry.Offset
@@ -22,16 +14,9 @@ import androidx.compose.ui.layout.ContentScale
22
14
  import androidx.compose.ui.platform.LocalDensity
23
15
  import androidx.compose.ui.unit.Dp
24
16
  import androidx.compose.ui.unit.dp
25
- import androidx.compose.ui.zIndex
26
17
  import vn.momo.kits.components.Image
27
- import vn.momo.kits.components.InputSearch
28
- import vn.momo.kits.components.InputSearchProps
29
18
  import vn.momo.kits.components.Options
30
19
  import vn.momo.kits.const.AppTheme
31
- import vn.momo.kits.const.Colors
32
- import vn.momo.kits.const.Radius
33
- import vn.momo.kits.const.Spacing
34
- import vn.momo.kits.platform.getScreenDimensions
35
20
  import vn.momo.kits.utils.bottomBorder
36
21
 
37
22
  @Composable
@@ -78,7 +63,7 @@ fun HeaderExtended(
78
63
  modifier = Modifier
79
64
  .fillMaxWidth()
80
65
  .alpha(1f - opacityAni)
81
- .height(statusBarHeight + 52.dp)
66
+ .height(statusBarHeight + HEADER_HEIGHT.dp)
82
67
  .background(
83
68
  AppTheme.current.colors.background.surface
84
69
  )
package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt CHANGED
@@ -47,6 +47,8 @@ enum class HeaderType {
47
47
  NONE
48
48
  }
49
49
 
50
+ const val HEADER_HEIGHT = 52
51
+
50
52
  @Composable
51
53
  fun Screen(
52
54
  backgroundColor: Color? = null,
@@ -64,6 +66,8 @@ fun Screen(
64
66
  footer: @Composable (() -> Unit)? = null,
65
67
  headerRight: @Composable (() -> Unit)? = { HeaderRight() },
66
68
  fabProps: FabProps? = null,
69
+ animatedHeader: AnimatedHeader? = null,
70
+ layoutOffset: Dp = 56.dp,
67
71
  inputSearchProps: InputSearchProps? = null,
68
72
  useAnimationSearch: Boolean = false,
69
73
  headerRightWidth: Dp = 0.dp,
@@ -83,18 +87,36 @@ fun Screen(
83
87
  val bottomPadding = min(indicator, 21.dp)
84
88
 
85
89
  val opacity by animateFloatAsState(
86
- targetValue = ((scrollState.value / 52f)).coerceIn(0f, 1f),
90
+ targetValue = ((scrollState.value / HEADER_HEIGHT*1f)).coerceIn(0f, 1f),
87
91
  )
88
92
 
93
+ val headerAnimated =
94
+ @Composable {
95
+ animatedHeader?.composable?.invoke(scrollState.value)
96
+ }
97
+
89
98
  Box(
90
99
  Modifier.fillMaxSize()
91
100
  .background(backgroundColor ?: AppTheme.current.colors.background.default)
92
101
  ) {
93
102
 
94
- HeaderBackground(
95
- headerType = headerType,
96
- scrollState = scrollState.value,
97
- )
103
+ if (animatedHeader === null) {
104
+ HeaderBackground(
105
+ headerType = headerType,
106
+ scrollState = scrollState.value
107
+ )
108
+ } else {
109
+ Box(
110
+ Modifier.zIndex(2f)
111
+ .background(Color.White.copy(alpha = opacity))
112
+ .graphicsLayer { alpha = opacity }
113
+ ) {
114
+ HeaderBackground(
115
+ headerType = headerType,
116
+ scrollState = scrollState.value
117
+ )
118
+ }
119
+ }
98
120
  Header(
99
121
  headerType = headerType,
100
122
  title = title,
@@ -103,6 +125,7 @@ fun Screen(
103
125
  headerRightWidth = headerRightWidth,
104
126
  goBack = goBack,
105
127
  opacity = opacity,
128
+ animatedHeader = animatedHeader,
106
129
  inputSearchProps = inputSearchProps,
107
130
  scrollState = scrollState.value,
108
131
  useAnimationSearch = useAnimationSearch,
@@ -110,7 +133,7 @@ fun Screen(
110
133
 
111
134
  Column(
112
135
  modifier = Modifier.fillMaxSize()
113
- .padding(top = if (headerType !== HeaderType.NONE) statusBarHeight + 52.dp else 0.dp)
136
+ .padding(top = if (animatedHeader === null && headerType !== HeaderType.NONE) statusBarHeight + HEADER_HEIGHT.dp else 0.dp)
114
137
  .pointerInput(Unit) {
115
138
  detectTapGestures(onTap = {
116
139
  keyboardController?.hide()
@@ -118,6 +141,7 @@ fun Screen(
118
141
  }
119
142
  .zIndex(1f),
120
143
  ) {
144
+
121
145
  Column(
122
146
  modifier = Modifier
123
147
  .conditional(scrollable) { weight(1f) }
@@ -130,9 +154,14 @@ fun Screen(
130
154
  horizontalAlignment = horizontalAlignment
131
155
  ) {
132
156
  Box {
157
+ headerAnimated()
133
158
  Column {
159
+ if (animatedHeader !== null) {
160
+ Spacer(modifier = Modifier.padding(top = statusBarHeight + HEADER_HEIGHT.dp + layoutOffset))
161
+ }
162
+
134
163
  if (useAnimationSearch && inputSearchProps != null && headerType == HeaderType.EXTENDED) {
135
- Spacer(modifier = Modifier.padding(top = statusBarHeight))
164
+ Spacer(modifier = Modifier.padding(top = (HEADER_HEIGHT.dp + Spacing.M)))
136
165
  }
137
166
  content()
138
167
  }
package/compose/src/commonMain/kotlin/vn/momo/kits/application/useHeaderSearchAnimation.kt CHANGED
@@ -42,18 +42,18 @@ fun useHeaderSearchAnimation(
42
42
  )
43
43
 
44
44
  val animatedTranslateX by animateFloatAsState(
45
- targetValue = (scrollState / 52f).coerceIn(0f, 1f) * (leftPosition.value - 12) + 12,
45
+ targetValue = (scrollState / HEADER_HEIGHT*1f).coerceIn(0f, 1f) * (leftPosition.value - 12) + 12,
46
46
  )
47
47
 
48
48
  val animatedWidth by animateFloatAsState(
49
- targetValue = (scrollState / 52f).coerceIn(
49
+ targetValue = (scrollState / HEADER_HEIGHT*1f).coerceIn(
50
50
  0f,
51
51
  1f
52
52
  ) * ((searchWidth - leftPosition.value - headerRightWidth.value + 12) - searchWidth) + searchWidth,
53
53
  )
54
54
 
55
55
  val animatedTranslateY by animateFloatAsState(
56
- targetValue = (1 - (scrollState / 52f).coerceIn(0f, 1f)) * 52
56
+ targetValue = (1 - (scrollState / HEADER_HEIGHT* 1f).coerceIn(0f, 1f)) * HEADER_HEIGHT
57
57
  )
58
58
  return HeaderAnimations(
59
59
  opacity = opacityAni,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/native-kits",
3
- "version": "0.113.3-beta.3",
3
+ "version": "0.113.3-beta.5",
4
4
  "private": false,
5
5
  "dependencies": {},
6
6
  "devDependencies": {},