@momo-kits/native-kits 0.121.1-beta.1 → 0.121.1-beta.2

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderRight.kt

@@ -35,7 +35,6 @@ import vn.momo.kits.const.AppTheme
 data class HeaderRightData(
     val useShortcut: Boolean = false,
     val useMore: Boolean = false,
-    val useSystemTools: Boolean = true,
     val tools: List<ToolGroup> = emptyList(),
     val toolCallback: ((String) -> Unit)? = { _ -> }
 )
@@ -44,16 +43,14 @@ data class Tool(
     val key: String,
     val icon: String,
     val showBadge: Boolean = false,
-    val name: Map<String, String> = emptyMap(),
-    val showRightIcon: Boolean = true,
+    val name: Map<String, String> = emptyMap()
 ) {
     fun toMap(): Map<String, Any> {
         return mapOf(
             "key" to key,
             "icon" to icon,
             "showBadge" to showBadge,
-            "name" to name,
-            "showRightIcon" to showRightIcon
+            "name" to name
         )
     }
 }
@@ -151,19 +148,13 @@ private fun ToolkitHeaderRight(
     }
 
     fun onPressClose() {
-        if(DesignSystemWhiteList == true) {
-            api?.request("dismissAll", "", { _ -> })
-        }
-        else {
-            api?.request("dismiss", "", { _ -> })
-        }
+        api?.request("dismiss", "", { _ -> })
     }
 
     fun onPressMore() {
         api?.request(
             "showTools",
             mapOf(
-                "useSystemTools" to headerRight?.useSystemTools,
                 "tools" to headerRight?.tools?.map { it.toMap() },
                 "context" to mapOf(
                     "appId" to context?.appId,
@@ -254,7 +245,7 @@ private fun ToolkitHeaderRight(
             }
 
             Icon(
-                source = if(DesignSystemWhiteList == true) "16_basic_home" else "16_navigation_close_circle",
+                source = "16_navigation_close_circle",
                 size = 20.dp,
                 color = tintIconColor,
                 modifier = Modifier.padding(4.dp).clickable { onPressClose() }

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt

@@ -119,8 +119,18 @@ fun Screen(
                 scrollState = scrollState.value,
                 headerTransparent = headerTransparent
             )
+        } else {
+            Box(
+                Modifier.zIndex(2f)
+                    .background(Color.White.copy(alpha = opacity))
+                    .graphicsLayer { alpha = opacity }
+            ) {
+                HeaderBackground(
+                    headerType = headerType,
+                    scrollState = scrollState.value
+                )
+            }
         }
-
         Header(
             headerType = headerType,
             title = title,

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Image.kt

@@ -113,18 +113,20 @@ fun Image(
             }
             mutableStateOf(sourceImage)
         }
-        AsyncImage(
-            modifier = Modifier.matchParentSize(),
-            model = urlToLoad,
-            contentDescription = null,
-            contentScale = imageOptions.contentScale,
-            alignment = imageOptions.alignment,
-            colorFilter = imageOptions.colorFilter,
-            alpha = imageOptions.alpha,
-            onLoading = { imageState = ImageState.Loading },
-            onSuccess = { imageState = ImageState.Success },
-            onError = { imageState = ImageState.Error },
-        )
+        if (imageState != ImageState.Error) {
+            AsyncImage(
+                modifier = Modifier.matchParentSize(),
+                model = urlToLoad,
+                contentDescription = null,
+                contentScale = imageOptions.contentScale,
+                alignment = imageOptions.alignment,
+                colorFilter = imageOptions.colorFilter,
+                alpha = imageOptions.alpha,
+                onLoading = { imageState = ImageState.Loading },
+                onSuccess = { imageState = ImageState.Success },
+                onError = { imageState = ImageState.Error },
+            )
+        }
 
         when (imageState) {
             ImageState.Loading -> if (loading) Skeleton()

package/compose/src/commonMain/kotlin/vn/momo/kits/components/datetimepicker/DateTimePicker.kt

@@ -9,19 +9,12 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.max
-import kotlinx.coroutines.flow.collect
-import kotlinx.coroutines.flow.mapNotNull
-import kotlinx.coroutines.flow.onEach
 import kotlinx.datetime.LocalDateTime
 import kotlinx.datetime.number
 import vn.momo.kits.components.Text
@@ -32,6 +25,51 @@ import vn.momo.kits.const.Typography
 private val datePickerHeight = 210.dp
 private val datePickerWithLabelsHeight = 238.dp
 
+private fun onPickerChange(
+    name: String,
+    value: String,
+    currentDate: PickerData,
+    effectiveMinDate: LocalDateTime,
+    effectiveMaxDate: LocalDateTime,
+    onChange: (LocalDateTime) -> Unit
+) {
+    when (name) {
+        "day" -> currentDate.day = value.toInt()
+        "month" -> currentDate.month = value.toInt()
+        "year" -> currentDate.year = value.toInt()
+        "hour" -> currentDate.hour = value.toInt()
+        "minute" -> currentDate.minute = value.toInt()
+        "timeMode" -> currentDate.timeMode = value
+    }
+
+    if (name == "month" || name == "year") {
+        val maxDayOfMonth = when (currentDate.month) {
+            1, 3, 5, 7, 8, 10, 12 -> 31
+            4, 6, 9, 11 -> 30
+            2 -> if (currentDate.year % 4 == 0 && (currentDate.year % 100 != 0 || currentDate.year % 400 == 0)) 29 else 28
+            else -> 31
+        }
+
+        if (currentDate.day > maxDayOfMonth) {
+            currentDate.day = maxDayOfMonth
+        }
+    }
+
+    val changedDate = LocalDateTime(
+        year = currentDate.year,
+        monthNumber = currentDate.month,
+        dayOfMonth = currentDate.day,
+        hour = currentDate.hour,
+        minute = currentDate.minute,
+        second = 0,
+        nanosecond = 0
+    )
+
+    if (changedDate in effectiveMinDate..effectiveMaxDate) {
+        onChange(changedDate)
+    }
+}
+
 @Composable
 fun DateTimePicker(
     modifier: Modifier = Modifier,
@@ -43,32 +81,25 @@ fun DateTimePicker(
     maxDate: LocalDateTime? = null,
     arrayLabelTime: List<String> = emptyList()
 ) {
-    val effectiveSelectedValue = remember(selectedValue) {
-        selectedValue ?: getCurrentDateTime()
-    }
+    val now = remember { getCurrentDateTime() }
 
-    val effectiveMinDate = remember(minDate) {
-        minDate ?: createRelativeDate(-10)
-    }
+    val minDateDefault = remember { createRelativeDate(-10) }
 
-    val effectiveMaxDate = remember(maxDate) {
-        maxDate ?: createRelativeDate(10)
-    }
+    val maxDateDefault = remember { createRelativeDate(10) }
 
-    val needCheckRange = remember(minDate, maxDate) {
-        minDate == null && maxDate == null
-    }
+    val effectiveSelectedValue = selectedValue ?: now
+    val effectiveMinDate = minDate ?: minDateDefault
+    val effectiveMaxDate = maxDate ?: maxDateDefault
 
-    val initialValue = remember(effectiveMinDate, effectiveMaxDate, effectiveSelectedValue) {
+    val initialValue = remember {
         when {
-            !needCheckRange -> effectiveSelectedValue
             effectiveSelectedValue < effectiveMinDate -> effectiveMinDate
             effectiveSelectedValue > effectiveMaxDate -> effectiveMaxDate
             else -> effectiveSelectedValue
         }
     }
 
-    var currentDate by remember(initialValue) {
+    val currentDate by remember {
         mutableStateOf(
             PickerData(
                 day = initialValue.dayOfMonth,
@@ -80,67 +111,6 @@ fun DateTimePicker(
         )
     }
 
-    val onWheelChangeValue = remember(currentDate, effectiveMinDate, effectiveMaxDate) {
-        { name: String, value: String ->
-            var day = if (name == "day") value.toInt() else currentDate.day
-            var month = if (name == "month") value.toInt() else currentDate.month
-            val year = if (name == "year") value.toInt() else currentDate.year
-            val hour = if (name == "hour") value.toInt() else currentDate.hour
-            val minute = if (name == "minute") value.toInt() else currentDate.minute
-            val timeMode = if (name == "timeMode") value else currentDate.timeMode
-            if (name == "year") {
-                month = when (year) {
-                    effectiveMaxDate.year -> month.coerceIn(
-                        1,
-                        effectiveMaxDate.monthNumber
-                    )
-                    effectiveMinDate.year -> month.coerceIn(
-                        effectiveMinDate.monthNumber,
-                        12,
-                    )
-                    else -> month
-                }
-            }
-            if (name == "month" || name == "year") {
-                val maxDayOfMonth = when (month) {
-                    4, 6, 9, 11 -> 30
-                    2 -> if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) 29 else 28
-                    else -> 31
-                }
-
-                day = when {
-                    year == effectiveMaxDate.year && month == effectiveMaxDate.monthNumber ->
-                        day.coerceIn(1, effectiveMaxDate.dayOfMonth)
-
-                    year == effectiveMinDate.year && month == effectiveMinDate.monthNumber ->
-                        day.coerceIn(effectiveMinDate.dayOfMonth, maxDayOfMonth)
-
-                    day > maxDayOfMonth -> maxDayOfMonth
-                    else -> day
-                }
-            }
-            currentDate = PickerData(
-                day = day,
-                month = month,
-                year = year,
-                hour = hour,
-                minute = minute,
-                timeMode = timeMode,
-            )
-        }
-    }
-
-    LaunchedEffect(effectiveMinDate, effectiveMaxDate) {
-        snapshotFlow { currentDate }
-            .mapNotNull {
-                val dateTime = it.toLocalDateTime()
-                if (!needCheckRange || dateTime in effectiveMinDate..effectiveMaxDate) dateTime
-                else null
-            }
-            .onEach(onChange)
-            .collect()
-    }
-
     val pickerHeight = if (arrayLabelTime.isNotEmpty())
         datePickerWithLabelsHeight else
         datePickerHeight
@@ -187,7 +157,16 @@ fun DateTimePicker(
                         "timeMode" -> currentDate.timeMode
                         else -> ""
                     },
-                    onChange = onWheelChangeValue,
+                    onChange = { name, value ->
+                        onPickerChange(
+                            name,
+                            value,
+                            currentDate,
+                            effectiveMinDate,
+                            effectiveMaxDate,
+                            onChange
+                        )
+                    }
                 )
             }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/components/datetimepicker/DateTimePickerTypes.kt

@@ -1,7 +1,5 @@
 package vn.momo.kits.components.datetimepicker
 
-import kotlinx.datetime.LocalDateTime
-
 data class PickerData(
     var day: Int,
     var month: Int,
@@ -9,19 +7,7 @@ data class PickerData(
     var hour: Int = 0,
     var minute: Int = 0,
     var timeMode: String = ""
-) {
-    fun toLocalDateTime(): LocalDateTime {
-        return LocalDateTime(
-            year = year,
-            monthNumber = month,
-            dayOfMonth = day,
-            hour = hour,
-            minute = minute,
-            second = 0,
-            nanosecond = 0
-        )
-    }
-}
+)
 
 data class DateComponent(
     val name: String,

package/compose/src/commonMain/kotlin/vn/momo/kits/components/datetimepicker/WheelPicker.kt

@@ -14,6 +14,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.produceState
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
@@ -25,10 +26,10 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
+import kotlinx.coroutines.FlowPreview
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.collect
 import kotlinx.coroutines.flow.debounce
-import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.onEach
 import vn.momo.kits.components.Text
 import vn.momo.kits.const.AppTheme
@@ -65,28 +66,14 @@ fun WheelPicker(
 
     var selectedIndex by remember { mutableStateOf(0) }
 
-    LaunchedEffect(paddedData) {
-        snapshotFlow { selectedIndex }
-            .distinctUntilChanged()
-            .debounce(50)
-            .onEach {
-                val value = paddedData.getOrNull(it)
-                if (!value.isNullOrEmpty()) {
-                    onChange(name, value)
-                }
-            }
-            .collect()
-    }
-
-    LaunchedEffect(paddedData) {
+    LaunchedEffect(Unit) {
         snapshotFlow { listState.isScrollInProgress }
             .onEach {
                 if (it) return@onEach
                 val firstItem = listState.layoutInfo.visibleItemsInfo.firstOrNull() ?: return@onEach
-                val firstItemIdx = firstItem.index
                 val firstItemOffset = firstItem.offset
                 if (firstItemOffset == 0) {
-                    selectedIndex = firstItemIdx + 2
+                    selectedIndex = firstItem.index + 2
                     return@onEach
                 }
                 val isScrollUp = abs(firstItemOffset) > itemHeightPx / 2
@@ -97,8 +84,9 @@ fun WheelPicker(
                 }
                 delay(50)
                 listState.animateScrollBy(offset.toFloat())
-                val centeredIndex = firstItemIdx + (if (isScrollUp) 1 else 0) + 2
+                val centeredIndex = firstItem.index + (if (isScrollUp) 1 else 0) + 2
                 if (centeredIndex in 2 until paddedData.size - 2) {
+                    onChange(name, paddedData[centeredIndex])
                     selectedIndex = centeredIndex
                 }
             }

package/ios/Application/HeaderRight.swift

@@ -6,20 +6,17 @@ public struct HeaderRightData {
     var useMore: Bool
     var tools: [ToolGroup]
     var toolCallback: ((String) -> Void)?
-    var useSystemTools: Bool
     
     public init(
         useShortcut: Bool = false,
         useMore: Bool = false,
         tools: [ToolGroup] = [],
-        toolCallback: ((String) -> Void)? = nil,
-        useSystemTools: Bool = true
+        toolCallback: ((String) -> Void)? = nil
     ) {
         self.useShortcut = useShortcut
         self.useMore = useMore
         self.tools = tools
         self.toolCallback = toolCallback
-        self.useSystemTools = useSystemTools
     }
 }
 
@@ -28,20 +25,17 @@ public struct Tool {
     var icon: String
     var showBadge: Bool
     var name: [String: String]
-    var showRightIcon: Bool
     
     public init(
         key: String,
         icon: String,
         name: [String: String] = [:],
-        showBadge: Bool = false,
-        showRightIcon: Bool = true
+        showBadge: Bool = false
     ) {
         self.key = key
         self.icon = icon
         self.showBadge = showBadge
         self.name = name
-        self.showRightIcon = showRightIcon
     }
     
     func toMap() -> [String: Any] {
@@ -49,8 +43,7 @@ public struct Tool {
             "key": key,
             "icon": icon,
             "showBadge": showBadge,
-            "name": name,
-            "showRightIcon": showRightIcon
+            "name": name
         ]
     }
 }
@@ -130,7 +123,7 @@ struct ToolkitHeaderRight: View {
     
     private func onPressClose() {
         environment.composeApi?.request(
-            funcName: "dismissAll",
+            funcName: "dismiss",
             params: ""
         ) { _ in }
     }
@@ -138,7 +131,6 @@ struct ToolkitHeaderRight: View {
     private func onPressMore() {
         let context = environment.applicationContext
         let params: [String: Any] = [
-            "useSystemTools": headerRight?.useSystemTools,
             "tools": headerRight?.tools.map { $0.toMap() } ?? [],
             "context": [
                 "appId": context?.appId,
@@ -216,7 +208,7 @@ struct ToolkitHeaderRight: View {
                     .fill(tintColor ?? Colors.black20)
                     .frame(width: 0.5, height: 12)
                 
-                Icon(source: "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
+                Icon(source: "16_navigation_close_circle", size: 20, color: tintColor ?? Colors.black17)
                     .padding(4)
                     .onTapGesture {
                         onPressClose()

package/ios/ScrollIndicator/ScrollIndicator.swift

@@ -3,7 +3,7 @@ import SwiftUI
 
 public struct ScrollViewWithScrollBar<Content: View>: View {
     let INDICATOR_HEIGHT: CGFloat = 4
-    @State var position = CGPoint(x: 0, y: 2)  //2 is INDICATOR_HEIGHT/2
+    @State var position = CGPoint(x: 0, y: 2) //2 is INDICATOR_HEIGHT/2
     @State var contentSize: CGFloat = 0
     @State var scrollViewWidth: CGFloat = 0
     var indicatorWidth: CGFloat
@@ -11,97 +11,69 @@ public struct ScrollViewWithScrollBar<Content: View>: View {
     var indicatorColor: Color
     var indicatorContainerColor: Color
     @ViewBuilder var content: () -> Content
-
-    public init(
-        indicatorWidth: CGFloat = 12, indicatorContainerWidth: CGFloat = 36,
-        indicatorColor: Color = Colors.primary, indicatorContainerColor: Color = Colors.black06,
-        @ViewBuilder content: @escaping () -> Content
-    ) {
+    
+    public init(indicatorWidth: CGFloat = 12, indicatorContainerWidth: CGFloat = 36,indicatorColor: Color = Colors.primary, indicatorContainerColor: Color = Colors.black06,@ViewBuilder content: @escaping () -> Content) {
         self.indicatorWidth = indicatorWidth
         self.indicatorContainerWidth = indicatorContainerWidth
+        self.content = content
         self.indicatorColor = indicatorColor
         self.indicatorContainerColor = indicatorContainerColor
-        self.content = content
     }
-
-  // MARK: Public
-
+    
+    // MARK: Public
+    
     public var body: some View {
         return VStack {
-        ScrollView(.horizontal, showsIndicators: false) {
-            HStack {
-            content()
-            }
-            .fixedSize(horizontal: true, vertical: false)
-            .overlay(
-            GeometryReader { proxy in
-                Color.clear
-                .preference(
-                    key: ViewOffsetKey.self,
-                    value: -proxy.frame(in: .named("scroll")).origin.x
-                )
-                .preference(
-                    key: ContentSizeKey.self,
-                    value: proxy.size.width)
-            },
-            alignment: .topLeading
-            )
-            .onPreferenceChange(ContentSizeKey.self) { newContentSize in
-            if newContentSize > 0 {
-                self.contentSize = newContentSize
-                if self.position == CGPoint(x: 0, y: 2) {
-                self.position = CGPoint(x: indicatorWidth / 2, y: INDICATOR_HEIGHT / 2)
+            ScrollView(.horizontal, showsIndicators: false) {
+                HStack {
+                    content()
+                }.background(GeometryReader {
+                    proxy in
+                    Color.clear.onAppear {
+                        self.contentSize = proxy.size.width
+                        self.position = CGPoint(x: indicatorWidth / 2, y: INDICATOR_HEIGHT / 2)
+                    }
+                    Color.clear.preference(key: ViewOffsetKey.self,
+                                           value: -proxy.frame(in: .named("scroll")).origin.x)
+                    
+                })
+                .onPreferenceChange(ViewOffsetKey.self) {
+                    let newPosition = $0 * ((indicatorContainerWidth - indicatorWidth) / (contentSize - scrollViewWidth)) + indicatorWidth / 2
+                    if (newPosition > indicatorWidth / 2 && newPosition < indicatorContainerWidth - indicatorWidth / 2 + 1)
+                    {
+                        self.position = CGPoint(x: newPosition, y: INDICATOR_HEIGHT / 2)
+                    }
                 }
-            }
-            }
-            .onPreferenceChange(ViewOffsetKey.self) { offset in
-            let newPosition =
-                (offset * ((indicatorContainerWidth - indicatorWidth) / (contentSize - scrollViewWidth)))
-                + indicatorWidth / 2
-
-            if !newPosition.isNaN {
-                self.position = CGPoint(x: newPosition, y: INDICATOR_HEIGHT / 2)
-            }
-            }
-        }.background(
-            GeometryReader { proxy in
-            Color.clear.onAppear {
-                self.scrollViewWidth = proxy.size.width
-            }
-            }
-        ).coordinateSpace(name: "scroll")
-
-        HStack(spacing: 0) {
-            HStack(spacing: 0) {}.frame(width: indicatorWidth, height: INDICATOR_HEIGHT)
-            .background(indicatorColor)
-            .cornerRadius(8)
-            .position(self.position)
-        }.frame(width: indicatorContainerWidth, height: INDICATOR_HEIGHT, alignment: .leading)
-            .background(indicatorContainerColor).cornerRadius(8)
+            }.background(GeometryReader {
+                proxy in
+                Color.clear.onAppear {
+                    self.scrollViewWidth = proxy.size.width
+                }
+            }).coordinateSpace(name: "scroll")
+            
+            HStack {
+                HStack {}.frame(width: indicatorWidth, height: INDICATOR_HEIGHT)
+                    .background(indicatorColor)
+                    .cornerRadius(Radius.S)
+                    .position(position)
+            }.frame(width: indicatorContainerWidth, height: INDICATOR_HEIGHT, alignment: .leading)
+                .background(indicatorContainerColor).cornerRadius(Radius.S)
         }
+        
+        
+        
     }
+    
 }
 
 // MARK: - ViewOffsetKey
 
 struct ViewOffsetKey: PreferenceKey {
     typealias Value = CGFloat
-
+    
     static var defaultValue = CGFloat.zero
-
+    
     static func reduce(value: inout Value, nextValue: () -> Value) {
         value += nextValue()
     }
 }
-
-// MARK: - ContentSizeKey
-
-struct ContentSizeKey: PreferenceKey {
-    typealias Value = CGFloat
-
-    static var defaultValue = CGFloat.zero
-
-    static func reduce(value: inout Value, nextValue: () -> Value) {
-        value = nextValue()
-    }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.121.1-beta.1",
+  "version": "0.121.1-beta.2",
   "private": false,
   "dependencies": {},
   "devDependencies": {},

package/build/ios/Debug-iphonesimulator/Compose Kits.app/PkgInfo

@@ -1 +0,0 @@
-APPL????