@momo-kits/native-kits 0.113.3-webview.2 → 0.114.1-beta.1

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

@@ -0,0 +1,226 @@
+package vn.momo.kits.components.dateTimePicker
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import kotlinx.datetime.Clock
+import kotlinx.datetime.DatePeriod
+import kotlinx.datetime.LocalDateTime
+import kotlinx.datetime.TimeZone
+import kotlinx.datetime.minus
+import kotlinx.datetime.number
+import kotlinx.datetime.plus
+import kotlinx.datetime.toLocalDateTime
+
+/**
+ * Format a LocalDateTime object into a string
+ */
+fun formatLocalDateTime(dateTime: LocalDateTime, format: String = "yyyy-MM-dd HH:mm"): String {
+    return when (format) {
+        "yyyy-MM-dd HH:mm" -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${paddingNum(dateTime.dayOfMonth)} ${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
+        "dd-MM-yyyy" -> "${paddingNum(dateTime.dayOfMonth)}-${paddingNum(dateTime.month.number)}-${dateTime.year}"
+        "HH:mm" -> "${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
+        else -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${paddingNum(dateTime.dayOfMonth)} ${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
+    }
+}
+
+/**
+ * Pad a number with a leading zero if it's less than 10
+ */
+fun paddingNum(num: Int): String {
+    return if (num > 9) num.toString() else "0$num"
+}
+
+/**
+ * Get a list of days in a month
+ */
+fun getDaysInMonth(
+    year: Int,
+    month: Int,
+    minDate: LocalDateTime,
+    maxDate: LocalDateTime
+): List<String> {
+    val daysInMonth = when (month) {
+        1, 3, 5, 7, 8, 10, 12 -> 31
+        4, 6, 9, 11 -> 30
+        2 -> if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) 29 else 28
+        else -> throw IllegalArgumentException("Invalid month: $month")
+    }
+
+    var startDay = 1
+    var endDay = daysInMonth
+
+    if (year == minDate.year && month == minDate.month.number) {
+        startDay = minDate.dayOfMonth
+    }
+
+    if (year == maxDate.year && month == maxDate.month.number) {
+        endDay = maxDate.dayOfMonth
+    }
+
+    val days = mutableListOf<String>()
+    for (day in startDay..endDay) {
+        days.add(paddingNum(day))
+    }
+
+    return days
+}
+
+/**
+ * Get a list of months
+ */
+fun getMonths(
+    minDate: LocalDateTime,
+    maxDate: LocalDateTime,
+    currentYear: Int
+): List<String> {
+    var startMonth = 1
+    var endMonth = 12
+
+    if (currentYear == minDate.year) {
+        startMonth = minDate.month.number
+    }
+
+    if (currentYear == maxDate.year) {
+        endMonth = maxDate.month.number
+    }
+
+    val months = mutableListOf<String>()
+    for (month in startMonth..endMonth) {
+        months.add(paddingNum(month))
+    }
+
+    return months
+}
+
+/**
+ * Get a list of years
+ */
+fun getYears(minDate: LocalDateTime, maxDate: LocalDateTime): List<String> {
+    val startYear = minDate.year
+    val endYear = maxDate.year
+    val years = mutableListOf<String>()
+
+    for (year in startYear..endYear) {
+        years.add(year.toString())
+    }
+
+    return years
+}
+
+/**
+ * Get a list of hours
+ */
+fun getHours(hourMode: Int): List<String> {
+    val hours = mutableListOf<String>()
+    for (i in 0 until hourMode) {
+        val hour = if (hourMode == 12) i + 1 else i
+        hours.add(paddingNum(hour))
+    }
+    return hours
+}
+
+/**
+ * Get a list of minutes
+ */
+fun getMinutes(interval: Int): List<String> {
+    val minutes = mutableListOf<String>()
+    var min = 0
+    while (min < 60) {
+        minutes.add(paddingNum(min))
+        min += interval
+    }
+    return minutes
+}
+
+/**
+ * Time mode for 12-hour clock
+ */
+val timeMode = listOf("AM", "PM")
+
+/**
+ * Get today's date
+ */
+fun getCurrentDateTime(): LocalDateTime {
+    return Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
+}
+
+/**
+ * Create a date that's a certain number of years before or after the current date
+ */
+fun createRelativeDate(years: Int): LocalDateTime {
+    val currentDateTime = getCurrentDateTime()
+    val period = DatePeriod(years = if (years < 0) -years else years)
+    
+    val adjustedDate = if (years < 0) {
+        currentDateTime.date.minus(period)
+    } else {
+        currentDateTime.date.plus(period)
+    }
+    
+    return LocalDateTime(
+        adjustedDate.year,
+        adjustedDate.monthNumber,
+        adjustedDate.dayOfMonth,
+        currentDateTime.hour,
+        currentDateTime.minute
+    )
+}
+
+@Composable
+internal fun getDateComponents(
+    format: String,
+    currentDate: PickerData,
+    effectiveMinDate: LocalDateTime,
+    effectiveMaxDate: LocalDateTime,
+    minuteInterval: Int,
+): List<DateComponent> {
+    val formatParts = remember(format) {
+        format.split(Regex("[^A-Za-z]+"))
+    }
+
+    val isOnlyHour = remember(formatParts) {
+        formatParts.size == 1 && formatParts[0] == "HH"
+    }
+
+    val dayData = remember(currentDate.year, currentDate.month, effectiveMinDate, effectiveMaxDate) {
+        getDaysInMonth(currentDate.year, currentDate.month, effectiveMinDate, effectiveMaxDate)
+    }
+
+    val monthData = remember(currentDate.year, effectiveMinDate, effectiveMaxDate) {
+        getMonths(effectiveMinDate, effectiveMaxDate, currentDate.year)
+    }
+
+    val yearData = remember(effectiveMinDate, effectiveMaxDate) {
+        getYears(effectiveMinDate, effectiveMaxDate)
+    }
+
+    val hourData = remember(isOnlyHour) {
+        getHours(if (isOnlyHour) 12 else 24)
+    }
+
+    val minData = remember(minuteInterval) {
+        getMinutes(minuteInterval)
+    }
+
+    val dateComponents = remember(formatParts, dayData, monthData, yearData, hourData, minData, isOnlyHour) {
+        val components = mutableListOf<DateComponent>()
+
+        formatParts.forEach { part ->
+            when (part) {
+                "DD" -> components.add(DateComponent("day", dayData))
+                "MM" -> components.add(DateComponent("month", monthData))
+                "YYYY" -> components.add(DateComponent("year", yearData))
+                "HH" -> components.add(DateComponent("hour", hourData))
+                "mm" -> components.add(DateComponent("minute", minData))
+            }
+        }
+
+        if (isOnlyHour) {
+            components.add(DateComponent("timeMode", timeMode))
+        }
+
+        components
+    }
+
+    return dateComponents
+}

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

@@ -0,0 +1,201 @@
+package vn.momo.kits.components.dateTimePicker
+
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.animateScrollBy
+import androidx.compose.foundation.gestures.draggable
+import androidx.compose.foundation.gestures.rememberDraggableState
+import androidx.compose.foundation.gestures.scrollBy
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.scale
+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.CoroutineScope
+import kotlinx.coroutines.launch
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Typography
+import kotlin.math.abs
+import kotlin.math.roundToInt
+
+private val wheelItemHeight = 42.dp
+private val wheelPickerBorderWidth = 1.dp
+
+private fun onDragStopped(
+    listState: androidx.compose.foundation.lazy.LazyListState,
+    itemHeight: Float,
+    coroutineScope: CoroutineScope
+) {
+
+    coroutineScope.launch {
+        val targetPosition = listState.firstVisibleItemScrollOffset / itemHeight
+        val targetOffset = if (targetPosition.roundToInt() == targetPosition.toInt()) {
+            0f
+        } else {
+            if (targetPosition - targetPosition.toInt() > 0.5f) {
+                (1 - (targetPosition - targetPosition.toInt())) * itemHeight
+            } else {
+                -(targetPosition - targetPosition.toInt()) * itemHeight
+            }
+        }
+
+        listState.animateScrollBy(targetOffset, tween(150))
+    }
+}
+
+@Composable
+fun WheelPicker(
+    name: String,
+    data: List<String>,
+    selectedData: String,
+    onChange: (String, String) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val coroutineScope = rememberCoroutineScope()
+    val listState = rememberLazyListState()
+    val itemHeightPx = with(LocalDensity.current) { wheelItemHeight.toPx() }
+
+    val paddedData = remember(data) {
+        listOf("", "") + data + listOf("", "")
+    }
+
+    val initialIndex = remember(selectedData, paddedData) {
+        paddedData.indexOf(selectedData).coerceAtLeast(2)
+    }
+
+    LaunchedEffect(initialIndex) {
+        listState.scrollToItem(initialIndex - 2)
+    }
+
+    val selectedIndex by remember {
+        derivedStateOf {
+            (listState.firstVisibleItemIndex + 2).coerceIn(2, paddedData.size - 3)
+        }
+    }
+
+    LaunchedEffect(listState.isScrollInProgress) {
+        if (!listState.isScrollInProgress) {
+            val centeredIndex = selectedIndex
+            if (centeredIndex in 2 until paddedData.size - 2) {
+                onChange(name, paddedData[centeredIndex])
+            }
+        }
+    }
+
+    Box(
+        modifier = modifier
+            .border(
+                width = wheelPickerBorderWidth,
+                color = AppTheme.current.colors.border.default,
+                shape = RoundedCornerShape(Radius.S)
+            )
+            .background(
+                color = AppTheme.current.colors.background.surface,
+            )
+    ) {
+        LazyColumn(
+            state = listState,
+            modifier = Modifier
+                .fillMaxWidth()
+                .draggable(
+                    orientation = Orientation.Vertical,
+                    state = rememberDraggableState { delta ->
+                        coroutineScope.launch {
+                            listState.scrollBy(-delta)
+                        }
+                    },
+                    onDragStopped = {
+                        onDragStopped(
+                            listState = listState,
+                            itemHeight = itemHeightPx,
+                            coroutineScope = coroutineScope
+                        )
+                    }
+                )
+        ) {
+            items(paddedData.size) { index ->
+                WheelPickerItem(
+                    text = paddedData[index],
+                    isSelected = index == selectedIndex,
+                    index = index,
+                    listState = listState,
+                    itemHeight = wheelItemHeight
+                )
+            }
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(wheelItemHeight)
+                .background(Colors.blue_10)
+                .align(Alignment.Center)
+                .alpha(0.2f)
+                .zIndex(-2f)
+        )
+    }
+}
+
+@Composable
+fun WheelPickerItem(
+    text: String,
+    isSelected: Boolean,
+    index: Int,
+    listState: androidx.compose.foundation.lazy.LazyListState,
+    itemHeight: Dp
+) {
+    val firstVisibleIndex = listState.firstVisibleItemIndex
+    val visibleItemOffset = listState.firstVisibleItemScrollOffset
+
+    val viewportHeight = 5 * itemHeight.value
+    val itemHeightValue = itemHeight.value
+
+    val absoluteOffset =
+        (index - firstVisibleIndex) * itemHeightValue - (visibleItemOffset / itemHeightValue)
+    val relativePosition = absoluteOffset / viewportHeight
+
+    val distance = abs(2 - relativePosition)
+
+    val opacity = when {
+        distance <= 1 -> 1f
+        distance <= 2 -> 0.8f
+        distance <= 3 -> 0.4f
+        else -> 0.4f
+    }
+
+    val scale = if (isSelected) 1f else 0.87f
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(itemHeight)
+            .alpha(opacity),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = text,
+            style = Typography.actionS,
+            modifier = Modifier.scale(scale)
+        )
+    }
+} 

