Skip to content

Commit 3de538b

Browse files
YuKongAYuKongA
committed
library: Refactor PullToRefresh
* THX @sd086
1 parent 84ab0de commit 3de538b

File tree

6 files changed

+611
-840
lines changed

6 files changed

+611
-840
lines changed

‎docs/components/pulltorefresh.md‎

Lines changed: 33 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,23 @@ import top.yukonga.miuix.kmp.basic.rememberPullToRefreshState
2020
PullToRefresh can wrap any scrollable content:
2121

2222
```kotlin
23+
var isRefreshing by rememberSaveable { mutableStateOf(false) }
2324
val pullToRefreshState = rememberPullToRefreshState()
2425
var items by remember { mutableStateOf(1) }
25-
val scope = rememberCoroutineScope()
26+
27+
LaunchedEffect(isRefreshing) {
28+
if (isRefreshing) {
29+
delay(500)
30+
items += 6
31+
isRefreshing = false
32+
}
33+
}
2634

2735
Surface {
2836
PullToRefresh(
37+
isRefreshing = isRefreshing,
38+
onRefresh = { isRefreshing = true },
2939
pullToRefreshState = pullToRefreshState,
30-
onRefresh = {
31-
scope.launch {
32-
// Check refresh state
33-
if (pullToRefreshState.isRefreshing) {
34-
delay(300) // Simulate refresh operation
35-
// Complete refresh
36-
pullToRefreshState.completeRefreshing {
37-
// Update data
38-
items++
39-
}
40-
}
41-
}
42-
}
4340
) {
4441
LazyColumn(
4542
modifier = Modifier.fillMaxSize()
@@ -66,50 +63,34 @@ PullToRefresh has the following states:
6663
4. `Refreshing`: Currently refreshing
6764
5. `RefreshComplete`: Refresh completed, returning to initial state
6865

69-
```kotlin
70-
val pullToRefreshState = rememberPullToRefreshState()
71-
// Check if refreshing
72-
if (pullToRefreshState.isRefreshing) {
73-
// Logic during refresh
74-
delay(2000) // Simulate network request
75-
pullToRefreshState.completeRefreshing {} // Callback when refresh completes
76-
}
77-
```
78-
7966
## Properties
8067

8168
### PullToRefresh Properties
8269

83-
| Property Name | Type | Description | Default Value | Required |
84-
| ------------------ | ---------------------- | ------------------------------ | -------------------------------------- | -------- |
85-
| pullToRefreshState | PullToRefreshState | Refresh state controller | - | Yes |
86-
| onRefresh | () -> Unit | Refresh callback function | {} | Yes |
87-
| modifier | Modifier | Container modifier | Modifier | No |
88-
| contentPadding | PaddingValues | Content padding | PaddingValues(0.dp) | No |
89-
| color | Color | Indicator color | PullToRefreshDefaults.color | No |
90-
| circleSize | Dp | Indicator circle size | PullToRefreshDefaults.circleSize | No |
91-
| refreshTexts | List\<String> | Text list for different states | PullToRefreshDefaults.refreshTexts | No |
92-
| refreshTextStyle | TextStyle | Refresh text style | PullToRefreshDefaults.refreshTextStyle | No |
93-
| content | @Composable () -> Unit | Scrollable content composable | - | Yes |
70+
| Property Name | Type | Description | Default Value | Required |
71+
| ----------------------- | ---------------------- | ------------------------------ | -------------------------------------- | -------- |
72+
| isRefreshing | Boolean | Refresh state | None | Yes |
73+
| onRefresh | () -> Unit | Refresh callback function | None | Yes |
74+
| modifier | Modifier | Container modifier | Modifier | No |
75+
| pullToRefreshState | PullToRefreshState | PullToRefresh state | rememberPullToRefreshState() | No |
76+
| contentPadding | PaddingValues | Content padding | PaddingValues(0.dp) | No |
77+
| topAppBarScrollBehavior | ScrollBehavior | Top app bar scroll behavior | null | No |
78+
| color | Color | Indicator color | PullToRefreshDefaults.color | No |
79+
| circleSize | Dp | Indicator circle size | PullToRefreshDefaults.circleSize | No |
80+
| refreshTexts | List<String> | Text list for different states | PullToRefreshDefaults.refreshTexts | No |
81+
| refreshTextStyle | TextStyle | Refresh text style | PullToRefreshDefaults.refreshTextStyle | No |
82+
| content | @Composable () -> Unit | Scrollable content composable | None | Yes |
9483

9584
### PullToRefreshState Class
9685

97-
PullToRefreshState controls the refresh state and can be created using `rememberPullToRefreshState()`.
98-
99-
#### Properties
100-
101-
| Property Name | Type | Description | Required |
102-
| --------------------------- | ------------ | ---------------------- | -------- |
103-
| refreshState | RefreshState | Current refresh state | Yes |
104-
| isRefreshing | Boolean | Is refreshing | Yes |
105-
| pullProgress | Float | Pull progress (0-1) | Yes |
106-
| refreshCompleteAnimProgress | Float | Complete anim progress | Yes |
107-
108-
#### Methods
86+
PullToRefreshState manages the UI state of the refresh indicator and can be created using `rememberPullToRefreshState()`. It should only be used for UI state, while refresh logic should be controlled by `isRefreshing` and `onRefresh`.
10987

110-
| Method Name | Parameters | Description | Required |
111-
| ------------------ | -------------------- | ------------------------------ | -------- |
112-
| completeRefreshing | (suspend () -> Unit) | Complete refresh with callback | Yes |
88+
| Property Name | Type | Description |
89+
| ---------------------------- | ------------ | ---------------------------- |
90+
| refreshState | RefreshState | Current refresh state |
91+
| isRefreshing | Boolean | Whether it is refreshing |
92+
| pullProgress | Float | Pull progress (0-1) |
93+
| refreshCompleteAnimProgress | Float | Refresh complete animation |
11394

11495
### PullToRefreshDefaults Object
11596

@@ -127,14 +108,9 @@ PullToRefreshDefaults provides default values for the component.
127108
### Custom Indicator Color
128109

129110
```kotlin
130-
val pullToRefreshState = rememberPullToRefreshState()
131-
132111
PullToRefresh(
133-
pullToRefreshState = pullToRefreshState,
134112
color = Color.Blue,
135-
onRefresh = {
136-
// Perform refresh
137-
}
113+
// Other properties
138114
) {
139115
// Content
140116
}
@@ -143,53 +119,15 @@ PullToRefresh(
143119
### Custom Refresh Texts
144120

145121
```kotlin
146-
val pullToRefreshState = rememberPullToRefreshState()
147-
148122
PullToRefresh(
149-
pullToRefreshState = pullToRefreshState,
150123
refreshTexts = listOf(
151124
"Pull to refresh",
152125
"Release to refresh",
153126
"Refreshing",
154127
"Refresh successful"
155128
),
156-
onRefresh = {
157-
// Perform refresh
158-
}
129+
// Other properties
159130
) {
160131
// Content
161132
}
162133
```
163-
164-
### Using with Loading State
165-
166-
```kotlin
167-
val pullToRefreshState = rememberPullToRefreshState()
168-
var items by remember { mutableStateOf(List(5) { "Item $it" }) }
169-
val scope = rememberCoroutineScope()
170-
171-
PullToRefresh(
172-
pullToRefreshState = pullToRefreshState,
173-
onRefresh = {
174-
scope.launch {
175-
delay(2000) // Simulate refresh operation
176-
pullToRefreshState.completeRefreshing {
177-
items = List(8) { "Updated Item $it" }
178-
}
179-
}
180-
}
181-
) {
182-
LazyColumn(
183-
modifier = Modifier.fillMaxSize()
184-
) {
185-
items(items.size) { item ->
186-
Text(
187-
text = items[item],
188-
modifier = Modifier
189-
.padding(16.dp)
190-
.fillMaxSize()
191-
)
192-
}
193-
}
194-
}
195-
```

‎docs/demo/src/commonMain/kotlin/PullToRefreshDemo.kt‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import androidx.compose.runtime.LaunchedEffect
1616
import androidx.compose.runtime.getValue
1717
import androidx.compose.runtime.mutableStateOf
1818
import androidx.compose.runtime.remember
19+
import androidx.compose.runtime.saveable.rememberSaveable
1920
import androidx.compose.runtime.setValue
2021
import androidx.compose.ui.Alignment
2122
import androidx.compose.ui.Modifier
@@ -47,17 +48,20 @@ fun PullToRefreshDemo() {
4748
horizontalAlignment = Alignment.CenterHorizontally
4849
) {
4950
val pullToRefreshState = rememberPullToRefreshState()
50-
51+
var isRefreshing by rememberSaveable { mutableStateOf(false) }
5152
var ii by remember { mutableStateOf(1) }
5253

53-
LaunchedEffect(pullToRefreshState.isRefreshing) {
54-
if (pullToRefreshState.isRefreshing) {
55-
delay(300)
56-
pullToRefreshState.completeRefreshing { ii ++ }
54+
LaunchedEffect(isRefreshing) {
55+
if (isRefreshing) {
56+
delay(500)
57+
ii += 6
58+
isRefreshing = false
5759
}
5860
}
5961

6062
PullToRefresh(
63+
isRefreshing = isRefreshing,
64+
onRefresh = { isRefreshing = true },
6165
pullToRefreshState = pullToRefreshState,
6266
) {
6367
LazyColumn(

0 commit comments

Comments
 (0)