Skip to content

Commit 20037f0

Browse files
YunZiAYuKongA
YunZiA
and
YuKongA
authored
library: SearchBar: Opt SearchBar anim (#68)
Co-authored-by: YuKongA <[email protected]>
1 parent 97cc719 commit 20037f0

File tree

5 files changed

+53
-47
lines changed

5 files changed

+53
-47
lines changed

‎docs/components/searchbar.md‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,29 +39,30 @@ SearchBar(
3939

4040
### SearchBar Properties
4141

42-
| Property Name | Type | Description | Default Value | Required |
43-
| ------------------ | ---------------------------------- | ------------------------------------------------- | ------------- | -------- |
44-
| inputField | @Composable () -> Unit | Search input field component | - | Yes |
45-
| expanded | Boolean | Whether to show search results | false | Yes |
46-
| onExpandedChange | (Boolean) -> Unit | Callback when expanded state changes | - | Yes |
47-
| modifier | Modifier | Modifier applied to the search bar | Modifier | No |
48-
| outsideRightAction | @Composable (() -> Unit)? | Action component shown on the right when expanded | null | No |
49-
| content | @Composable ColumnScope.() -> Unit | Content shown when expanded | - | Yes |
42+
| Property Name | Type | Description | Default Value | Required |
43+
| ------------------ | ---------------------------------- | ------------------------------------------------- | ------------------- | -------- |
44+
| inputField | @Composable () -> Unit | Search input field component | - | Yes |
45+
| onExpandedChange | (Boolean) -> Unit | Callback when expanded state changes | - | Yes |
46+
| insideMargin | DpSize | Internal padding | DpSize(12.dp, 0.dp) | No |
47+
| modifier | Modifier | Modifier applied to the search bar | Modifier | No |
48+
| expanded | Boolean | Whether to show search results | false | No |
49+
| outsideRightAction | @Composable (() -> Unit)? | Action component shown on the right when expanded | null | No |
50+
| content | @Composable ColumnScope.() -> Unit | Content shown when expanded | - | Yes |
5051

5152
### InputField Properties
5253

5354
| Property Name | Type | Description | Default Value | Required |
5455
| ----------------- | ------------------------- | ------------------------------------ | -------------------- | -------- |
5556
| query | String | Text content in search field | - | Yes |
5657
| onQueryChange | (String) -> Unit | Callback when text content changes | - | Yes |
58+
| label | String | Placeholder text when empty | "" | No |
5759
| onSearch | (String) -> Unit | Callback when search is executed | - | Yes |
5860
| expanded | Boolean | Whether in expanded state | - | Yes |
5961
| onExpandedChange | (Boolean) -> Unit | Callback when expanded state changes | - | Yes |
60-
| label | String | Placeholder text when empty | "" | No |
62+
| modifier | Modifier | Modifier applied to the input field | Modifier | No |
6163
| enabled | Boolean | Whether search field is enabled | true | No |
62-
| insideMargin | DpSize | Internal padding | DpSize(12.dp, 12.dp) | No |
63-
| leadingIcon | @Composable (() -> Unit)? | Leading icon | null | No |
64-
| trailingIcon | @Composable (() -> Unit)? | Trailing icon | null | No |
64+
| leadingIcon | @Composable (() -> Unit)? | Leading icon | default search icon | No |
65+
| trailingIcon | @Composable (() -> Unit)? | Trailing icon | default clear button | No |
6566
| interactionSource | MutableInteractionSource? | Interaction source | null | No |
6667

6768
## Advanced Usage

‎docs/zh_CN/components/searchbar.md‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -39,30 +39,31 @@ SearchBar(
3939

4040
### SearchBar 属性
4141

42-
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
43-
| ------------------ | ---------------------------------- | -------------------------- | -------- | -------- |
44-
| inputField | @Composable () -> Unit | 搜索输入框组件 | - | 是 |
45-
| expanded | Boolean | 是否展开显示搜索结果 | false | 是 |
46-
| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 |
47-
| modifier | Modifier | 应用于搜索栏的修饰符 | Modifier | 否 |
48-
| outsideRightAction | @Composable (() -> Unit)? | 展开时显示在右侧的操作组件 | null | 否 |
49-
| content | @Composable ColumnScope.() -> Unit | 展开时显示的内容 | - | 是 |
42+
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
43+
| ------------------ | ---------------------------------- | -------------------------- | ------------------- | -------- |
44+
| inputField | @Composable () -> Unit | 搜索输入框组件 | - | 是 |
45+
| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 |
46+
| insideMargin | DpSize | 内部边距 | DpSize(12.dp, 0.dp) | 否 |
47+
| modifier | Modifier | 应用于搜索栏的修饰符 | Modifier | 否 |
48+
| expanded | Boolean | 是否展开显示搜索结果 | false | 否 |
49+
| outsideRightAction | @Composable (() -> Unit)? | 展开时显示在右侧的操作组件 | null | 否 |
50+
| content | @Composable ColumnScope.() -> Unit | 展开时显示的内容 | - | 是 |
5051

5152
### InputField 属性
5253

53-
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
54-
| ----------------- | ------------------------- | -------------------------- | -------------------- | -------- |
55-
| query | String | 搜索框中的文本内容 | - | 是 |
56-
| onQueryChange | (String) -> Unit | 文本内容变化时的回调 | - | 是 |
57-
| onSearch | (String) -> Unit | 执行搜索操作时的回调 | - | 是 |
58-
| expanded | Boolean | 是否处于展开状态 | - | 是 |
59-
| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 |
60-
| label | String | 搜索框为空时显示的提示文本 | "" | 否 |
61-
| enabled | Boolean | 是否启用搜索框 | true | 否 |
62-
| insideMargin | DpSize | 内部边距 | DpSize(12.dp, 12.dp) | 否 |
63-
| leadingIcon | @Composable (() -> Unit)? | 前置图标 | null | 否 |
64-
| trailingIcon | @Composable (() -> Unit)? | 后置图标 | null | 否 |
65-
| interactionSource | MutableInteractionSource? | 交互源 | null | 否 |
54+
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
55+
| ----------------- | ------------------------- | -------------------------- | ------------ | -------- |
56+
| query | String | 搜索框中的文本内容 | - | 是 |
57+
| onQueryChange | (String) -> Unit | 文本内容变化时的回调 | - | 是 |
58+
| label | String | 搜索框为空时显示的提示文本 | "" | 否 |
59+
| onSearch | (String) -> Unit | 执行搜索操作时的回调 | - | 是 |
60+
| expanded | Boolean | 是否处于展开状态 | - | 是 |
61+
| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 |
62+
| modifier | Modifier | 应用于输入框的修饰符 | Modifier | 否 |
63+
| enabled | Boolean | 是否启用搜索框 | true | 否 |
64+
| leadingIcon | @Composable (() -> Unit)? | 前置图标 | 默认放大镜 | 否 |
65+
| trailingIcon | @Composable (() -> Unit)? | 后置图标 | 默认清除按钮 | 否 |
66+
| interactionSource | MutableInteractionSource? | 交互源 | null | 否 |
6667

6768
## 进阶用法
6869

‎example/src/commonMain/kotlin/MainPage.kt‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,6 @@ fun MainPage(
9090
item {
9191
SmallTitle(text = "SearchBar")
9292
SearchBar(
93-
modifier = Modifier
94-
.padding(start = 12.dp, end = 12.dp, bottom = 6.dp),
9593
inputField = {
9694
InputField(
9795
query = miuixSearchValue,
@@ -105,7 +103,7 @@ fun MainPage(
105103
outsideRightAction = {
106104
Text(
107105
modifier = Modifier
108-
.padding(start = 12.dp)
106+
.padding(end = 12.dp)
109107
.clickable(
110108
interactionSource = null,
111109
indication = null
@@ -161,15 +159,12 @@ fun MainPage(
161159
LazyColumn(
162160
modifier = Modifier
163161
.nestedScroll(topAppBarScrollBehavior.nestedScrollConnection)
164-
.padding(start = 12.dp)
165162
.weight(1f),
166163
contentPadding = PaddingValues(top = padding.calculateTopPadding())
167164
) {
168165
item {
169166
SmallTitle(text = "SearchBar")
170167
SearchBar(
171-
modifier = Modifier
172-
.padding(start = 12.dp, end = 12.dp, bottom = 6.dp),
173168
inputField = {
174169
InputField(
175170
query = miuixSearchValue,
@@ -183,7 +178,6 @@ fun MainPage(
183178
outsideRightAction = {
184179
Text(
185180
modifier = Modifier
186-
.padding(start = 12.dp)
187181
.clickable(
188182
interactionSource = null,
189183
indication = null

‎example/src/commonMain/kotlin/SecondPage.kt‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,7 @@ fun SecondPage(
5757
) {
5858
item {
5959
Card(
60-
modifier = Modifier
61-
.padding(12.dp)
60+
modifier = Modifier.padding(12.dp)
6261
) {
6362
for (i in 0 until ii.value) {
6463
SuperDropdown(

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
package top.yukonga.miuix.kmp.basic
22

33
import androidx.compose.animation.AnimatedVisibility
4+
import androidx.compose.animation.expandHorizontally
45
import androidx.compose.animation.fadeIn
56
import androidx.compose.animation.fadeOut
7+
import androidx.compose.animation.shrinkHorizontally
8+
import androidx.compose.animation.slideInHorizontally
9+
import androidx.compose.animation.slideOutHorizontally
610
import androidx.compose.foundation.background
711
import androidx.compose.foundation.clickable
812
import androidx.compose.foundation.interaction.Interaction
@@ -13,6 +17,7 @@ import androidx.compose.foundation.layout.Column
1317
import androidx.compose.foundation.layout.ColumnScope
1418
import androidx.compose.foundation.layout.Row
1519
import androidx.compose.foundation.layout.fillMaxWidth
20+
import androidx.compose.foundation.layout.heightIn
1621
import androidx.compose.foundation.layout.padding
1722
import androidx.compose.foundation.shape.CircleShape
1823
import androidx.compose.foundation.text.BasicTextField
@@ -53,6 +58,7 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
5358
* @param inputField the input field to input a query in the [SearchBar].
5459
* @param onExpandedChange the callback to be invoked when the [SearchBar]'s expanded state is
5560
* changed.
61+
* @param insideMargin The margin inside the [SearchBar].
5662
* @param modifier the [Modifier] to be applied to the [SearchBar].
5763
* @param expanded whether the [SearchBar] is expanded and showing search results.
5864
* @param outsideRightAction the action to be shown at the right side of the [SearchBar] when it is
@@ -63,6 +69,7 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
6369
fun SearchBar(
6470
inputField: @Composable () -> Unit,
6571
onExpandedChange: (Boolean) -> Unit,
72+
insideMargin: DpSize = DpSize(12.dp, 0.dp),
6673
modifier: Modifier = Modifier,
6774
expanded: Boolean = false,
6875
outsideRightAction: @Composable (() -> Unit)? = null,
@@ -76,11 +83,17 @@ fun SearchBar(
7683
modifier = Modifier.fillMaxWidth(),
7784
verticalAlignment = Alignment.CenterVertically,
7885
) {
79-
Box(modifier = Modifier.weight(1f)) {
86+
Box(
87+
modifier = Modifier
88+
.weight(1f)
89+
.padding(vertical = insideMargin.height, horizontal = insideMargin.width)
90+
) {
8091
inputField()
8192
}
8293
AnimatedVisibility(
83-
visible = expanded
94+
visible = expanded,
95+
enter = expandHorizontally() + slideInHorizontally(initialOffsetX = { it }),
96+
exit = shrinkHorizontally() + slideOutHorizontally(targetOffsetX = { it })
8497
) {
8598
outsideRightAction?.invoke()
8699
}
@@ -115,7 +128,6 @@ fun SearchBar(
115128
* @param enabled the enabled state of this input field. When `false`, this component will not
116129
* respond to user input, and it will appear visually disabled and disabled to accessibility
117130
* services.
118-
* @param insideMargin the margin inside the [InputField].
119131
* @param leadingIcon the leading icon to be displayed at the start of the input field.
120132
* @param trailingIcon the trailing icon to be displayed at the end of the input field.
121133
* @param interactionSource an optional hoisted [MutableInteractionSource] for observing and
@@ -133,7 +145,6 @@ fun InputField(
133145
onExpandedChange: (Boolean) -> Unit,
134146
modifier: Modifier = Modifier,
135147
enabled: Boolean = true,
136-
insideMargin: DpSize = DpSize(12.dp, 12.dp),
137148
leadingIcon: @Composable (() -> Unit)? = null,
138149
trailingIcon: @Composable (() -> Unit)? = null,
139150
interactionSource: MutableInteractionSource? = null,
@@ -212,7 +223,7 @@ fun InputField(
212223
Box(
213224
modifier = Modifier
214225
.weight(1f)
215-
.padding(vertical = insideMargin.height),
226+
.heightIn(min = 45.dp),
216227
contentAlignment = Alignment.CenterStart
217228
) {
218229
Text(

0 commit comments

Comments
 (0)