@momo-kits/native-kits 0.160.7 → 0.160.8-debug

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

@@ -0,0 +1,740 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.interaction.FocusInteraction
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.ime
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.produceState
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.layout.Measurable
+import androidx.compose.ui.layout.MeasurePolicy
+import androidx.compose.ui.layout.MeasureResult
+import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.layout.Placeable
+import androidx.compose.ui.layout.layoutId
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.flow.mapNotNull
+import vn.momo.kits.components.Icon
+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.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.kitsAutomationId
+import vn.momo.kits.modifier.noFeedbackClickable
+import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.modifier.shadow
+import vn.momo.kits.utils.getAppStatusBarHeight
+import kotlin.math.max
+
+@Composable
+fun LiteScreen(
+    scrollable: Boolean = true,
+    scrollState: ScrollState? = null,
+    headerType: HeaderType = HeaderType.DEFAULT,
+    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
+    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
+    backgroundColor: Color = AppTheme.current.colors.background.default,
+    /*  Begin of header props  */
+    title: String? = null,
+    inputSearchProps: LiteInputSearchProps? = null,
+    goBack: (() -> Unit)? = null,
+    headerRight: @Composable() (() -> Unit)? = null,
+    useAnimationSearch: Boolean = true,
+    titlePosition: TitlePosition = TitlePosition.LEFT,
+    headerRightData: HeaderRightData? = null,
+    headerTintColor: Color? = null,
+    headerBackgroundColor: Color? = null,
+    headerSpaceBetween: Dp? = null,
+    /*  End of header props  */
+
+    screenContent: @Composable () -> Unit,
+) {
+    val content by rememberUpdatedState(screenContent)
+
+    val finalScrollState = scrollState ?: rememberScrollState()
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(color = backgroundColor)
+            .hideKeyboardOnTap(),
+        verticalArrangement = verticalArrangement,
+        horizontalAlignment = horizontalAlignment,
+    ) {
+        val contentModifier = remember(scrollable, finalScrollState) {
+            var res = Modifier.weight(1f)
+            if (scrollable) {
+                res = res.verticalScroll(finalScrollState)
+            }
+            res
+        }
+
+        LiteScreenHeader(
+            scrollState = finalScrollState,
+            title = title,
+            headerRight = headerRight,
+            headerType = headerType,
+            onGoBack = goBack,
+            inputSearchProps = inputSearchProps,
+            titlePosition = titlePosition,
+            useAnimationSearch = useAnimationSearch,
+            headerRightData = headerRightData,
+            tintColor = headerTintColor,
+            headerBackgroundColor = headerBackgroundColor,
+            headerSpaceBetween = headerSpaceBetween,
+        )
+
+        Box(
+            modifier = contentModifier,
+            contentAlignment = Alignment.TopCenter,
+        ) {
+            content()
+        }
+    }
+}
+
+private object HeaderId {
+    private const val PACKAGE_NAME = "vn.momo.compose.kits"
+    const val BACK_ID = "${PACKAGE_NAME}.back"
+    const val HEADER_RIGHT_ID = "${PACKAGE_NAME}.headerRight"
+    const val INPUT_SEARCH_ID = "${PACKAGE_NAME}.inputSearch"
+    const val TITLE_ID = "${PACKAGE_NAME}.title"
+
+    val EXTENDED_HEADER_HEIGHT = 154.dp
+}
+
+@Composable
+private fun LiteScreenHeader(
+    scrollState: ScrollState?,
+    title: String? = null,
+    tintColor: Color? = null,
+    headerRightData: HeaderRightData? = null,
+    headerType: HeaderType = HeaderType.DEFAULT,
+    titlePosition: TitlePosition = TitlePosition.LEFT,
+    useAnimationSearch: Boolean = true,
+    onGoBack: (() -> Unit)? = null,
+    headerBackgroundColor: Color? = null,
+    headerSpaceBetween: Dp? = null,
+    inputSearchProps: LiteInputSearchProps? = null,
+    headerRight: @Composable (() -> Unit)? = null,
+) {
+    val statusBarHeight = getAppStatusBarHeight()
+    if (headerType == HeaderType.NONE) {
+        Box(modifier = Modifier.height(statusBarHeight))
+        return
+    }
+    val theme = AppTheme.current
+    val density = LocalDensity.current
+
+    val isHeaderExtend = remember(headerType) {
+        headerType == HeaderType.EXTENDED
+    }
+    val backgroundHeight = remember(isHeaderExtend, statusBarHeight) {
+        if (!isHeaderExtend) statusBarHeight + HEADER_HEIGHT.dp
+        else HeaderId.EXTENDED_HEADER_HEIGHT
+    }
+    val listGradientColors = remember {
+        listOf(
+            Color(0xFFFDCADE),
+            Color(0x00FDCADE),
+        )
+    }
+
+    val headerColor = remember(tintColor, theme) {
+        if (tintColor == Colors.black_01) HeaderColor(
+            tintIconColor = tintColor,
+            backgroundButton = Colors.black_20.copy(alpha = 0.6f),
+            borderColor = Colors.black_01.copy(alpha = 0.2f)
+        )
+        else HeaderColor(
+            tintIconColor = tintColor ?: theme.colors.text.default,
+            backgroundButton = Colors.black_01.copy(alpha = 0.6f),
+            borderColor = Colors.black_20.copy(alpha = 0.2f)
+        )
+    }
+
+    val scrollPercentage = produceState(
+        initialValue = 0f,
+        key1 = useAnimationSearch,
+        key2 = scrollState,
+        key3 = backgroundHeight,
+    ) {
+        if (!useAnimationSearch) return@produceState
+        scrollState ?: return@produceState
+        val rangePx = with(density) { backgroundHeight.toPx() }
+        snapshotFlow { scrollState.value }.collectLatest {
+            value = (it / rangePx).coerceIn(0f, 1f)
+        }
+    }
+
+    val titleStyle = remember {
+        Typography.actionSBold.copy(
+            fontSize = 15.sp,
+            lineHeight = 22.sp,
+        )
+    }
+
+    val titleModifier = remember {
+        Modifier
+            .kitsAutomationId("title_navigation_header")
+            .layoutId(HeaderId.TITLE_ID)
+            .graphicsLayer {
+                alpha = if (isHeaderExtend && inputSearchProps != null && useAnimationSearch)
+                    (1 - scrollPercentage.value * 2).coerceIn(0f, 1f)
+                else 1f
+            }
+    }
+
+    val policy = remember(
+        useAnimationSearch,
+        isHeaderExtend,
+        statusBarHeight,
+        titlePosition,
+        scrollPercentage,
+        headerSpaceBetween,
+    ) {
+        LiteScreenHeaderPolicy(
+            useAnimationSearch = useAnimationSearch,
+            isHeaderExtend = isHeaderExtend,
+            statusBarHeight = statusBarHeight,
+            titlePosition = titlePosition,
+            scrollPercentage = scrollPercentage,
+            headerSpaceBetween = headerSpaceBetween,
+        )
+    }
+
+    Layout(
+        modifier = Modifier
+            .animateContentSize()
+            .drawBehind {
+                val headerHeight = max(
+                    HeaderId.EXTENDED_HEADER_HEIGHT.toPx(),
+                    size.height,
+                )
+                headerBackgroundColor?.let {
+                    drawRect(color = it)
+                } ?: run {
+                    drawRect(color = Colors.black_01)
+                    drawRect(
+                        brush = Brush.linearGradient(
+                            colors = listGradientColors,
+                            start = Offset.Zero,
+                            end = Offset(
+                                x = 0f,
+                                y = headerHeight * (1 - scrollPercentage.value),
+                            ),
+                        )
+                    )
+                }
+            },
+        content = {
+            if (onGoBack != null) {
+                Box(
+                    modifier = Modifier
+                        .size(28.dp)
+                        .layoutId(HeaderId.BACK_ID)
+                        .clip(CircleShape)
+                        .conditional(inputSearchProps?.customBackIcon == null) {
+                            this.border(
+                                width = 0.2.dp,
+                                color = headerColor.borderColor,
+                                shape = CircleShape,
+                            )
+                                .background(color = headerColor.backgroundButton)
+                        }
+                        .noFeedbackClickable(onClick = onGoBack)
+                        .setAutomationId("btn_navigation_back")
+                        .padding(Spacing.XS),
+                ) {
+                    inputSearchProps?.customBackIcon?.invoke() ?: Icon(
+                        source = "arrow-back",
+                        color = headerColor.tintIconColor,
+                        size = 20.dp,
+                    )
+                }
+            }
+
+            Box(
+                modifier = Modifier
+                    .layoutId(HeaderId.HEADER_RIGHT_ID)
+            ) {
+                if (headerRight != null) {
+                    headerRight()
+                } else {
+                    HeaderRight(
+                        headerRight = headerRightData,
+                        tintColor = tintColor,
+                    )
+                }
+            }
+
+            if (inputSearchProps != null) {
+                LiteInputSearch(
+                    modifier = Modifier.layoutId(HeaderId.INPUT_SEARCH_ID),
+                    inputSearchProps = inputSearchProps,
+                )
+            }
+            if (title != null && (inputSearchProps == null || isHeaderExtend)) {
+                Text(
+                    text = title,
+                    color = headerColor.tintIconColor,
+                    style = titleStyle,
+                    modifier = titleModifier,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
+            }
+        },
+        measurePolicy = policy,
+    )
+}
+
+private class LiteScreenHeaderPolicy(
+    private val useAnimationSearch: Boolean,
+    private val isHeaderExtend: Boolean,
+    private val statusBarHeight: Dp,
+    private val scrollPercentage: State<Float>,
+    private val titlePosition: TitlePosition,
+    private val headerSpaceBetween: Dp? = null,
+) : MeasurePolicy {
+
+    override fun MeasureScope.measure(
+        measurables: List<Measurable>,
+        constraints: Constraints
+    ): MeasureResult {
+        val spacing12 = Spacing.M.roundToPx()
+        val spaceBetween = headerSpaceBetween?.roundToPx() ?: spacing12
+        val statusBarPx = statusBarHeight.roundToPx()
+        val scrollPercent = scrollPercentage.value
+
+        val realConstraints = constraints.copy(
+            minWidth = 0,
+            minHeight = 0,
+            maxWidth = (constraints.maxWidth - spacing12 * 2)
+                .coerceAtLeast(0),
+        )
+        val backIconPlaceable =
+            measurables.find { it.layoutId == HeaderId.BACK_ID }?.measure(realConstraints)
+        val headerRightPlaceable =
+            measurables.find { it.layoutId == HeaderId.HEADER_RIGHT_ID }?.measure(
+                realConstraints.copy(
+                    maxWidth = realConstraints.maxWidth / 2,
+                )
+            )
+        val inputSearchConstraints = if (isHeaderExtend) {
+            val minWidth =
+                if (useAnimationSearch) realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
+                else realConstraints.maxWidth
+            realConstraints.copy(
+                maxWidth = (realConstraints.maxWidth * (1 - scrollPercent)).toInt()
+                    .coerceAtLeast(minWidth)
+            )
+        } else {
+            var spaceConsumed = 0
+            if (backIconPlaceable.safeWidth != 0) spaceConsumed += backIconPlaceable.safeWidth + spaceBetween
+            if (headerRightPlaceable.safeWidth != 0) spaceConsumed += headerRightPlaceable.safeWidth + spaceBetween
+            realConstraints.copy(
+                maxWidth = realConstraints.maxWidth - spaceConsumed
+            )
+        }
+        val inputSearchPlaceable = measurables.find { it.layoutId == HeaderId.INPUT_SEARCH_ID }
+            ?.measure(inputSearchConstraints)
+        val titlePlaceable = measurables.find { it.layoutId == HeaderId.TITLE_ID }?.measure(
+            constraints = realConstraints.copy(
+                maxWidth = realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
+            )
+        )
+
+        val firstRowMaxHeight = buildList {
+            add(backIconPlaceable.safeHeight)
+            add(headerRightPlaceable.safeHeight)
+            if (!isHeaderExtend) {
+                add(inputSearchPlaceable.safeHeight)
+            }
+            if (isHeaderExtend) {
+                add(titlePlaceable.safeHeight)
+            }
+        }.max()
+
+        var defaultHeight = statusBarPx + spacing12 + firstRowMaxHeight + spacing12
+        if (isHeaderExtend) {
+            defaultHeight += inputSearchPlaceable.safeHeight + spacing12
+        }
+        val height = when {
+            !useAnimationSearch && !isHeaderExtend -> defaultHeight
+            else -> (defaultHeight - scrollPercent * (defaultHeight - statusBarPx - HEADER_HEIGHT.dp.roundToPx())).toInt()
+        }
+
+        return layout(
+            width = constraints.maxWidth,
+            height = height,
+        ) {
+            val startX = spacing12
+            val startY = statusBarPx + spacing12
+            var curX = startX
+            var curY = startY
+
+            if (backIconPlaceable != null) {
+                backIconPlaceable.place(
+                    x = startX,
+                    y = startY + backIconPlaceable.verticalCenterOffset(firstRowMaxHeight),
+                )
+                curX += backIconPlaceable.safeWidth + spaceBetween
+            }
+
+            headerRightPlaceable?.place(
+                x = constraints.maxWidth - spacing12 - headerRightPlaceable.safeWidth,
+                y = startY + headerRightPlaceable.verticalCenterOffset(firstRowMaxHeight),
+            )
+
+            val titleOffset = IntOffset(
+                x = if (titlePosition == TitlePosition.LEFT) curX
+                else titlePlaceable.horizontalCenterOffset(
+                    space = constraints.maxWidth,
+                    layoutDirection = layoutDirection,
+                ),
+                y = startY + titlePlaceable.verticalCenterOffset(firstRowMaxHeight),
+            )
+
+            titlePlaceable?.place(titleOffset)
+
+            if (backIconPlaceable != null || headerRightPlaceable != null || titlePlaceable != null) {
+                curY += firstRowMaxHeight + spacing12
+            }
+
+            val inputSearchOffset = if (isHeaderExtend) {
+                IntOffset(
+                    x = startX + ((backIconPlaceable.safeWidth + spaceBetween) * (scrollPercent * 2f).coerceIn(
+                        0f, 1f
+                    )).toInt(),
+                    y = (curY * (1 - scrollPercent)).toInt().coerceAtLeast(
+                        startY + inputSearchPlaceable.verticalCenterOffset(firstRowMaxHeight)
+                    ),
+                )
+            } else {
+                IntOffset(
+                    x = curX,
+                    y = startY + inputSearchPlaceable.verticalCenterOffset(firstRowMaxHeight),
+                )
+            }
+
+            inputSearchPlaceable?.place(inputSearchOffset)
+        }
+    }
+
+    private val Placeable?.safeHeight
+        get() = this?.height ?: 0
+    private val Placeable?.safeWidth
+        get() = this?.width ?: 0
+
+    private fun Placeable?.verticalCenterOffset(space: Int): Int {
+        if (this == null) return 0
+        return Alignment.CenterVertically.align(safeHeight, space)
+    }
+
+    private fun Placeable?.horizontalCenterOffset(
+        space: Int,
+        layoutDirection: LayoutDirection
+    ): Int {
+        if (this == null) return 0
+        return Alignment.CenterHorizontally.align(safeWidth, space, layoutDirection)
+    }
+}
+
+private val EMPTY_FUNC = {}
+
+@Stable
+data class LiteInputSearchProps(
+    val textFieldState: MutableState<String>,
+    val onValueChange: (String) -> Unit,
+    val onClear: () -> Unit = EMPTY_FUNC,
+    val clearCondition: (() -> Boolean)? = null,
+    val modifier: Modifier = Modifier,
+    val onFocused: (() -> Unit) = EMPTY_FUNC,
+    val keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    val keyboardActions: KeyboardActions = KeyboardActions.Default,
+    val onKeyboardAction: (() -> Unit) = EMPTY_FUNC,
+
+    val btnText: String? = null,
+    val isShowBtnText: Boolean = !btnText.isNullOrEmpty(),
+    val onPressBtnText: (() -> Unit) = EMPTY_FUNC,
+
+    val disabled: Boolean = false,
+
+    val placeHolder: String? = null,
+
+    val customBackIcon: @Composable (() -> Unit)? = null,
+    val customSearchIcon: @Composable (() -> Unit)? = null,
+    val customPlaceHolder: @Composable (() -> Unit)? = null,
+    val customTextStyle: TextStyle? = null,
+    val customIconClear: @Composable (() -> Unit)? = null,
+    val iconRightTextField: @Composable ((Modifier) -> Unit)? = null,
+)
+
+@Composable
+private fun LiteInputSearch(
+    modifier: Modifier = Modifier,
+    inputSearchProps: LiteInputSearchProps? = null,
+) {
+    inputSearchProps ?: return
+    val theme = AppTheme.current
+
+    val isFocused = remember { mutableStateOf(false) }
+    val interactionSource = remember { MutableInteractionSource() }
+    val textState by remember { inputSearchProps.textFieldState }
+
+    val isShowBtnText by remember(inputSearchProps.isShowBtnText, inputSearchProps.btnText) {
+        derivedStateOf {
+            inputSearchProps.isShowBtnText && !inputSearchProps.btnText.isNullOrEmpty()
+        }
+    }
+    val inputFieldStyle = remember(theme) {
+        Typography.bodyDefaultRegular.copy(
+            color = theme.colors.text.default,
+        )
+    }
+
+    LaunchedEffect(inputSearchProps.onFocused) {
+        interactionSource.interactions.mapNotNull { it as? FocusInteraction }.collectLatest {
+            val isFocus = it is FocusInteraction.Focus
+            isFocused.value = isFocus
+            if (isFocus) inputSearchProps.onFocused()
+        }
+    }
+
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        val textFieldModifier = remember(inputSearchProps.modifier) {
+            inputSearchProps.modifier
+                .weight(1f)
+        }
+        BasicTextField(
+            value = textState,
+            onValueChange = inputSearchProps.onValueChange,
+            enabled = !inputSearchProps.disabled,
+            keyboardOptions = inputSearchProps.keyboardOptions,
+            keyboardActions = inputSearchProps.keyboardActions,
+            modifier = textFieldModifier,
+            textStyle = inputSearchProps.customTextStyle ?: inputFieldStyle,
+            singleLine = true,
+            interactionSource = interactionSource,
+            decorationBox = { innerTextField ->
+                val isShowClear by remember(inputSearchProps.clearCondition, isFocused.value) {
+                    derivedStateOf {
+                        inputSearchProps.clearCondition?.invoke() == true || (isFocused.value && textState.isNotEmpty())
+                    }
+                }
+                val placeHolder by produceState<String?>(null, inputSearchProps.placeHolder) {
+                    if (inputSearchProps.placeHolder.isNullOrEmpty()) return@produceState
+                    snapshotFlow { textState }.collectLatest {
+                        value = if (it.isEmpty()) inputSearchProps.placeHolder else null
+                    }
+                }
+                val iconRightModifier = remember {
+                    Modifier
+                        .padding(start = Spacing.L)
+                        .drawWithContent {
+                            val offsetX = -Spacing.S.toPx()
+                            drawLine(
+                                start = Offset(
+                                    x = offsetX,
+                                    y = 0f,
+                                ),
+                                end = Offset(
+                                    x = offsetX,
+                                    y = size.height,
+                                ),
+                                color = theme.colors.primary,
+                                strokeWidth = 1.dp.toPx(),
+                            )
+                            drawContent()
+                        }
+                }
+
+                Row(
+                    modifier = Modifier
+                        .padding(
+                            horizontal = Spacing.M,
+                            vertical = Spacing.S,
+                        ),
+                    horizontalArrangement = Arrangement.Start,
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    inputSearchProps.customSearchIcon?.invoke() ?: Icon(
+                        source = "navigation_search",
+                        modifier = Modifier.padding(end = Spacing.XS),
+                        size = 24.dp,
+                        color = theme.colors.text.hint
+                    )
+                    Box(
+                        modifier = Modifier.weight(1f),
+                        contentAlignment = Alignment.CenterStart,
+                    ) {
+                        if (!placeHolder.isNullOrEmpty()) {
+                            inputSearchProps.customPlaceHolder?.invoke() ?: Text(
+                                text = placeHolder ?: "",
+                                style = inputSearchProps.customTextStyle ?: Typography.bodyDefaultRegular,
+                                maxLines = 1,
+                                color = theme.colors.text.hint,
+                                overflow = TextOverflow.Ellipsis
+                            )
+                        }
+                        innerTextField()
+                    }
+
+                    if (isShowClear) {
+                        inputSearchProps.customIconClear?.invoke() ?: Icon(
+                            source = "24_navigation_close_circle_full",
+                            size = 16.dp,
+                            color = theme.colors.text.hint,
+                            modifier = Modifier.padding(start = Spacing.XS)
+                                .noFeedbackClickable(onClick = inputSearchProps.onClear),
+                        )
+                    }
+
+                    inputSearchProps.iconRightTextField?.invoke(iconRightModifier)
+                }
+            }
+        )
+
+        if (isShowBtnText) {
+            Text(
+                text = inputSearchProps.btnText ?: "",
+                style = Typography.actionDefaultBold,
+                color = theme.colors.text.default,
+                modifier = Modifier.padding(start = Spacing.L)
+                    .noFeedbackClickable(onClick = inputSearchProps.onPressBtnText)
+            )
+        }
+    }
+}
+
+@Composable
+private fun footerOffset(
+    useAvoidKeyboard: Boolean = true,
+): State<IntOffset> {
+    if (!useAvoidKeyboard) return remember { mutableStateOf(IntOffset.Zero) }
+    val density = LocalDensity.current
+    val navPaddingValue = WindowInsets.navigationBars.asPaddingValues()
+    val keyboardSize = keyboardSizeState()
+
+    return produceState(IntOffset.Zero, density, navPaddingValue) {
+        val navSystemOffset = with(density) { navPaddingValue.calculateBottomPadding().roundToPx() }
+        snapshotFlow { keyboardSize.value }.collectLatest {
+            value = if (it == 0.dp) IntOffset.Zero
+            else IntOffset(
+                x = 0, y = with(density) {
+                    navSystemOffset - it.roundToPx()
+                })
+        }
+    }
+}
+
+@Composable
+fun keyboardSizeState(): State<Dp> {
+    val bottom = WindowInsets.ime.asPaddingValues()
+    return rememberUpdatedState(bottom.calculateBottomPadding())
+}
+
+@Composable
+private fun Footer(
+    useAvoidKeyboard: Boolean,
+    footerContent: (@Composable () -> Unit)?,
+) {
+    footerContent ?: return
+    val theme = AppTheme.current
+    val navPaddingValue = WindowInsets.navigationBars.asPaddingValues()
+    val offsetMove = footerOffset(useAvoidKeyboard)
+
+    Box(
+        modifier = Modifier.padding(navPaddingValue).fillMaxWidth().offset {
+            offsetMove.value
+        }.shadow(
+            color = Colors.black_20.copy(alpha = 0.05f),
+            blurRadius = 24f,
+            offsetX = 0.dp,
+            offsetY = (-4).dp
+        ).background(theme.colors.background.surface).padding(
+            start = Spacing.M,
+            top = Spacing.M,
+            end = Spacing.M,
+        )
+    ) {
+        footerContent()
+    }
+}
+
+fun Modifier.hideKeyboardOnTap() = composed {
+    val focusManager = LocalFocusManager.current
+    val keyboardManager = LocalSoftwareKeyboardController.current
+
+    pointerInput(Unit) {
+        detectTapGestures {
+            keyboardManager?.hide()
+            focusManager.clearFocus()
+        }
+    }
+}