@momo-kits/native-kits 0.122.0-beta.5 → 0.122.0-img.2

package/compose/src/androidMain/kotlin/vn/momo/kits/components/InputSearch.android.kt

@@ -0,0 +1,78 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.sp
+
+@Composable
+actual fun nativeInputView(
+    inputSearchProps: InputSearchProps,
+    textColor: Color,
+    onFocus: (Boolean) -> Unit,
+    modifier: Modifier,
+    manager: INativeInputViewFocusManger?,
+) {
+    val (textValue, _) = remember { inputSearchProps.text }
+    val finalModifier = remember(modifier, manager, onFocus) {
+        val requester = (manager as? INativeInputViewFocusManageAndroid)?.focusRequester
+        with(modifier) {
+            if (requester != null) {
+                focusRequester(requester)
+            }
+            onFocusChanged { onFocus(it.isFocused)}
+        }
+    }
+    BasicTextField(
+        value = textValue,
+        onValueChange = inputSearchProps.onChangeText,
+        enabled = !inputSearchProps.disabled,
+        singleLine = true,
+        textStyle = TextStyle(
+            color = textColor,
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = inputSearchProps.fontWeight.value
+        ),
+        keyboardOptions = inputSearchProps.keyboardOptions.copy(keyboardType = inputSearchProps.keyboardType),
+        keyboardActions = inputSearchProps.keyboardActions,
+        modifier = finalModifier,
+    )
+}
+
+interface INativeInputViewFocusManageAndroid {
+    val focusRequester: FocusRequester
+}
+
+@Composable
+actual fun rememberTextFieldFunction(): INativeInputViewFocusManger {
+    val focusManager = LocalFocusManager.current
+    val keyboardManager = LocalSoftwareKeyboardController.current
+    val composeFocusRequester = remember { FocusRequester() }
+
+    return remember(focusManager, keyboardManager) {
+        object : INativeInputViewFocusManger, INativeInputViewFocusManageAndroid {
+            override val focusRequester: FocusRequester
+                get() = composeFocusRequester
+
+            override fun requestFocus() {
+                runCatching {
+                    composeFocusRequester.requestFocus()
+                }
+            }
+
+            override fun clearFocus() {
+                keyboardManager?.hide()
+                focusManager.clearFocus()
+            }
+        }
+    }
+}

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/Platform.android.kt

@@ -3,26 +3,29 @@ package vn.momo.kits.platform
 import android.annotation.SuppressLint
 import android.content.res.Resources
 import android.graphics.BlurMaskFilter
-import android.os.Build
-import android.view.WindowInsets
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.DialogWindowProvider
-import androidx.core.view.WindowInsetsControllerCompat
 import androidx.activity.compose.BackHandler as AndroidBackHandler
 
 actual fun getPlatformName(): String = "Android"
 
+actual fun disableOverscroll() {}
+
 @Composable
 actual fun getScreenDimensions(): ScreenDimension {
     val config = LocalConfiguration.current
-    return ScreenDimension(
-        config.screenWidthDp, config.screenHeightDp
-    )
+    return remember(config) {
+        ScreenDimension(
+            config.screenWidthDp,
+            config.screenHeightDp,
+        )
+    }
 }
 
 actual fun NativePaint.setMaskFilter(blurRadius: Float) {
@@ -37,7 +40,7 @@ actual fun getStatusBarHeight(): Dp {
         "dimen",
         "android"
     )
-    return if(resourceId > 0) Resources.getSystem().getDimensionPixelSize(resourceId).dp else 0.dp
+    return if (resourceId > 0) Resources.getSystem().getDimensionPixelSize(resourceId).dp else 0.dp
 }
 
 @Composable

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

@@ -15,6 +15,7 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
 import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
