11package top.yukonga.miuix.kmp.basic
22
33import androidx.compose.animation.AnimatedVisibility
4+ import androidx.compose.animation.fadeIn
5+ import androidx.compose.animation.fadeOut
46import androidx.compose.foundation.background
7+ import androidx.compose.foundation.clickable
58import androidx.compose.foundation.interaction.Interaction
69import androidx.compose.foundation.interaction.MutableInteractionSource
710import androidx.compose.foundation.interaction.collectIsFocusedAsState
@@ -11,6 +14,7 @@ import androidx.compose.foundation.layout.ColumnScope
1114import androidx.compose.foundation.layout.Row
1215import androidx.compose.foundation.layout.fillMaxWidth
1316import androidx.compose.foundation.layout.padding
17+ import androidx.compose.foundation.shape.CircleShape
1418import androidx.compose.foundation.text.BasicTextField
1519import androidx.compose.foundation.text.KeyboardActions
1620import androidx.compose.foundation.text.KeyboardOptions
@@ -20,18 +24,25 @@ import androidx.compose.runtime.derivedStateOf
2024import androidx.compose.runtime.remember
2125import androidx.compose.ui.Alignment
2226import androidx.compose.ui.Modifier
27+ import androidx.compose.ui.draw.clip
2328import androidx.compose.ui.focus.FocusRequester
2429import androidx.compose.ui.focus.focusRequester
2530import androidx.compose.ui.focus.onFocusChanged
2631import androidx.compose.ui.graphics.SolidColor
2732import androidx.compose.ui.platform.LocalFocusManager
2833import androidx.compose.ui.semantics.onClick
2934import androidx.compose.ui.semantics.semantics
35+ import androidx.compose.ui.text.TextStyle
36+ import androidx.compose.ui.text.font.FontWeight
3037import androidx.compose.ui.text.input.ImeAction
3138import androidx.compose.ui.unit.DpSize
3239import androidx.compose.ui.unit.dp
40+ import androidx.compose.ui.unit.sp
3341import androidx.compose.ui.zIndex
3442import kotlinx.coroutines.delay
43+ import top.yukonga.miuix.kmp.icon.MiuixIcons
44+ import top.yukonga.miuix.kmp.icon.icons.basic.Search
45+ import top.yukonga.miuix.kmp.icon.icons.basic.SearchCleanup
3546import top.yukonga.miuix.kmp.theme.MiuixTheme
3647import top.yukonga.miuix.kmp.utils.BackHandler
3748import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
@@ -116,7 +127,7 @@ fun SearchBar(
116127fun InputField (
117128 query : String ,
118129 onQueryChange : (String ) -> Unit ,
119- label : String = "",
130+ label : String = "Search ",
120131 onSearch : (String ) -> Unit ,
121132 expanded : Boolean ,
122133 onExpandedChange : (Boolean ) -> Unit ,
@@ -130,11 +141,34 @@ fun InputField(
130141 @Suppress(" NAME_SHADOWING" )
131142 val interactionSource = interactionSource ? : remember { MutableInteractionSource () }
132143
133- val paddingModifier = remember(insideMargin, leadingIcon, trailingIcon) {
134- if (leadingIcon == null && trailingIcon == null ) Modifier .padding(horizontal = insideMargin.width, vertical = insideMargin.height)
135- else if (leadingIcon == null ) Modifier .padding(start = insideMargin.width).padding(vertical = insideMargin.height)
136- else if (trailingIcon == null ) Modifier .padding(end = insideMargin.width).padding(vertical = insideMargin.height)
137- else Modifier .padding(vertical = insideMargin.height)
144+ @Suppress(" NAME_SHADOWING" )
145+ val leadingIcon = leadingIcon ? : {
146+ Icon (
147+ modifier = Modifier .padding(start = 16 .dp, end = 8 .dp),
148+ imageVector = MiuixIcons .Basic .Search ,
149+ tint = MiuixTheme .colorScheme.onSurfaceContainerHigh,
150+ contentDescription = " Search"
151+ )
152+ }
153+
154+ @Suppress(" NAME_SHADOWING" )
155+ val trailingIcon = trailingIcon ? : {
156+ AnimatedVisibility (
157+ visible = query.isNotEmpty(),
158+ enter = fadeIn(),
159+ exit = fadeOut(),
160+ ) {
161+ Box (
162+ modifier = Modifier .padding(start = 8 .dp, end = 16 .dp),
163+ ) {
164+ Icon (
165+ modifier = Modifier .clip(CircleShape ).clickable { onQueryChange(" " ) },
166+ imageVector = MiuixIcons .Basic .SearchCleanup ,
167+ tint = MiuixTheme .colorScheme.onSurfaceContainerHighest,
168+ contentDescription = " Search Cleanup"
169+ )
170+ }
171+ }
138172 }
139173
140174 val focused = interactionSource.collectIsFocusedAsState().value
@@ -155,7 +189,7 @@ fun InputField(
155189 },
156190 enabled = enabled,
157191 singleLine = true ,
158- textStyle = MiuixTheme .textStyles.main,
192+ textStyle = MiuixTheme .textStyles.main.copy(fontWeight = FontWeight . Bold ) ,
159193 cursorBrush = SolidColor (MiuixTheme .colorScheme.primary),
160194 keyboardOptions = KeyboardOptions (imeAction = ImeAction .Search ),
161195 keyboardActions = KeyboardActions (onSearch = { onSearch(query) }),
@@ -174,25 +208,21 @@ fun InputField(
174208 modifier = Modifier .fillMaxWidth(),
175209 verticalAlignment = Alignment .CenterVertically
176210 ) {
177- if (leadingIcon != null ) {
178- leadingIcon()
179- }
211+ leadingIcon()
180212 Box (
181213 modifier = Modifier
182214 .weight(1f )
183- .then(paddingModifier ),
215+ .padding(vertical = insideMargin.height ),
184216 contentAlignment = Alignment .CenterStart
185217 ) {
186218 Text (
187219 text = if (! (query.isNotEmpty() || expanded)) label else " " ,
220+ style = TextStyle (fontSize = 17 .sp, fontWeight = FontWeight .Bold ),
188221 color = MiuixTheme .colorScheme.onSurfaceContainerHigh
189222 )
190-
191223 innerTextField()
192224 }
193- if (trailingIcon != null ) {
194- trailingIcon()
195- }
225+ trailingIcon()
196226 }
197227 }
198228 }
0 commit comments