package/ios/Application/ApplicationEnvironment.swift

@@ -13,12 +13,12 @@ public class MiniAppContext {
     public var appName: Any? = nil
     public var appIcon: String = ""
     public var description: Any? = nil
-    public var support: Any? = nil
-    public var toolkitConfig: Any? = nil
-    public var providerId: String = ""
-    public var permissions: Any? = nil
-
-    public init(appId: String, appCode: String, appName: Any? = nil, appIcon: String, description: Any? = nil, support: Any? = nil, toolkitConfig: Any? = nil, providerId: String, permissions: Any? = nil) {
+    public var support: [String: Any] = [:]
+    public var toolkitConfig: [String: Any] = [:]
+    public var providerId: String = "momo"
+    public var permissions: [[String: Any]] = []
+    
+    public init(appId: String, appCode: String, appName: Any? = nil, appIcon: String, description: Any? = nil, support: [String: Any] = [:], toolkitConfig: [String: Any] = [:], providerId: String = "momo", permissions: [[String: Any]] = []) {
         self.appId = appId
         self.appCode = appCode
         self.appName = appName
@@ -31,12 +31,20 @@ public class MiniAppContext {
     }
 }
 
+public class KitConfig {
+    public var trustBanner: TrustBannerData? = nil
+    public var headerBar: String? = nil
+    public var headerGradient: String? = nil
+}
+
 public class ApplicationEnvironment: ObservableObject {
     let applicationContext: MiniAppContext?
-    let composeApi: KitComposeApi
-
-    public init(applicationContext: MiniAppContext?, composeApi: KitComposeApi) {
+    let composeApi: KitComposeApi?
+    let config: KitConfig?
+    
+    public init(applicationContext: MiniAppContext? = nil, composeApi: KitComposeApi? = nil, config: KitConfig? = nil) {
         self.applicationContext = applicationContext
         self.composeApi = composeApi
+        self.config = config
     }
 }

package/ios/Application/HeaderRight.swift

@@ -6,7 +6,7 @@ public struct HeaderRightData {
     var useMore: Bool
     var tools: [ToolGroup]
     var toolCallback: ((String) -> Void)?
-
+    
     public init(
         useShortcut: Bool = false,
         useMore: Bool = false,
@@ -25,7 +25,7 @@ public struct Tool {
     var icon: String
     var showBadge: Bool
     var name: [String: String]
-
+    
     public init(
         key: String,
         icon: String,
@@ -37,7 +37,7 @@ public struct Tool {
         self.showBadge = showBadge
         self.name = name
     }
-
+    
     func toMap() -> [String: Any] {
         return [
             "key": key,
@@ -51,7 +51,7 @@ public struct Tool {
 public struct ToolGroup {
     var title: [String: String]
     var items: [Tool]
-
+    
     public init(
         title: [String: String] = [:],
         items: [Tool]
@@ -59,7 +59,7 @@ public struct ToolGroup {
         self.title = title
         self.items = items
     }
-
+    
     func toMap() -> [String: Any] {
         return [
             "title": title,
@@ -79,7 +79,7 @@ public struct HeaderRight: View {
         self.headerRight = headerRight
     }
     var headerRight: HeaderRightData?
-
+    
     public var body: some View {
         HStack(alignment: .center) {
             ToolkitHeaderRight(headerRight: headerRight)
@@ -92,17 +92,17 @@ struct ToolkitHeaderRight: View {
     @State private var isFavorite: Bool = false
     @State private var isLoading: Bool = false
     @EnvironmentObject private var environment: ApplicationEnvironment
-
+    
     // MARK: - Actions
     private func onPressShortcut() {
-        environment.composeApi.request(
+        environment.composeApi?.request(
             funcName: "onToolAction",
             params: ["item": ["key": "onFavorite"]]
         ) { _ in
             isFavorite.toggle()
         }
     }
-
+    
     private func onPressHelpCenter() {
         let context = environment.applicationContext
         let paramMap: [String: Any] = [
@@ -112,20 +112,19 @@ struct ToolkitHeaderRight: View {
             "icon": context?.appIcon,
             "description": context?.description
         ]
-        environment.composeApi.request(
+        environment.composeApi?.request(
             funcName: "showHelpCenter",
             params: paramMap
         ) { _ in }
     }
-
+    
     private func onPressClose() {
-        environment.composeApi.request(
+        environment.composeApi?.request(
             funcName: "dismiss",
             params: ""
         ) { _ in }
     }
-
-
+    
     private func onPressMore() {
         let context = environment.applicationContext
         let params: [String: Any] = [
@@ -136,13 +135,13 @@ struct ToolkitHeaderRight: View {
                 "name": context?.appName,
                 "icon": context?.appIcon,
                 "description": context?.description,
-                 "support": context?.support,
-                 "toolkitConfig": context?.toolkitConfig,
-                 "providerId": context?.providerId,
-                 "permissions": context?.permissions
+                "support": context?.support,
+                "toolkitConfig": context?.toolkitConfig,
+                "providerId": context?.providerId,
+                "permissions": context?.permissions
             ]
         ]
-        environment.composeApi.request(
+        environment.composeApi?.request(
             funcName: "showTools",
             params: params
         ) { response in
@@ -157,12 +156,12 @@ struct ToolkitHeaderRight: View {
             }
         }
     }
-
+    
     private func getNavigationButtonConfig() -> NavigationButtonConfig {
         let totalTools = headerRight?.tools.reduce(0) { $0 + $1.items.count } ?? 0
         var icon = isFavorite ? "pin_star_checked" : "pin_star"
         var onClickHandler: () -> Void = onPressShortcut
-
+        
         if totalTools > 1 || headerRight?.useMore == true {
             icon = "navigation_more_icon"
             onClickHandler = onPressMore
@@ -172,16 +171,16 @@ struct ToolkitHeaderRight: View {
                 headerRight?.toolCallback?(singleTool.key)
             }
         }
-
+        
         return NavigationButtonConfig(icon: icon, onPress: onClickHandler)
     }
-
+    
     var body: some View {
         let navButtonConfig = getNavigationButtonConfig()
         let showBadge = headerRight?.tools.contains { group in
             group.items.contains { $0.showBadge }
         } ?? false
-
+        
         HStack(alignment: .center) {
             if headerRight?.useShortcut == true {
                 NavigationButton(
@@ -191,18 +190,18 @@ struct ToolkitHeaderRight: View {
                     onClick: navButtonConfig.onPress
                 )
             }
-
+            
             HStack(alignment: .center, spacing: 0) {
                 Icon(source: "help_center", size: 20)
                     .padding(4)
                     .onTapGesture {
                         onPressHelpCenter()
                     }
-
+                
                 Rectangle()
                     .fill(Colors.black20)
                     .frame(width: 0.5, height: 12)
-
+                
                 Icon(source: "16_navigation_close_circle", size: 20, color: Colors.black17)
                     .padding(4)
                     .onTapGesture {
@@ -226,7 +225,7 @@ struct NavigationButton: View {
     var icon: String
     var showBadge: Bool
     var onClick: () -> Void
-
+    
     var body: some View {
         ZStack {
             Circle()
@@ -235,9 +234,9 @@ struct NavigationButton: View {
                     Circle()
                         .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
                 )
-
+            
             Icon(source: icon, size: 16)
-
+            
             if showBadge {
                 BadgeDot(size: .small)
                     .offset(x: -2, y: -2)