+import vn.momo.kits.platform.disableOverscroll
 import vn.momo.kits.platform.getStatusBarHeight
 
 interface ComposeApi {
@@ -131,6 +132,7 @@ fun ApplicationContainer(
 
     val appStatusBarHeight = statusBarHeight ?: getStatusBarHeight()
 
+    disableOverscroll()
     CompositionLocalProvider(
         AppTheme provides appTheme,
         PlatformApi provides composeApi,

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

@@ -27,6 +27,7 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
 
 enum class ButtonType {
     PRIMARY,
@@ -236,14 +237,16 @@ fun Button(
     val customModifier = if (isFull) {
         modifier
             .fillMaxWidth()
-            .clip(RoundedCornerShape(size.value.radius)).clickable(
+            .clip(RoundedCornerShape(size.value.radius)).activeOpacityClickable(
+                activeOpacity = 0.5f,
                 enabled = type != ButtonType.DISABLED,
                 onClick = onClick
             )
 
     } else {
         modifier
-            .clip(RoundedCornerShape(size.value.radius)).clickable(
+            .clip(RoundedCornerShape(size.value.radius)).activeOpacityClickable(
+                activeOpacity = 0.5f,
                 enabled = type != ButtonType.DISABLED,
                 onClick = onClick
             )

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

@@ -18,6 +18,7 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
 
 @Composable
 fun CheckBox(
@@ -50,7 +51,8 @@ fun CheckBox(
             modifier = Modifier.size(20.dp)
                 .background(backgroundColor, RoundedCornerShape(Radius.XS))
                 .border(Spacing.XXS, borderColor, RoundedCornerShape(Radius.XS))
-                .clickable(
+                .activeOpacityClickable(
+                    activeOpacity = 0.8f,
                     onClick = { onCheckedChange(!checked) },
                     enabled = !disabled,
                 ),

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

@@ -3,6 +3,7 @@ package vn.momo.kits.components
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
@@ -22,18 +23,25 @@ fun Icon(
     color: Color? = AppTheme.current.colors.text.default,
     modifier: Modifier = Modifier,
 ) {
-    val icon = if (source.contains("https")) {
-        source
-    } else {
-        Icons[source] ?: ""
+    val icon = remember(source) {
+        if (source.contains("https")) {
+            source
+        } else {
+            Icons[source] ?: ""
+        }
     }
+
+    val tintColor = remember(color) {
+        color?.let(ColorFilter::tint)
+    }
+
     Box(modifier = modifier.size(size).semantics { contentDescription = "img|$icon" }) {
         AsyncImage(
             modifier = Modifier.matchParentSize(),
             model = icon,
             contentDescription = null,
             contentScale = ContentScale.Fit,
-            colorFilter = color?.let { ColorFilter.tint(it) },
+            colorFilter = tintColor,
         )
     }
 }

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

@@ -1,11 +1,11 @@
 package vn.momo.kits.components
 
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -13,10 +13,9 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.DefaultAlpha
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.layout.onSizeChanged
 import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 
@@ -25,7 +24,11 @@ data class Options(
     val contentScale: ContentScale = ContentScale.Crop,
     val colorFilter: ColorFilter? = null,
     val alpha: Float = DefaultAlpha,
-)
+) {
+    companion object {
+        internal val Default = Options()
+    }
+}
 
 enum class ImageState {
     Loading, Success, Error
@@ -76,28 +79,17 @@ private fun appendQueryParam(url: String, key: String, value: String): String {
 fun Image(
     source: Any,
     modifier: Modifier = Modifier,
-    options: Options? = null,
+    options: Options = Options.Default,
     loading: Boolean = true,
 ) {
-    var imageOptions = Options()
-    var imageState by remember { mutableStateOf(ImageState.Loading) }
     val density = LocalDensity.current
 
-    options?.let {
-        imageOptions = Options(
-            alignment = options.alignment,
-            contentScale = options.contentScale,
-            colorFilter = options.colorFilter,
-            alpha = DefaultAlpha,
-        )
-    }
-
     BoxWithConstraints(
         modifier = modifier
             .semantics { contentDescription = "img|$source" },
     ) {
-        val urlToLoad by remember(source, maxWidth, maxHeight) {
-            val sourceImage = if (source is String) {
+        val urlToLoad = remember(source, maxWidth, maxHeight, density) {
+            if (source is String) {
                 val host = getHostFromUrl(source)
                 if (host != null && supportedDomains.contains(host)) {
                     val widthPx = with(density) { maxWidth.roundToPx() }
@@ -111,16 +103,17 @@ fun Image(
             } else {
                 source
             }
-            mutableStateOf(sourceImage)
         }
+        var imageState by remember(urlToLoad) { mutableStateOf(ImageState.Loading) }
+
         AsyncImage(
             modifier = Modifier.matchParentSize(),
             model = urlToLoad,
             contentDescription = null,
-            contentScale = imageOptions.contentScale,
-            alignment = imageOptions.alignment,
-            colorFilter = imageOptions.colorFilter,
-            alpha = imageOptions.alpha,
+            contentScale = options.contentScale,
+            alignment = options.alignment,
+            colorFilter = options.colorFilter,
+            alpha = options.alpha,
             onLoading = { imageState = ImageState.Loading },
             onSuccess = { imageState = ImageState.Success },
             onError = { imageState = ImageState.Error },

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

@@ -26,6 +26,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
@@ -101,6 +102,7 @@ data class InputSearchProps(
     val iconModifier: Modifier = Modifier,
     val onClearPress: () -> Unit = {},
     val leftPosition: Dp? = null,
+    val nativeInputManager: INativeInputViewFocusManger? = null,
 )
 
 @Composable
@@ -233,4 +235,21 @@ fun InputSearch(
             )
         }
     }
-}
+}
+
+interface INativeInputViewFocusManger {
+    fun requestFocus()
+    fun clearFocus()
+}
+
+@Composable
+expect fun rememberTextFieldFunction(): INativeInputViewFocusManger
+
+@Composable
+expect fun nativeInputView(
+    inputSearchProps: InputSearchProps,
+    textColor: Color,
+    onFocus: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+    manager: INativeInputViewFocusManger? = null,
+)

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

@@ -19,6 +19,7 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
 
 @Composable
 fun Radio(
@@ -39,11 +40,9 @@ fun Radio(
     val borderWidth = if (selected) 6.dp else 2.dp
 
     Row(
-        modifier = modifier.clickable(
+        modifier = modifier.activeOpacityClickable(
             onClick = onChange,
             enabled = !disabled,
-            indication = null,
-            interactionSource = remember { MutableInteractionSource() }
         ),
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically,

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

@@ -27,14 +27,14 @@ fun Text(
     overflow: TextOverflow = TextOverflow.Clip,
     textDecoration: TextDecoration? = null,
     onTextLayout: ((TextLayoutResult) -> Unit)? = null,
-    fontFamily: String = "SFProText",
+    fontFamily: String? = null,
     minLines: Int = 1,
     letterSpacing: TextUnit = TextUnit.Unspecified,
     softWrap: Boolean = true,
     accessibilityId: String? = null
 ) {
     val fontSize = scaleSize(style.fontSize.value).sp
-    val font = getFontFamily(fontFamily, style.fontWeight)
+    val font = getFontFamily(fontFamily ?: AppTheme.current.font, style.fontWeight)
 
     androidx.compose.material3.Text(
         modifier = modifier.setAutomationId(accessibilityId ?: text, text),

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Colors.kt

@@ -146,5 +146,161 @@ object Colors {
     val red_09 = Color(0xFFFEe8EA)
     val red_10 = Color(0xFFFEF4F4)
     val red_11 = Color(0xFFFEF8F8)
-}
 
+    val colorList: List<Pair<String, Color>> = listOf(
+        "black_01" to black_01,
+        "black_02" to black_02,
+        "black_03" to black_03,
+        "black_04" to black_04,
+        "black_05" to black_05,
+        "black_06" to black_06,
+        "black_07" to black_07,
+        "black_08" to black_08,
+        "black_09" to black_09,
+        "black_10" to black_10,
+        "black_11" to black_11,
+        "black_12" to black_12,
+        "black_13" to black_13,
+        "black_14" to black_14,
+        "black_15" to black_15,
+        "black_16" to black_16,
+        "black_17" to black_17,
+        "black_18" to black_18,
+        "black_19" to black_19,
+        "black_20" to black_20,
+
+        "pink_01" to pink_01,
+        "pink_02" to pink_02,
+        "pink_03" to pink_03,
+        "pink_04" to pink_04,
+        "pink_05" to pink_05,
+        "pink_06" to pink_06,
+        "pink_07" to pink_07,
+        "pink_08" to pink_08,
+        "pink_09" to pink_09,
+        "pink_10" to pink_10,
+        "pink_11" to pink_11,
+        "pink_MoMo_Branding" to pink_MoMo_Branding,
+
+        "violet_01" to violet_01,
+        "violet_02" to violet_02,
+        "violet_03" to violet_03,
+        "violet_04" to violet_04,
+        "violet_05" to violet_05,
+        "violet_06" to violet_06,
+        "violet_07" to violet_07,
+        "violet_08" to violet_08,
+        "violet_09" to violet_09,
+        "violet_10" to violet_10,
+        "violet_11" to violet_11,
+        "violet_11_stroke" to violet_11_stroke,
+
+        "indigo_01" to indigo_01,
+        "indigo_02" to indigo_02,
+        "indigo_03" to indigo_03,
+        "indigo_04" to indigo_04,
+        "indigo_05" to indigo_05,
+        "indigo_06" to indigo_06,
+        "indigo_07" to indigo_07,
+        "indigo_08" to indigo_08,
+        "indigo_09" to indigo_09,
+        "indigo_10" to indigo_10,
+        "indigo_11" to indigo_11,
+
+        "blue_01" to blue_01,
+        "blue_02" to blue_02,
+        "blue_03" to blue_03,
+        "blue_04" to blue_04,
+        "blue_05" to blue_05,
+        "blue_06" to blue_06,
+        "blue_07" to blue_07,
+        "blue_08" to blue_08,
+        "blue_09" to blue_09,
+        "blue_10" to blue_10,
+        "blue_11" to blue_11,
+
+        "mint_01" to mint_01,
+        "mint_02" to mint_02,
+        "mint_03" to mint_03,
+        "mint_04" to mint_04,
+        "mint_05" to mint_05,
+        "mint_06" to mint_06,
+        "mint_07" to mint_07,
+        "mint_08" to mint_08,
+        "mint_09" to mint_09,
+        "mint_10" to mint_10,
+        "mint_11" to mint_11,
+
+        "green_01" to green_01,
+        "green_02" to green_02,
+        "green_03" to green_03,
+        "green_04" to green_04,
+        "green_05" to green_05,
+        "green_06" to green_06,
+        "green_07" to green_07,
+        "green_08" to green_08,
+        "green_09" to green_09,
+        "green_10" to green_10,
+        "green_11" to green_11,
+
+        "lime_01" to lime_01,
+        "lime_02" to lime_02,
+        "lime_03" to lime_03,
+        "lime_04" to lime_04,
+        "lime_05" to lime_05,
+        "lime_06" to lime_06,
+        "lime_07" to lime_07,
+        "lime_08" to lime_08,
+        "lime_09" to lime_09,
+        "lime_10" to lime_10,
+        "lime_11" to lime_11,
+
+        "yellow_01" to yellow_01,
+        "yellow_02" to yellow_02,
+        "yellow_03" to yellow_03,
+        "yellow_04" to yellow_04,
+        "yellow_05" to yellow_05,
+        "yellow_06" to yellow_06,
+        "yellow_07" to yellow_07,
+        "yellow_08" to yellow_08,
+        "yellow_09" to yellow_09,
+        "yellow_10" to yellow_10,
+        "yellow_11" to yellow_11,
+
+        "gold_01" to gold_01,
+        "gold_02" to gold_02,
+        "gold_03" to gold_03,
+        "gold_04" to gold_04,
+        "gold_05" to gold_05,
+        "gold_06" to gold_06,
+        "gold_07" to gold_07,
+        "gold_08" to gold_08,
+        "gold_09" to gold_09,
+        "gold_10" to gold_10,
+        "gold_11" to gold_11,
+
+        "orange_01" to orange_01,
+        "orange_02" to orange_02,
+        "orange_03" to orange_03,
+        "orange_04" to orange_04,
+        "orange_05" to orange_05,
+        "orange_06" to orange_06,
+        "orange_07" to orange_07,
+        "orange_08" to orange_08,
+        "orange_09" to orange_09,
+        "orange_10" to orange_10,
+        "orange_11" to orange_11,
+
+        "red_01" to red_01,
+        "red_02" to red_02,
+        "red_03" to red_03,
+        "red_04" to red_04,
+        "red_05" to red_05,
+        "red_06" to red_06,
+        "red_07" to red_07,
+        "red_08" to red_08,
+        "red_09" to red_09,
+        "red_10" to red_10,
+        "red_11" to red_11,
+    )
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt

@@ -2,7 +2,6 @@ package vn.momo.kits.const
 
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
 data class Background(
@@ -54,8 +53,11 @@ data class Theme(
     val colors: ColorScheme,
     val font: String,
     val assets: ThemeAssets
-)
-
+) {
+    fun isHeaderImage(): Boolean {
+        return assets.headerBackground != null && assets.headerBackground.isNotEmpty()
+    }
+}
 val defaultTheme = Theme(
     dark = false,
     colors = ColorScheme(
@@ -64,7 +66,7 @@ val defaultTheme = Theme(
         background = Background(
             default = Color(0xFFF2F2F6),
             surface = Colors.black_01,
-            tonal = Colors.pink_08,
+            tonal = Colors.pink_09,
             pressed = Color(0xFFDFDFE6),
             selected = Colors.pink_10,
             disable = Color(0xFFEBEBF2)
@@ -163,13 +165,17 @@ val darkTheme = Theme(
     ),
     font = "SFProText",
     assets = ThemeAssets(
-        headerBackground = "https://static.momocdn.net/app/img/app/img/header-background.png"
+        headerBackground = null
     )
 )
 
 
 val AppTheme = staticCompositionLocalOf { defaultTheme }
 
+val AppThemeController = staticCompositionLocalOf<(Theme) -> Unit> {
+    error("No AppTheme controller provided")
+}
+
 val AppStatusBar = staticCompositionLocalOf { 0.dp }
 
 val AppNavigationBar = staticCompositionLocalOf { 0.dp }