Skip to content

Commit 8c4ca7b

Browse files
YuKongAYuKongA
committed
example: shared BottomSheet UI
1 parent 9b86e77 commit 8c4ca7b

2 files changed

Lines changed: 127 additions & 172 deletions

File tree

‎example/shared/src/commonMain/kotlin/component/BottomSheetSection.kt‎

Lines changed: 119 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ import androidx.compose.foundation.lazy.LazyColumn
1515
import androidx.compose.foundation.lazy.LazyListScope
1616
import androidx.compose.runtime.Composable
1717
import androidx.compose.runtime.getValue
18-
import androidx.compose.runtime.mutableFloatStateOf
1918
import androidx.compose.runtime.mutableIntStateOf
2019
import androidx.compose.runtime.mutableStateOf
2120
import androidx.compose.runtime.remember
2221
import androidx.compose.runtime.setValue
2322
import androidx.compose.ui.Modifier
23+
import androidx.compose.ui.graphics.vector.ImageVector
2424
import androidx.compose.ui.unit.dp
2525
import top.yukonga.miuix.kmp.basic.Card
2626
import top.yukonga.miuix.kmp.basic.CardDefaults
@@ -34,7 +34,6 @@ import top.yukonga.miuix.kmp.icon.extended.Ok
3434
import top.yukonga.miuix.kmp.overlay.OverlayBottomSheet
3535
import top.yukonga.miuix.kmp.preference.ArrowPreference
3636
import top.yukonga.miuix.kmp.preference.OverlayDropdownPreference
37-
import top.yukonga.miuix.kmp.preference.SliderPreference
3837
import top.yukonga.miuix.kmp.preference.SwitchPreference
3938
import top.yukonga.miuix.kmp.preference.WindowDropdownPreference
4039
import top.yukonga.miuix.kmp.theme.LocalDismissState
@@ -122,98 +121,26 @@ private fun SuperBottomSheetDemo(
122121
onDismissRequest = onDismissRequest,
123122
onDismissFinished = onDismissFinished,
124123
startAction = {
125-
IconButton(
126-
onClick = onDismissRequest,
127-
) {
128-
Icon(
129-
imageVector = MiuixIcons.Close,
130-
contentDescription = "Cancel",
131-
tint = MiuixTheme.colorScheme.onBackground,
132-
)
133-
}
124+
BottomSheetActionButton(MiuixIcons.Close, "Cancel", onClick = onDismissRequest)
134125
},
135126
endAction = {
136-
IconButton(
137-
onClick = onDismissRequest,
138-
) {
139-
Icon(
140-
imageVector = MiuixIcons.Ok,
141-
contentDescription = "Confirm",
142-
tint = MiuixTheme.colorScheme.onBackground,
143-
)
144-
}
127+
BottomSheetActionButton(MiuixIcons.Ok, "Confirm", onClick = onDismissRequest)
145128
},
146129
) {
147-
LazyColumn(
148-
modifier = Modifier.fillMaxWidth()
149-
.scrollEndHaptic()
150-
.overScrollVertical(),
130+
BottomSheetContent(
131+
allowDismiss = allowDismiss,
132+
onAllowDismissChange = { allowDismiss = it },
133+
enableNestedScroll = enableNestedScroll,
134+
onEnableNestedScrollChange = { enableNestedScroll = it },
135+
switchChecked = switchChecked,
136+
onSwitchCheckedChange = onSwitchCheckedChange,
151137
) {
152-
item {
153-
SmallTitle(
154-
text = "Behavior Settings",
155-
insideMargin = PaddingValues(16.dp, 8.dp),
156-
)
157-
Card(
158-
modifier = Modifier.padding(bottom = 12.dp),
159-
colors = CardDefaults.defaultColors(
160-
color = MiuixTheme.colorScheme.secondaryContainer,
161-
),
162-
) {
163-
SwitchPreference(
164-
title = "Allow Dismiss",
165-
summary = "Drag or Back to dismiss",
166-
checked = allowDismiss,
167-
onCheckedChange = { allowDismiss = it },
168-
)
169-
SwitchPreference(
170-
title = "Enable NestedScroll",
171-
summary = "Scroll content vs Drag sheet",
172-
checked = enableNestedScroll,
173-
onCheckedChange = { enableNestedScroll = it },
174-
)
175-
}
176-
}
177-
item {
178-
var sliderValue by remember { mutableFloatStateOf(0.5f) }
179-
SliderPreference(
180-
title = "Slider",
181-
value = sliderValue,
182-
onValueChange = { sliderValue = it },
183-
modifier = Modifier.padding(bottom = 12.dp),
184-
)
185-
var textFieldValue by remember { mutableStateOf("") }
186-
TextField(
187-
value = textFieldValue,
188-
onValueChange = { textFieldValue = it },
189-
label = "TextField",
190-
modifier = Modifier.padding(bottom = 12.dp),
191-
)
192-
Card(
193-
modifier = Modifier.padding(bottom = 12.dp),
194-
colors = CardDefaults.defaultColors(
195-
color = MiuixTheme.colorScheme.secondaryContainer,
196-
),
197-
) {
198-
OverlayDropdownPreference(
199-
title = "DropdownPref (O)",
200-
items = BottomSheetDropdownOptions,
201-
selectedIndex = dropdownSelectedIndex,
202-
onSelectedIndexChange = onDropdownSelectedIndexChange,
203-
)
204-
SwitchPreference(
205-
title = "SwitchPref",
206-
checked = switchChecked,
207-
onCheckedChange = onSwitchCheckedChange,
208-
)
209-
}
210-
Spacer(
211-
Modifier.padding(
212-
bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() +
213-
WindowInsets.captionBar.asPaddingValues().calculateBottomPadding(),
214-
),
215-
)
216-
}
138+
OverlayDropdownPreference(
139+
title = "DropdownPref (O)",
140+
items = BottomSheetDropdownOptions,
141+
selectedIndex = dropdownSelectedIndex,
142+
onSelectedIndexChange = onDropdownSelectedIndexChange,
143+
)
217144
}
218145
}
219146
}
@@ -240,99 +167,119 @@ private fun WindowBottomSheetDemo(
240167
onDismissFinished = onDismissFinished,
241168
startAction = {
242169
val dismissState = LocalDismissState.current
243-
IconButton(
244-
onClick = { dismissState?.invoke() },
245-
) {
246-
Icon(
247-
imageVector = MiuixIcons.Close,
248-
contentDescription = "Cancel",
249-
tint = MiuixTheme.colorScheme.onBackground,
250-
)
251-
}
170+
BottomSheetActionButton(MiuixIcons.Close, "Cancel", onClick = { dismissState?.invoke() })
252171
},
253172
endAction = {
254173
val dismissState = LocalDismissState.current
255-
IconButton(
256-
onClick = { dismissState?.invoke() },
257-
) {
258-
Icon(
259-
imageVector = MiuixIcons.Ok,
260-
contentDescription = "Confirm",
261-
tint = MiuixTheme.colorScheme.onBackground,
262-
)
263-
}
174+
BottomSheetActionButton(MiuixIcons.Ok, "Confirm", onClick = { dismissState?.invoke() })
264175
},
265176
) {
266-
LazyColumn(
267-
modifier = Modifier.fillMaxWidth()
268-
.scrollEndHaptic()
269-
.overScrollVertical(),
177+
BottomSheetContent(
178+
allowDismiss = allowDismiss,
179+
onAllowDismissChange = { allowDismiss = it },
180+
enableNestedScroll = enableNestedScroll,
181+
onEnableNestedScrollChange = { enableNestedScroll = it },
182+
switchChecked = switchChecked,
183+
onSwitchCheckedChange = onSwitchCheckedChange,
270184
) {
271-
item {
272-
SmallTitle(
273-
text = "Behavior Settings",
274-
insideMargin = PaddingValues(16.dp, 8.dp),
275-
)
276-
Card(
277-
modifier = Modifier.padding(bottom = 12.dp),
278-
colors = CardDefaults.defaultColors(
279-
color = MiuixTheme.colorScheme.secondaryContainer,
280-
),
281-
) {
282-
SwitchPreference(
283-
title = "Allow Dismiss",
284-
summary = "Drag or Back to dismiss",
285-
checked = allowDismiss,
286-
onCheckedChange = { allowDismiss = it },
287-
)
288-
SwitchPreference(
289-
title = "Enable NestedScroll",
290-
summary = "Scroll content vs Drag sheet",
291-
checked = enableNestedScroll,
292-
onCheckedChange = { enableNestedScroll = it },
293-
)
294-
}
295-
}
296-
item {
297-
var sliderValue by remember { mutableFloatStateOf(0.5f) }
298-
SliderPreference(
299-
title = "Slider",
300-
value = sliderValue,
301-
onValueChange = { sliderValue = it },
302-
modifier = Modifier.padding(bottom = 12.dp),
185+
WindowDropdownPreference(
186+
title = "DropdownPref (W)",
187+
items = BottomSheetDropdownOptions,
188+
selectedIndex = dropdownSelectedIndex,
189+
onSelectedIndexChange = onDropdownSelectedIndexChange,
190+
)
191+
}
192+
}
193+
}
194+
195+
/**
196+
* Shared content of both BottomSheet demos. The only part that differs between the Overlay and
197+
* Window variants is the dropdown preference, supplied through the [dropdown] slot.
198+
*/
199+
@Composable
200+
private fun BottomSheetContent(
201+
allowDismiss: Boolean,
202+
onAllowDismissChange: (Boolean) -> Unit,
203+
enableNestedScroll: Boolean,
204+
onEnableNestedScrollChange: (Boolean) -> Unit,
205+
switchChecked: Boolean,
206+
onSwitchCheckedChange: (Boolean) -> Unit,
207+
dropdown: @Composable () -> Unit,
208+
) {
209+
LazyColumn(
210+
modifier = Modifier.fillMaxWidth()
211+
.scrollEndHaptic()
212+
.overScrollVertical(),
213+
) {
214+
item {
215+
SmallTitle(
216+
text = "Behavior Settings",
217+
insideMargin = PaddingValues(16.dp, 8.dp),
218+
)
219+
Card(
220+
modifier = Modifier.padding(bottom = 12.dp),
221+
colors = CardDefaults.defaultColors(
222+
color = MiuixTheme.colorScheme.secondaryContainer,
223+
),
224+
) {
225+
SwitchPreference(
226+
title = "Allow Dismiss",
227+
summary = "Drag or Back to dismiss",
228+
checked = allowDismiss,
229+
onCheckedChange = onAllowDismissChange,
303230
)
304-
var textFieldValue by remember { mutableStateOf("") }
305-
TextField(
306-
value = textFieldValue,
307-
onValueChange = { textFieldValue = it },
308-
label = "TextField",
309-
modifier = Modifier.padding(bottom = 12.dp),
231+
SwitchPreference(
232+
title = "Enable NestedScroll",
233+
summary = "Scroll content vs Drag sheet",
234+
checked = enableNestedScroll,
235+
onCheckedChange = onEnableNestedScrollChange,
310236
)
311-
Card(
312-
modifier = Modifier.padding(bottom = 12.dp),
313-
colors = CardDefaults.defaultColors(
314-
color = MiuixTheme.colorScheme.secondaryContainer,
315-
),
316-
) {
317-
WindowDropdownPreference(
318-
title = "DropdownPref (W)",
319-
items = BottomSheetDropdownOptions,
320-
selectedIndex = dropdownSelectedIndex,
321-
onSelectedIndexChange = onDropdownSelectedIndexChange,
322-
)
323-
SwitchPreference(
324-
title = "SwitchPref",
325-
checked = switchChecked,
326-
onCheckedChange = onSwitchCheckedChange,
327-
)
328-
}
329-
Spacer(
330-
Modifier.padding(
331-
bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() +
332-
WindowInsets.captionBar.asPaddingValues().calculateBottomPadding(),
333-
),
237+
}
238+
}
239+
item {
240+
var textFieldValue by remember { mutableStateOf("") }
241+
TextField(
242+
value = textFieldValue,
243+
onValueChange = { textFieldValue = it },
244+
label = "TextField",
245+
modifier = Modifier.padding(bottom = 12.dp),
246+
)
247+
Card(
248+
modifier = Modifier.padding(bottom = 12.dp),
249+
colors = CardDefaults.defaultColors(
250+
color = MiuixTheme.colorScheme.secondaryContainer,
251+
),
252+
) {
253+
dropdown()
254+
SwitchPreference(
255+
title = "SwitchPref",
256+
checked = switchChecked,
257+
onCheckedChange = onSwitchCheckedChange,
334258
)
335259
}
260+
Spacer(
261+
Modifier.padding(
262+
bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() +
263+
WindowInsets.captionBar.asPaddingValues().calculateBottomPadding(),
264+
),
265+
)
336266
}
337267
}
338268
}
269+
270+
@Composable
271+
private fun BottomSheetActionButton(
272+
imageVector: ImageVector,
273+
contentDescription: String,
274+
onClick: () -> Unit,
275+
) {
276+
IconButton(
277+
onClick = onClick,
278+
) {
279+
Icon(
280+
imageVector = imageVector,
281+
contentDescription = contentDescription,
282+
tint = MiuixTheme.colorScheme.onBackground,
283+
)
284+
}
285+
}

0 commit comments

Comments
 (0)
⚡