@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1-debug

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

@@ -0,0 +1,182 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+data class UploadImage(
+    val uri: String? = null,
+    val loading: Boolean = false,
+)
+
+@Composable
+fun Uploader(
+    images: List<UploadImage>,
+    modifier: Modifier = Modifier,
+    numberOfImages: Int = 1,
+    disabled: Boolean = false,
+    width: Dp = 64.dp,
+    height: Dp = 64.dp,
+    onAdd: () -> Unit = {},
+    onCancel: ((image: UploadImage, index: Int) -> Unit)? = null,
+    onPressImage: (image: UploadImage, index: Int) -> Unit = { _, _ -> },
+) {
+    val shouldShowPicker = remember(images.size, numberOfImages) {
+        images.size < numberOfImages
+    }
+
+    Row(
+        modifier = modifier
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+        horizontalArrangement = Arrangement.spacedBy(Spacing.S),
+        verticalAlignment = Alignment.Top,
+    ) {
+        if (shouldShowPicker) {
+            UploaderPickerCell(
+                disabled = disabled,
+                width = width,
+                height = height,
+                onAdd = onAdd,
+            )
+        }
+
+        Row(
+            modifier = Modifier.horizontalScroll(rememberScrollState()),
+            horizontalArrangement = Arrangement.spacedBy(Spacing.S),
+        ) {
+            images.forEachIndexed { index, image ->
+                UploaderImageItem(
+                    image = image,
+                    width = width,
+                    height = height,
+                    index = index,
+                    onCancel = onCancel,
+                    onPressImage = { onPressImage(image, index) },
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun UploaderPickerCell(
+    disabled: Boolean,
+    width: Dp,
+    height: Dp,
+    onAdd: () -> Unit,
+) {
+    val theme = AppTheme.current
+    val mainColor = if (disabled) theme.colors.text.disable else theme.colors.text.hint
+    val borderColor = if (disabled) theme.colors.border.disable else theme.colors.border.default
+
+    Box(
+        modifier = Modifier
+            .size(width = width, height = height)
+            .clip(RoundedCornerShape(Radius.XS))
+            .dashedBorder(color = borderColor, radius = Radius.XS)
+            .activeOpacityClickable(enabled = !disabled, onClick = onAdd),
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(Spacing.XXS),
+        ) {
+            Icon(
+                source = "16_navigation_plus",
+                color = mainColor,
+                size = 16.dp,
+            )
+            Text(
+                text = "Thêm hình",
+                style = Typography.descriptionXsRegular,
+                color = mainColor,
+            )
+        }
+    }
+}
+
+@Composable
+private fun UploaderImageItem(
+    image: UploadImage,
+    width: Dp,
+    height: Dp,
+    index: Int,
+    onCancel: ((image: UploadImage, index: Int) -> Unit)?,
+    onPressImage: () -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .size(width = width, height = height)
+            .activeOpacityClickable(onClick = onPressImage),
+    ) {
+        Image(
+            source = image.uri ?: "",
+            modifier = Modifier
+                .fillMaxSize()
+                .clip(RoundedCornerShape(Radius.XS)),
+        )
+
+        if (onCancel != null && !image.loading) {
+            Icon(
+                source = "navigation_close_circle_full",
+                size = 16.dp,
+                color = null,
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(top = Spacing.XXS, end = Spacing.XXS)
+                    .activeOpacityClickable { onCancel(image, index) },
+            )
+        }
+
+        if (image.loading) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .clip(RoundedCornerShape(Radius.XS))
+                    .background(Color(0x66FFFFFF)),
+                contentAlignment = Alignment.Center,
+            ) {
+                Skeleton()
+            }
+        }
+    }
+}
+
+private fun Modifier.dashedBorder(
+    color: Color,
+    radius: Dp,
+    strokeWidth: Dp = 1.dp,
+    dashWidth: Float = 10f,
+    dashGap: Float = 6f,
+): Modifier = this.drawBehind {
+    val strokePx = strokeWidth.toPx()
+    val pathEffect = PathEffect.dashPathEffect(floatArrayOf(dashWidth, dashGap), 0f)
+    val cornerRadiusPx = radius.toPx()
+    drawRoundRect(
+        color = color,
+        style = Stroke(
+            width = strokePx,
+            pathEffect = pathEffect,
+        ),
+        cornerRadius = CornerRadius(cornerRadiusPx, cornerRadiusPx),
+    )
+}

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

@@ -0,0 +1,193 @@
+package vn.momo.kits.components.datetimepicker
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+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.application.IsShowBaseLineDebug
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+
+private val datePickerHeight = 210.dp
+private val datePickerWithLabelsHeight = 238.dp
+
+@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 effectiveSelectedValue = remember(selectedValue) {
+        selectedValue ?: getCurrentDateTime()
+    }
+
+    val effectiveMinDate = remember(minDate) {
+        minDate ?: createRelativeDate(-10)
+    }
+
+    val effectiveMaxDate = remember(maxDate) {
+        maxDate ?: createRelativeDate(10)
+    }
+
+    val needCheckRange = remember(minDate, maxDate) {
+        minDate == null && maxDate == null
+    }
+
+    val initialValue = remember(effectiveMinDate, effectiveMaxDate, effectiveSelectedValue) {
+        when {
+            !needCheckRange -> effectiveSelectedValue
+            effectiveSelectedValue < effectiveMinDate -> effectiveMinDate
+            effectiveSelectedValue > effectiveMaxDate -> effectiveMaxDate
+            else -> effectiveSelectedValue
+        }
+    }
+
+    var currentDate by remember(initialValue) {
+        mutableStateOf(
+            PickerData(
+                day = initialValue.day,
+                month = initialValue.month.number,
+                year = initialValue.year,
+                hour = initialValue.hour,
+                minute = initialValue.minute
+            )
+        )
+    }
+
+    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.month.number
+                    )
+                    effectiveMinDate.year -> month.coerceIn(
+                        effectiveMinDate.month.number,
+                        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.month.number ->
+                        day.coerceIn(1, effectiveMaxDate.day)
+
+                    year == effectiveMinDate.year && month == effectiveMinDate.month.number ->
+                        day.coerceIn(effectiveMinDate.day, 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
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(pickerHeight)
+            .background(AppTheme.current.colors.background.surface)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .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.actionSBold,
+                        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 = onWheelChangeValue,
+                )
+            }
+
+            if (index < dateComponents.size - 1) {
+                Spacer(modifier = Modifier.width(Spacing.M))
+            }
+        }
+    }
+} 

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

