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

package/compose/build.gradle.kts

@@ -41,6 +41,7 @@ kotlin {
                 implementation(libs.coil.multiplatform.core)
                 implementation(libs.coil.multiplatform.network.ktor)
                 implementation(libs.jetbrains.serialization.json)
+                implementation(libs.kotlinx.datetime)
             }
         }
         val androidMain by getting {

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

@@ -88,8 +88,32 @@ fun HeaderRight(
     }
 }
 
+private fun getNavigationButtonConfig(
+    headerRight: HeaderRightData? = null,
+    isFavorite: Boolean = false,
+    onPressShortcut: () -> Unit,
+    onPressMore: () -> Unit
+): NavigationButtonConfig {
+    val totalTools = headerRight?.tools?.sumOf { it.items.size } ?: 0
+    var icon = if (isFavorite) "pin_star_checked" else "pin_star"
+    var onClickHandler = onPressShortcut
+    if (totalTools > 1 || headerRight?.useMore == true) {
+        icon = "navigation_more_icon"
+        onClickHandler = onPressMore
+    } else if (totalTools == 1 && !headerRight?.tools.isNullOrEmpty()) {
+        val singleTool = headerRight?.tools?.first()?.items?.firstOrNull()
+        if (singleTool != null) {
+            icon = singleTool.icon
+            onClickHandler = {
+                headerRight.toolCallback?.invoke(singleTool.key)
+            }
+        }
+    }
+    return NavigationButtonConfig(icon, onClickHandler)
+}
+
 @Composable
-fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
+private fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
     var isFavorite by remember { mutableStateOf(false) }
     val isLoading by remember { mutableStateOf(false) }
     val api = PlatformApi.current as? ComposeApi
@@ -148,34 +172,8 @@ fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
         }
     }
 
