diff --git a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/TextField.kt b/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/TextField.kt index 877d3d7..587a499 100644 --- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/TextField.kt +++ b/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/TextField.kt @@ -51,6 +51,8 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip +import androidx.compose.ui.focus.FocusRequester +import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.SolidColor @@ -72,6 +74,8 @@ import com.highcapable.flexiui.utils.status data class TextFieldColors( val cursorColor: Color, val selectionColors: TextSelectionColors, + val decorInactiveTint: Color, + val decorActiveTint: Color, val borderInactiveColor: Color, val borderActiveColor: Color, val backgroundColor: Color @@ -105,6 +109,7 @@ fun TextField( minLines: Int = 1, visualTransformation: VisualTransformation = VisualTransformation.None, onTextLayout: (TextLayoutResult) -> Unit = {}, + focusRequester: FocusRequester = remember { FocusRequester() }, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, header: @Composable (() -> Unit)? = null, placeholder: @Composable () -> Unit = {}, @@ -113,6 +118,10 @@ fun TextField( ) { val focused by interactionSource.collectIsFocusedAsState() val hovered by interactionSource.collectIsHoveredAsState() + val animatedDecorTint by animateColorAsState(when { + focused || hovered -> colors.decorActiveTint + else -> colors.decorInactiveTint + }) val animatedBorderColor by animateColorAsState(when { focused || hovered -> style.borderActive.solidColor else -> style.borderInactive.solidColor @@ -136,13 +145,17 @@ fun TextField( ), verticalAlignment = Alignment.CenterVertically ) { - header?.also { Box(modifier = Modifier.textFieldPadding(style, fitStart = true)) { it() } } + header?.also { + Box(modifier = Modifier.textFieldPadding(style, fitStart = true)) { + DecorationBoxStyle(animatedDecorTint) { it() } + } + } Box(modifier = Modifier.weight(1f, fill = false).textFieldPadding(style)) { TextFieldStyle(colors) { BasicTextField( value = value, onValueChange = onValueChange, - modifier = modifier, + modifier = Modifier.focusRequester(focusRequester).then(modifier), enabled = enabled, readOnly = readOnly, textStyle = textStyle, @@ -165,7 +178,11 @@ fun TextField( ) } } - footer?.also { Box(modifier = Modifier.textFieldPadding(style, fitEnd = true)) { it() } } + footer?.also { + Box(modifier = Modifier.textFieldPadding(style, fitEnd = true)) { + DecorationBoxStyle(animatedDecorTint) { it() } + } + } } } @@ -191,6 +208,13 @@ private fun TextFieldStyle(colors: TextFieldColors, content: @Composable () -> U } } +@Composable +private fun DecorationBoxStyle(decorTint: Color, content: @Composable () -> Unit) { + CompositionLocalProvider(LocalIconTint provides decorTint) { + content() + } +} + private fun Modifier.textField( colors: TextFieldColors, style: TextFieldStyle, @@ -245,6 +269,8 @@ private fun defaultTextFieldColors() = TextFieldColors( handleColor = LocalColors.current.themePrimary, backgroundColor = LocalColors.current.themeSecondary ), + decorInactiveTint = LocalColors.current.themeSecondary, + decorActiveTint = LocalColors.current.themePrimary, borderInactiveColor = LocalColors.current.themeSecondary, borderActiveColor = LocalColors.current.themePrimary, backgroundColor = Color.Transparent