@@ -0,0 +1,29 @@
+package vn.momo.kits.components.datetimepicker
+
+import kotlinx.datetime.LocalDateTime
+
+data class PickerData(
+    var day: Int,
+    var month: Int,
+    var year: Int,
+    var hour: Int = 0,
+    var minute: Int = 0,
+    var timeMode: String = ""
+) {
+    fun toLocalDateTime(): LocalDateTime {
+        return LocalDateTime(
+            year = year,
+            month = month,
+            day = day,
+            hour = hour,
+            minute = minute,
+            second = 0,
+            nanosecond = 0
+        )
+    }
+}
+
+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,234 @@
+package vn.momo.kits.components.datetimepicker
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import kotlinx.datetime.*
+import kotlinx.datetime.number
+import kotlin.time.Clock
+import kotlin.time.ExperimentalTime
+
+/**
+ * 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.day
+            )
+        } ${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
+
+        "dd-MM-yyyy" -> "${paddingNum(dateTime.day)}-${paddingNum(dateTime.month.number)}-${dateTime.year}"
+        "HH:mm" -> "${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
+        else -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${paddingNum(dateTime.day)} ${
+            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.day
+    }
+
+    if (year == maxDate.year && month == maxDate.month.number) {
+        endDay = maxDate.day
+    }
+
+    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
+ */
+@OptIn(ExperimentalTime::class)
+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.month.number,
+        adjustedDate.day,
+        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
+}