-    fun getNavigationButtonConfig(
-        tools: List<ToolGroup>? = emptyList(),
-        useMore: Boolean? = false,
-        isFavorite: Boolean = false,
-        onPressShortcut: () -> Unit,
-        onPressMore: () -> Unit
-    ): NavigationButtonConfig {
-        val totalTools = tools?.sumOf { it.items.size } ?: 0
-        var icon = if (isFavorite) "pin_star_checked" else "pin_star"
-        var onClickHandler = onPressShortcut
-        if (totalTools > 1 || useMore == true) {
-            icon = "navigation_more_icon"
-            onClickHandler = onPressMore
-        } else if (totalTools == 1 && !tools.isNullOrEmpty()) {
-            val singleTool = tools.first().items.firstOrNull()
-            if (singleTool != null) {
-                icon = singleTool.icon
-                onClickHandler = {
-                    headerRight?.toolCallback?.invoke(singleTool.key)
-                }
-            }
-        }
-        return NavigationButtonConfig(icon, onClickHandler)
-    }
-
     val navButtonConfig = getNavigationButtonConfig(
-        headerRight?.tools,
-        headerRight?.useMore,
+        headerRight,
         isFavorite,
         ::onPressShortcut,
         ::onPressMore
@@ -188,7 +186,7 @@ fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
     val toolkitWidth = if (context !== null) 65.dp else 28.dp
 
     var isShowShortcut = headerRight?.useShortcut == true
-    //backup case context null of more icon
+
     if (headerRight?.useMore == true && context == null) {
         isShowShortcut = false
     }
@@ -264,7 +262,7 @@ fun NavigationButton(
         ) {
             Icon(
                 source = icon,
-                size = 16.dp
+                size = 20.dp
             )
         }
 

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

@@ -9,7 +9,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.unit.Dp
-import kotlinx.serialization.Serializable
 import vn.momo.kits.components.TrustBannerData
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
@@ -27,20 +26,35 @@ interface ComposeApi {
 }
 
 class Navigator {
-    fun push(content: @Composable () -> Unit) {}
-    fun present(content: @Composable () -> Unit) {}
-    fun reset(content: @Composable () -> Unit) {}
-    fun pop() {}
-    fun replace(content: @Composable () -> Unit) {}
-    fun popToTop() {}
+    fun push(content: @Composable () -> Unit) {
+        //implement
+    }
+    fun present(content: @Composable () -> Unit) {
+        //implement
+    }
+    fun reset(content: @Composable () -> Unit) {
+        //implement
+    }
+    fun pop() {
+        //implement
+    }
+    fun replace(content: @Composable () -> Unit) {
+        //implement
+    }
+    fun popToTop() {
+        //implement
+    }
     fun showModal(
         onClose: () -> Unit = {},
         canBackgroundClose: Boolean = true,
         content: @Composable () -> Unit,
     ) {
+        //implement
     }
 
-    fun showBottomSheet(content: @Composable () -> Unit) {}
+    fun showBottomSheet(content: @Composable () -> Unit) {
+        //implement
+    }
 }
 
 data class MiniAppContext(
@@ -69,6 +83,10 @@ val AppConfig = staticCompositionLocalOf<KitConfig?> {
     null
 }
 
+val AppLanguage = staticCompositionLocalOf<String?> {
+    null
+}
+
 data class KitConfig(
     val trustBanner: TrustBannerData? = null,
     val headerBar: String? = null,
@@ -82,6 +100,7 @@ fun ApplicationContainer(
     statusBarHeight: Dp? = AppStatusBar.current,
     applicationContext: MiniAppContext? = null,
     config: KitConfig? = null,
+    language: String? = null,
     content: @Composable () -> Unit,
 ) {
     var appTheme by remember { mutableStateOf(theme) }
@@ -110,7 +129,8 @@ fun ApplicationContainer(
         AppNavigator provides Navigator(),
         AppStatusBar provides appStatusBarHeight,
         ApplicationContext provides applicationContext,
-        AppConfig provides config
+        AppConfig provides config,
+        AppLanguage provides language
     ) {
         content()
     }

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

@@ -20,6 +20,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.application.AppConfig
+import vn.momo.kits.application.AppLanguage
 import vn.momo.kits.modifier.noFeedbackClickable
 
 val defaultBanner = TrustBannerData(
@@ -62,10 +63,10 @@ fun TrustBanner(
     serviceName: String = "",
     screenName: String = "",
     onPress: ((Map<String, String>) -> Unit)? = null,
-    trackEvent: ((String, Map<String, String>) -> Unit)? = null,
-    language: String = "vi"
+    trackEvent: ((String, Map<String, String>) -> Unit)? = null
 ) {
     val appConfig = AppConfig.current
+    val language = AppLanguage.current ?: "vi"
     val trustBanner = appConfig?.trustBanner ?: defaultBanner
     val trackParams = mapOf(
         "service_name" to serviceName,

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

@@ -0,0 +1,178 @@
+package vn.momo.kits.components.dateTimePicker
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+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.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import kotlinx.datetime.LocalDateTime
+import kotlinx.datetime.number
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Spacing
+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,
+    format: String = "DD-MM-YYYY",
+    minuteInterval: Int = 1,
+    onChange: (LocalDateTime) -> Unit,
+    selectedValue: LocalDateTime? = null,
+    minDate: LocalDateTime? = null,
+    maxDate: LocalDateTime? = null,
+    arrayLabelTime: List<String> = emptyList()
+) {
+    val now = remember { getCurrentDateTime() }
+    
+    val minDateDefault = remember { createRelativeDate(-10) }
+    
+    val maxDateDefault = remember { createRelativeDate(10) }
+    
+    val effectiveSelectedValue = selectedValue ?: now
+    val effectiveMinDate = minDate ?: minDateDefault
+    val effectiveMaxDate = maxDate ?: maxDateDefault
+    
+    val initialValue = remember {
+        when {
+            effectiveSelectedValue < effectiveMinDate -> effectiveMinDate
+            effectiveSelectedValue > effectiveMaxDate -> effectiveMaxDate
+            else -> effectiveSelectedValue
+        }
+    }
+
+    val currentDate by remember {
+        mutableStateOf(
+            PickerData(
+                day = initialValue.dayOfMonth,
+                month = initialValue.month.number,
+                year = initialValue.year,
+                hour = initialValue.hour,
+                minute = initialValue.minute
+            )
+        )
+    }
+    
+    val pickerHeight = if (arrayLabelTime.isNotEmpty())
+        datePickerWithLabelsHeight else 
+        datePickerHeight
+    
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(pickerHeight)
+            .background(AppTheme.current.colors.background.surface)
+            .padding(horizontal = Spacing.M),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        val dateComponents = getDateComponents(
+            format,
+            currentDate,
+            effectiveMinDate,
+            effectiveMaxDate,
+            minuteInterval,
+        )
+        dateComponents.forEachIndexed { index, component ->
+            val hasLabel = index < arrayLabelTime.size && arrayLabelTime[index].isNotEmpty()
+            
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.weight(1f)
+            ) {
+                if (hasLabel) {
+                    Text(
+                        text = arrayLabelTime[index],
+                        style = Typography.actionS,
+                        modifier = Modifier.padding(bottom = Spacing.S)
+                    )
+                }
+                
+                WheelPicker(
+                    name = component.name,
+                    data = component.data,
+                    selectedData = when (component.name) {
+                        "day" -> paddingNum(currentDate.day)
+                        "month" -> paddingNum(currentDate.month)
+                        "year" -> currentDate.year.toString()
+                        "hour" -> paddingNum(currentDate.hour)
+                        "minute" -> paddingNum(currentDate.minute)
+                        "timeMode" -> currentDate.timeMode
+                        else -> ""
+                    },
+                    onChange = { name, value ->
+                        onPickerChange(
+                            name,
+                            value,
+                            currentDate,
+                            effectiveMinDate,
+                            effectiveMaxDate,
+                            onChange
+                        )
+                    }
+                )
+            }
+            
+            if (index < dateComponents.size - 1) {
+                Spacer(modifier = Modifier.width(Spacing.M))
+            }
+        }
+    }
+} 

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

@@ -0,0 +1,90 @@
+package vn.momo.kits.components.dateTimePicker
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+
+/**
+ * Example usage of DateTimePicker component
+ */
+@Composable
+fun DateTimePickerExample() {
+    // The current date and time
+    val now = remember { getCurrentDateTime() }
+    
+    // State to hold the selected date
+    var selectedDate by remember { mutableStateOf(now) }
+    
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(Spacing.M)
+    ) {
+        // Display the current selected date
+        Text(
+            text = "Selected Date: ${formatLocalDateTime(selectedDate)}",
+            style = Typography.paragraphDefault
+        )
+        
+        Spacer(modifier = Modifier.height(Spacing.L))
+        
+        // Date Picker (DD-MM-YYYY)
+        Text(
+            text = "Date Picker",
+            style = Typography.descriptionDefault
+        )
+        
+        Spacer(modifier = Modifier.height(Spacing.S))
+        
+        DateTimePicker(
+            selectedValue = selectedDate,
+            onChange = { selectedDate = it },
+            format = "DD-MM-YYYY"
+        )
+        
+        Spacer(modifier = Modifier.height(Spacing.L))
+        
+        // Date and Time Picker (DD-MM-YYYY HH:mm)
+        Text(
+            text = "Date and Time Picker",
+            style = Typography.descriptionDefault
+        )
+        
+        Spacer(modifier = Modifier.height(Spacing.S))
+        
+        DateTimePicker(
+            selectedValue = selectedDate,
+            onChange = { selectedDate = it },
+            format = "DD-MM-YYYY-HH-mm",
+            arrayLabelTime = listOf("Day", "Month", "Year", "Hour", "Minute")
+        )
+        
+        Spacer(modifier = Modifier.height(Spacing.L))
+        
+        // Time Picker (HH:mm)
+        Text(
+            text = "Time Picker",
+            style = Typography.descriptionDefault
+        )
+        
+        Spacer(modifier = Modifier.height(Spacing.S))
+        
+        DateTimePicker(
+            selectedValue = selectedDate,
+            onChange = { selectedDate = it },
+            format = "HH-mm",
+            arrayLabelTime = listOf("Hour", "Minute")
+        )
+    }
+} 

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

@@ -0,0 +1,15 @@
+package vn.momo.kits.components.dateTimePicker
+
+data class PickerData(
+    var day: Int,
+    var month: Int,
+    var year: Int,
+    var hour: Int = 0,
+    var minute: Int = 0,
+    var timeMode: String = ""
+)
+
+data class DateComponent(
+    val name: String,
+    val data: List<String>
+)

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
+}