Skip to content

Commit 21ca9c8

Browse files
YuKongAYuKongA
committed
example: Move the State Hoisting of TextComponent() to upper
1 parent df8a47d commit 21ca9c8

File tree

3 files changed

+86
-52
lines changed

3 files changed

+86
-52
lines changed

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

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,35 @@ fun MainPage(
4242
) {
4343
var miuixSearchValue by remember { mutableStateOf("") }
4444
var expanded by rememberSaveable { mutableStateOf(false) }
45+
var showDialog = rememberSaveable { mutableStateOf(false) }
46+
var showDialog2 = rememberSaveable { mutableStateOf(false) }
47+
var checkbox = remember { mutableStateOf(false) }
48+
var checkboxTrue = remember { mutableStateOf(true) }
49+
var switch = remember { mutableStateOf(false) }
50+
var switchTrue = remember { mutableStateOf(true) }
51+
val dropdownOptionSelected = remember { mutableStateOf(0) }
52+
val dropdownOptionSelectedRight = remember { mutableStateOf(1) }
53+
val spinnerOptionSelected = remember { mutableStateOf(0) }
54+
val spinnerOptionSelectedRight = remember { mutableStateOf(1) }
55+
val spinnerOptionSelectedDialog = remember { mutableStateOf(2) }
56+
var miuixSuperCheckbox = remember { mutableStateOf("State: false") }
57+
var miuixSuperCheckboxState = remember { mutableStateOf(false) }
58+
var miuixSuperRightCheckbox = remember { mutableStateOf("false") }
59+
var miuixSuperRightCheckboxState = remember { mutableStateOf(false) }
60+
var miuixSuperSwitch = remember { mutableStateOf("false") }
61+
var miuixSuperSwitchState = remember { mutableStateOf(false) }
62+
var miuixSuperSwitchAnimState = remember { mutableStateOf(false) }
63+
64+
val textComponent = @Composable {
65+
TextComponent(
66+
showDialog, showDialog2, checkbox, checkboxTrue, switch, switchTrue, dropdownOptionSelected,
67+
dropdownOptionSelectedRight, spinnerOptionSelected, spinnerOptionSelectedRight,
68+
spinnerOptionSelectedDialog, miuixSuperCheckbox, miuixSuperCheckboxState,
69+
miuixSuperRightCheckbox, miuixSuperRightCheckboxState, miuixSuperSwitch,
70+
miuixSuperSwitchState, miuixSuperSwitchAnimState
71+
)
72+
}
73+
val otherComponent = @Composable { OtherComponent(padding) }
4574

4675
BoxWithConstraints(
4776
modifier = Modifier.fillMaxSize()
@@ -113,12 +142,12 @@ fun MainPage(
113142
item(
114143
key = "text"
115144
) {
116-
TextComponent()
145+
textComponent()
117146
}
118147
item(
119148
key = "other"
120149
) {
121-
OtherComponent(padding)
150+
otherComponent()
122151
}
123152
}
124153
}
@@ -195,9 +224,9 @@ fun MainPage(
195224
}
196225
if (!expanded) {
197226
item(
198-
key = "text"
227+
key = "other"
199228
) {
200-
OtherComponent(padding)
229+
otherComponent()
201230
Spacer(modifier = Modifier.height(6.dp))
202231
}
203232
}
@@ -209,8 +238,10 @@ fun MainPage(
209238
contentPadding = PaddingValues(top = padding.calculateTopPadding()),
210239
topAppBarScrollBehavior = topAppBarScrollBehavior
211240
) {
212-
item {
213-
TextComponent()
241+
item(
242+
key = "text"
243+
) {
244+
textComponent()
214245
Spacer(modifier = Modifier.height(12.dp + padding.calculateBottomPadding()))
215246
}
216247
}

‎composeApp/src/commonMain/kotlin/component/TextComponent.kt‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -54,33 +54,33 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
5454
import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissDialog
5555

5656
@Composable
57-
fun TextComponent() {
58-
val showDialog = remember { mutableStateOf(false) }
59-
val showDialog2 = remember { mutableStateOf(false) }
60-
var checkbox by remember { mutableStateOf(false) }
61-
var checkboxTrue by remember { mutableStateOf(true) }
62-
var switch by remember { mutableStateOf(false) }
63-
var switchTrue by remember { mutableStateOf(true) }
57+
fun TextComponent(
58+
showDialog: MutableState<Boolean>,
59+
showDialog2: MutableState<Boolean>,
60+
checkbox: MutableState<Boolean>,
61+
checkboxTrue: MutableState<Boolean>,
62+
switch: MutableState<Boolean>,
63+
switchTrue: MutableState<Boolean>,
64+
dropdownOptionSelected: MutableState<Int>,
65+
dropdownOptionSelectedRight: MutableState<Int>,
66+
spinnerOptionSelected: MutableState<Int>,
67+
spinnerOptionSelectedRight: MutableState<Int>,
68+
spinnerOptionSelectedDialog: MutableState<Int>,
69+
miuixSuperCheckbox: MutableState<String>,
70+
miuixSuperCheckboxState: MutableState<Boolean>,
71+
miuixSuperRightCheckbox: MutableState<String>,
72+
miuixSuperRightCheckboxState: MutableState<Boolean>,
73+
miuixSuperSwitch: MutableState<String>,
74+
miuixSuperSwitchState: MutableState<Boolean>,
75+
miuixSuperSwitchAnimState: MutableState<Boolean>,
76+
) {
6477
val dropdownOptions = listOf("Option 1", "Option 2", "Option 3", "Option 4")
65-
val dropdownOptionSelected = remember { mutableStateOf(0) }
66-
val dropdownOptionSelectedRight = remember { mutableStateOf(1) }
6778
val spinnerOptions = listOf(
6879
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFF5B29)) }, "Option 1", "Red"),
6980
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF36D167)) }, "Option 2", "Green"),
7081
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF3482FF)) }, "Option 3", "Blue"),
7182
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFFB21D)) }, "Option 4", "Yellow"),
7283
)
73-
val spinnerOptionSelected = remember { mutableStateOf(0) }
74-
val spinnerOptionSelectedRight = remember { mutableStateOf(1) }
75-
val spinnerOptionSelectedDialog = remember { mutableStateOf(2) }
76-
var miuixSuperCheckbox by remember { mutableStateOf("State: false") }
77-
var miuixSuperCheckboxState by remember { mutableStateOf(false) }
78-
var miuixSuperRightCheckbox by remember { mutableStateOf("false") }
79-
var miuixSuperRightCheckboxState by remember { mutableStateOf(false) }
80-
var miuixSuperSwitch by remember { mutableStateOf("false") }
81-
var miuixSuperSwitchState by remember { mutableStateOf(false) }
82-
var miuixSuperSwitchAnimState by remember { mutableStateOf(false) }
83-
8484
SmallTitle(text = "Basic")
8585
Card(
8686
modifier = Modifier
@@ -182,12 +182,12 @@ fun TextComponent() {
182182
horizontalArrangement = Arrangement.SpaceBetween
183183
) {
184184
Checkbox(
185-
checked = checkbox,
186-
onCheckedChange = { checkbox = it }
185+
checked = checkbox.value,
186+
onCheckedChange = { checkbox.value = it }
187187
)
188188
Checkbox(
189-
checked = checkboxTrue,
190-
onCheckedChange = { checkboxTrue = it },
189+
checked = checkboxTrue.value,
190+
onCheckedChange = { checkboxTrue.value = it },
191191
modifier = Modifier.padding(start = 8.dp)
192192
)
193193
Checkbox(
@@ -207,27 +207,27 @@ fun TextComponent() {
207207
SuperCheckbox(
208208
checkboxLocation = CheckboxLocation.Right,
209209
title = "Checkbox",
210-
checked = miuixSuperRightCheckboxState,
210+
checked = miuixSuperRightCheckboxState.value,
211211
rightActions = {
212212
Text(
213213
modifier = Modifier.padding(end = 10.dp),
214-
text = miuixSuperRightCheckbox,
214+
text = miuixSuperRightCheckbox.value,
215215
color = MiuixTheme.colorScheme.onSurfaceVariantActions
216216
)
217217
},
218218
onCheckedChange = {
219-
miuixSuperRightCheckboxState = it
220-
miuixSuperRightCheckbox = "$it"
219+
miuixSuperRightCheckboxState.value = it
220+
miuixSuperRightCheckbox.value = "$it"
221221
},
222222
)
223223

224224
SuperCheckbox(
225225
title = "Checkbox",
226-
summary = miuixSuperCheckbox,
227-
checked = miuixSuperCheckboxState,
226+
summary = miuixSuperCheckbox.value,
227+
checked = miuixSuperCheckboxState.value,
228228
onCheckedChange = {
229-
miuixSuperCheckboxState = it
230-
miuixSuperCheckbox = "State: $it"
229+
miuixSuperCheckboxState.value = it
230+
miuixSuperCheckbox.value = "State: $it"
231231
},
232232
)
233233

@@ -252,12 +252,12 @@ fun TextComponent() {
252252
horizontalArrangement = Arrangement.SpaceBetween
253253
) {
254254
Switch(
255-
checked = switch,
256-
onCheckedChange = { switch = it }
255+
checked = switch.value,
256+
onCheckedChange = { switch.value = it }
257257
)
258258
Switch(
259-
checked = switchTrue,
260-
onCheckedChange = { switchTrue = it },
259+
checked = switchTrue.value,
260+
onCheckedChange = { switchTrue.value = it },
261261
modifier = Modifier.padding(start = 6.dp)
262262
)
263263
Switch(
@@ -277,30 +277,30 @@ fun TextComponent() {
277277
SuperSwitch(
278278
title = "Switch",
279279
summary = "Click to expand a Switch",
280-
checked = miuixSuperSwitchAnimState,
280+
checked = miuixSuperSwitchAnimState.value,
281281
onCheckedChange = {
282-
miuixSuperSwitchAnimState = it
282+
miuixSuperSwitchAnimState.value = it
283283
},
284284
)
285285

286286
AnimatedVisibility(
287-
visible = miuixSuperSwitchAnimState,
287+
visible = miuixSuperSwitchAnimState.value,
288288
enter = fadeIn() + expandVertically(),
289289
exit = fadeOut() + shrinkVertically()
290290
) {
291291
SuperSwitch(
292292
title = "Switch",
293-
checked = miuixSuperSwitchState,
293+
checked = miuixSuperSwitchState.value,
294294
rightActions = {
295295
Text(
296296
modifier = Modifier.padding(end = 6.dp),
297-
text = miuixSuperSwitch,
297+
text = miuixSuperSwitch.value,
298298
color = MiuixTheme.colorScheme.onSurfaceVariantActions
299299
)
300300
},
301301
onCheckedChange = {
302-
miuixSuperSwitchState = it
303-
miuixSuperSwitch = "$it"
302+
miuixSuperSwitchState.value = it
303+
miuixSuperSwitch.value = "$it"
304304
},
305305
)
306306
}

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDialog.kt‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,10 @@ fun SuperDialog(
6767
defaultWindowInsetsPadding: Boolean = true,
6868
content: @Composable () -> Unit
6969
) {
70-
if (show.value) {
70+
if (!show.value) {
71+
dialogStates.remove(show)
72+
onDismissRequest?.invoke()
73+
} else {
7174
if (!dialogStates.contains(show)) dialogStates.add(show)
7275
LaunchedEffect(show.value) {
7376
if (show.value) {
@@ -82,7 +85,7 @@ fun SuperDialog(
8285
val paddingModifier = remember(outsideMargin) { Modifier.padding(horizontal = outsideMargin.width).padding(bottom = outsideMargin.height) }
8386
val roundedCorner by rememberUpdatedState(getRoundedCorner())
8487
val bottomCornerRadius by remember { derivedStateOf { if (roundedCorner != 0.dp) roundedCorner - outsideMargin.width else 32.dp } }
85-
val contentAlignment by rememberUpdatedState { derivedStateOf { if (windowHeight >= 480.dp && windowWidth >= 840.dp) Alignment.Center else Alignment.BottomCenter } }
88+
val contentAlignment by remember { derivedStateOf { if (windowHeight >= 480.dp && windowWidth >= 840.dp) Alignment.Center else Alignment.BottomCenter } }
8689

8790
BackHandler(enabled = show.value) {
8891
onDismissRequest?.invoke()
@@ -114,7 +117,7 @@ fun SuperDialog(
114117
.pointerInput(Unit) {
115118
detectTapGestures { /* Do nothing to consume the click */ }
116119
}
117-
.align(contentAlignment.invoke().value)
120+
.align(contentAlignment)
118121
.graphicsLayer(
119122
shape = SmoothRoundedCornerShape(bottomCornerRadius),
120123
clip = false

0 commit comments

Comments
 (0)