Skip to content

Commit 752d9a6

Browse files
Calvin-LLCalvin-LL
committed
add 2 lists example
1 parent 728150b commit 752d9a6

File tree

2 files changed

+207
-0
lines changed

2 files changed

+207
-0
lines changed

‎demoApp/composeApp/src/commonMain/kotlin/sh/calvin/reorderable/demo/ui/App.kt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ internal fun App() {
6161
scene("main") { MainScreen(navController) }
6262
scene("SimpleReorderableLazyColumn") { SimpleReorderableLazyColumnScreen() }
6363
scene("ComplexReorderableLazyColumn") { ComplexReorderableLazyColumnScreen() }
64+
scene("TwoReorderableLazyColumnScreen") { TwoReorderableLazyColumnScreen() }
6465
scene("SimpleLongPressHandleReorderableLazyColumn") { SimpleLongPressHandleReorderableLazyColumnScreen() }
6566
scene("SimpleReorderableLazyVerticalGrid") { SimpleReorderableLazyVerticalGridScreen() }
6667
scene("SimpleReorderableLazyVerticalStaggeredGrid") { SimpleReorderableLazyVerticalStaggeredGridScreen() }
@@ -110,6 +111,10 @@ fun MainScreen(navController: Navigator) {
110111
onClick = { navController.navigate("ComplexReorderableLazyColumn") }) {
111112
Text("Complex Reorderable LazyColumn")
112113
}
114+
Button(
115+
onClick = { navController.navigate("TwoReorderableLazyColumnScreen") }) {
116+
Text("2 Lists Reorderable LazyColumn")
117+
}
113118
Button(
114119
onClick = { navController.navigate("SimpleLongPressHandleReorderableLazyColumn") }) {
115120
Text(

‎demoApp/composeApp/src/commonMain/kotlin/sh/calvin/reorderable/demo/ui/TwoReorderableLazyColumnScreen.kt‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
package sh.calvin.reorderable.demo.ui
2+
3+
import androidx.compose.foundation.ExperimentalFoundationApi
4+
import androidx.compose.foundation.interaction.MutableInteractionSource
5+
import androidx.compose.foundation.layout.Arrangement
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.fillMaxSize
8+
import androidx.compose.foundation.layout.fillMaxWidth
9+
import androidx.compose.foundation.layout.height
10+
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.foundation.lazy.LazyColumn
12+
import androidx.compose.foundation.lazy.itemsIndexed
13+
import androidx.compose.foundation.lazy.rememberLazyListState
14+
import androidx.compose.material.icons.Icons
15+
import androidx.compose.material.icons.rounded.DragHandle
16+
import androidx.compose.material3.Card
17+
import androidx.compose.material3.Icon
18+
import androidx.compose.material3.IconButton
19+
import androidx.compose.material3.Text
20+
import androidx.compose.runtime.Composable
21+
import androidx.compose.runtime.getValue
22+
import androidx.compose.runtime.mutableStateOf
23+
import androidx.compose.runtime.remember
24+
import androidx.compose.runtime.setValue
25+
import androidx.compose.ui.Alignment
26+
import androidx.compose.ui.Modifier
27+
import androidx.compose.ui.semantics.clearAndSetSemantics
28+
import androidx.compose.ui.text.style.TextAlign
29+
import androidx.compose.ui.unit.dp
30+
import sh.calvin.reorderable.ReorderableItem
31+
import sh.calvin.reorderable.demo.ReorderHapticFeedbackType
32+
import sh.calvin.reorderable.demo.items
33+
import sh.calvin.reorderable.demo.rememberReorderHapticFeedback
34+
import sh.calvin.reorderable.rememberReorderableLazyListState
35+
36+
var list1 = items.take(3)
37+
var list2 = items.slice(3..5)
38+
39+
@OptIn(ExperimentalFoundationApi::class)
40+
@Composable
41+
fun TwoReorderableLazyColumnScreen() {
42+
val haptic = rememberReorderHapticFeedback()
43+
44+
var combinedList by remember { mutableStateOf(list1 + list2) }
45+
46+
val lazyListState = rememberLazyListState()
47+
val reorderableLazyColumnState = rememberReorderableLazyListState(lazyListState) { from, to ->
48+
combinedList = combinedList.toMutableList().apply {
49+
// can't use .index because there are other items in the list (headers, footers, etc)
50+
val fromIndex = indexOfFirst { it.id == from.key }
51+
val toIndex = indexOfFirst { it.id == to.key }
52+
53+
add(toIndex, removeAt(fromIndex))
54+
}
55+
56+
list1 = combinedList.take(3)
57+
list2 = combinedList.slice(3..5)
58+
59+
haptic.performHapticFeedback(ReorderHapticFeedbackType.MOVE)
60+
}
61+
62+
LazyColumn(
63+
modifier = Modifier.fillMaxSize(),
64+
state = lazyListState,
65+
verticalArrangement = Arrangement.spacedBy(8.dp),
66+
) {
67+
combinedList.chunked(3).forEachIndexed { group, subList ->
68+
if (group != 0) {
69+
item {
70+
Text(
71+
"Another list",
72+
Modifier
73+
.fillMaxWidth()
74+
.animateItem(),
75+
textAlign = TextAlign.Center
76+
)
77+
}
78+
}
79+
itemsIndexed(subList, key = { _, item -> item.id }) { index, item ->
80+
ReorderableItem(reorderableLazyColumnState, item.id) {
81+
val interactionSource = remember { MutableInteractionSource() }
82+
83+
Card(
84+
onClick = {},
85+
modifier = Modifier
86+
.height(item.size.dp)
87+
.padding(horizontal = 8.dp),
88+
interactionSource = interactionSource,
89+
) {
90+
Row(
91+
Modifier.fillMaxSize(),
92+
horizontalArrangement = Arrangement.SpaceBetween,
93+
verticalAlignment = Alignment.CenterVertically,
94+
) {
95+
Text(item.text, Modifier.padding(horizontal = 8.dp))
96+
IconButton(
97+
modifier = Modifier
98+
.draggableHandle(
99+
onDragStarted = {
100+
haptic.performHapticFeedback(ReorderHapticFeedbackType.START)
101+
},
102+
onDragStopped = {
103+
haptic.performHapticFeedback(ReorderHapticFeedbackType.END)
104+
},
105+
interactionSource = interactionSource,
106+
)
107+
.clearAndSetSemantics { },
108+
onClick = {},
109+
) {
110+
Icon(Icons.Rounded.DragHandle, contentDescription = "Reorder")
111+
}
112+
}
113+
}
114+
}
115+
}
116+
}
117+
// this one will lose the dragging item when it moves to the next list
118+
// itemsIndexed(combinedList.take(3), key = { _, item -> item.id }) { index, item ->
119+
// ReorderableItem(reorderableLazyColumnState, item.id) {
120+
// val interactionSource = remember { MutableInteractionSource() }
121+
//
122+
// Card(
123+
// onClick = {},
124+
// modifier = Modifier
125+
// .height(item.size.dp)
126+
// .padding(horizontal = 8.dp),
127+
// interactionSource = interactionSource,
128+
// ) {
129+
// Row(
130+
// Modifier.fillMaxSize(),
131+
// horizontalArrangement = Arrangement.SpaceBetween,
132+
// verticalAlignment = Alignment.CenterVertically,
133+
// ) {
134+
// Text(item.text, Modifier.padding(horizontal = 8.dp))
135+
// IconButton(
136+
// modifier = Modifier
137+
// .draggableHandle(
138+
// onDragStarted = {
139+
// haptic.performHapticFeedback(ReorderHapticFeedbackType.START)
140+
// },
141+
// onDragStopped = {
142+
// haptic.performHapticFeedback(ReorderHapticFeedbackType.END)
143+
// },
144+
// interactionSource = interactionSource,
145+
// )
146+
// .clearAndSetSemantics { },
147+
// onClick = {},
148+
// ) {
149+
// Icon(Icons.Rounded.DragHandle, contentDescription = "Reorder")
150+
// }
151+
// }
152+
// }
153+
// }
154+
// }
155+
// item {
156+
// Text(
157+
// "Another list",
158+
// Modifier
159+
// .fillMaxWidth()
160+
// .animateItem(),
161+
// textAlign = TextAlign.Center
162+
// )
163+
// }
164+
// itemsIndexed(combinedList.slice(3..5), key = { _, item -> item.id }) { index, item ->
165+
// ReorderableItem(reorderableLazyColumnState, item.id) {
166+
// val interactionSource = remember { MutableInteractionSource() }
167+
//
168+
// Card(
169+
// onClick = {},
170+
// modifier = Modifier
171+
// .height(item.size.dp)
172+
// .padding(horizontal = 8.dp),
173+
// interactionSource = interactionSource,
174+
// ) {
175+
// Row(
176+
// Modifier.fillMaxSize(),
177+
// horizontalArrangement = Arrangement.SpaceBetween,
178+
// verticalAlignment = Alignment.CenterVertically,
179+
// ) {
180+
// Text(item.text, Modifier.padding(horizontal = 8.dp))
181+
// IconButton(
182+
// modifier = Modifier
183+
// .draggableHandle(
184+
// onDragStarted = {
185+
// haptic.performHapticFeedback(ReorderHapticFeedbackType.START)
186+
// },
187+
// onDragStopped = {
188+
// haptic.performHapticFeedback(ReorderHapticFeedbackType.END)
189+
// },
190+
// interactionSource = interactionSource,
191+
// )
192+
// .clearAndSetSemantics { },
193+
// onClick = {},
194+
// ) {
195+
// Icon(Icons.Rounded.DragHandle, contentDescription = "Reorder")
196+
// }
197+
// }
198+
// }
199+
// }
200+
// }
201+
}
202+
}

0 commit comments

Comments
 (0)