Skip to content

Commit b847d6a

Browse files
YuKongAYuKongA
committed
library: Rebase Button Component
1 parent 8dd972e commit b847d6a

File tree

3 files changed

+189
-70
lines changed

3 files changed

+189
-70
lines changed

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@ import androidx.compose.ui.text.input.TextFieldValue
2222
import androidx.compose.ui.unit.DpSize
2323
import androidx.compose.ui.unit.dp
2424
import androidx.compose.ui.unit.sp
25-
import top.yukonga.miuix.kmp.basic.Button
25+
import top.yukonga.miuix.kmp.basic.ButtonDefaults
2626
import top.yukonga.miuix.kmp.basic.Card
2727
import top.yukonga.miuix.kmp.basic.Slider
2828
import top.yukonga.miuix.kmp.basic.SmallTitle
2929
import top.yukonga.miuix.kmp.basic.Text
30+
import top.yukonga.miuix.kmp.basic.TextButton
3031
import top.yukonga.miuix.kmp.basic.TextField
3132
import top.yukonga.miuix.kmp.theme.MiuixTheme
3233

@@ -49,23 +50,23 @@ fun OtherComponent(padding: PaddingValues) {
4950
.padding(bottom = 12.dp),
5051
horizontalArrangement = Arrangement.SpaceBetween
5152
) {
52-
Button(
53-
modifier = Modifier.weight(1f),
53+
TextButton(
5454
text = buttonText,
5555
onClick = {
5656
clickCount++
5757
buttonText = "Click: $clickCount"
58-
}
58+
},
59+
modifier = Modifier.weight(1f)
5960
)
6061
Spacer(Modifier.width(12.dp))
61-
Button(
62-
modifier = Modifier.weight(1f),
62+
TextButton(
6363
text = submitButtonText,
64-
submit = true,
6564
onClick = {
6665
submitClickCount++
6766
submitButtonText = "Click: $submitClickCount"
68-
}
67+
},
68+
modifier = Modifier.weight(1f),
69+
colors = ButtonDefaults.textButtonColorsPrimary()
6970
)
7071
}
7172

@@ -76,20 +77,19 @@ fun OtherComponent(padding: PaddingValues) {
7677
.padding(bottom = 12.dp),
7778
horizontalArrangement = Arrangement.SpaceBetween
7879
) {
79-
Button(
80-
modifier = Modifier.weight(1f),
80+
TextButton(
8181
text = "Disabled",
82-
submit = false,
83-
enabled = false,
84-
onClick = {}
82+
onClick = {},
83+
modifier = Modifier.weight(1f),
84+
enabled = false
8585
)
8686
Spacer(Modifier.width(12.dp))
87-
Button(
88-
modifier = Modifier.weight(1f),
87+
TextButton(
8988
text = "Disabled",
90-
submit = true,
89+
onClick = {},
9190
enabled = false,
92-
onClick = {}
91+
modifier = Modifier.weight(1f),
92+
colors = ButtonDefaults.textButtonColorsPrimary()
9393
)
9494
}
9595

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

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,14 @@ import androidx.compose.ui.Modifier
2525
import androidx.compose.ui.unit.dp
2626
import top.yukonga.miuix.kmp.basic.BasicComponent
2727
import top.yukonga.miuix.kmp.basic.Box
28-
import top.yukonga.miuix.kmp.basic.Button
28+
import top.yukonga.miuix.kmp.basic.ButtonDefaults
2929
import top.yukonga.miuix.kmp.basic.Card
3030
import top.yukonga.miuix.kmp.basic.Checkbox
3131
import top.yukonga.miuix.kmp.basic.Icon
3232
import top.yukonga.miuix.kmp.basic.SmallTitle
3333
import top.yukonga.miuix.kmp.basic.Switch
3434
import top.yukonga.miuix.kmp.basic.Text
35+
import top.yukonga.miuix.kmp.basic.TextButton
3536
import top.yukonga.miuix.kmp.basic.TextField
3637
import top.yukonga.miuix.kmp.extra.CheckboxLocation
3738
import top.yukonga.miuix.kmp.extra.SuperArrow
@@ -348,21 +349,21 @@ fun dialog(showDialog: MutableState<Boolean>) {
348349
Row(
349350
horizontalArrangement = Arrangement.SpaceBetween
350351
) {
351-
Button(
352-
modifier = Modifier.weight(1f),
352+
TextButton(
353353
text = "Cancel",
354354
onClick = {
355355
dismissDialog(showDialog)
356-
}
356+
},
357+
modifier = Modifier.weight(1f)
357358
)
358359
Spacer(Modifier.width(20.dp))
359-
Button(
360-
modifier = Modifier.weight(1f),
360+
TextButton(
361361
text = "Confirm",
362-
submit = true,
363362
onClick = {
364363
dismissDialog(showDialog)
365-
}
364+
},
365+
modifier = Modifier.weight(1f),
366+
colors = ButtonDefaults.textButtonColorsPrimary()
366367
)
367368
}
368369
}
@@ -402,21 +403,21 @@ fun dialog2(showDialog: MutableState<Boolean>) {
402403
Row(
403404
horizontalArrangement = Arrangement.SpaceBetween
404405
) {
405-
Button(
406-
modifier = Modifier.weight(1f),
406+
TextButton(
407407
text = "Cancel",
408408
onClick = {
409409
dismissDialog(showDialog)
410-
}
410+
},
411+
modifier = Modifier.weight(1f)
411412
)
412413
Spacer(Modifier.width(20.dp))
413-
Button(
414-
modifier = Modifier.weight(1f),
414+
TextButton(
415415
text = "Confirm",
416-
submit = true,
417416
onClick = {
418417
dismissDialog(showDialog)
419-
}
418+
},
419+
modifier = Modifier.weight(1f),
420+
colors = ButtonDefaults.textButtonColorsPrimary()
420421
)
421422
}
422423
}

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

Lines changed: 156 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,93 +2,211 @@ package top.yukonga.miuix.kmp.basic
22

33
import androidx.compose.foundation.layout.Arrangement
44
import androidx.compose.foundation.layout.Row
5+
import androidx.compose.foundation.layout.RowScope
56
import androidx.compose.foundation.layout.defaultMinSize
67
import androidx.compose.foundation.layout.padding
78
import androidx.compose.runtime.Composable
8-
import androidx.compose.runtime.getValue
9-
import androidx.compose.runtime.rememberUpdatedState
9+
import androidx.compose.runtime.Immutable
10+
import androidx.compose.runtime.Stable
1011
import androidx.compose.ui.Alignment
1112
import androidx.compose.ui.Modifier
1213
import androidx.compose.ui.graphics.Color
13-
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
14-
import androidx.compose.ui.platform.LocalHapticFeedback
1514
import androidx.compose.ui.semantics.Role
1615
import androidx.compose.ui.semantics.role
1716
import androidx.compose.ui.semantics.semantics
18-
import androidx.compose.ui.text.font.FontWeight
1917
import androidx.compose.ui.unit.Dp
18+
import androidx.compose.ui.unit.DpSize
2019
import androidx.compose.ui.unit.dp
2120
import top.yukonga.miuix.kmp.theme.MiuixTheme
2221
import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
2322

2423
/**
2524
* A [Button] component with Miuix style.
2625
*
27-
* @param text The text of the [Button].
2826
* @param onClick The callback when the [Button] is clicked.
2927
* @param modifier The modifier to be applied to the [Button].
3028
* @param enabled Whether the [Button] is enabled.
31-
* @param submit Whether the [Button] is a submit button.
29+
* @param colors The [ButtonColors] of the [Button].
3230
* @param cornerRadius The corner radius of the [Button].
3331
* @param minWidth The minimum width of the [Button].
3432
* @param minHeight The minimum height of the [Button].
33+
* @param insideMargin The margin inside the [Button].
34+
* @param content The [Composable] content of the [Button].
3535
*/
3636
@Composable
3737
fun Button(
38-
text: String,
3938
onClick: () -> Unit,
4039
modifier: Modifier = Modifier,
4140
enabled: Boolean = true,
42-
submit: Boolean = false,
43-
cornerRadius: Dp = 16.dp,
44-
minWidth: Dp = 58.dp,
45-
minHeight: Dp = 40.dp
41+
colors: ButtonColors = ButtonDefaults.buttonColors(),
42+
cornerRadius: Dp = ButtonDefaults.ConorRadius,
43+
minWidth: Dp = ButtonDefaults.MinWidth,
44+
minHeight: Dp = ButtonDefaults.MinHeight,
45+
insideMargin: DpSize = DpSize(16.dp, 16.dp),
46+
content: @Composable RowScope.() -> Unit
4647
) {
47-
val hapticFeedback = LocalHapticFeedback.current
48-
val color by rememberUpdatedState(getButtonColor(enabled, submit))
49-
val textColor by rememberUpdatedState(getTextColor(enabled, submit))
50-
5148
Surface(
5249
onClick = {
5350
onClick()
54-
hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
5551
},
5652
enabled = enabled,
5753
modifier = modifier.semantics { role = Role.Button },
5854
shape = SmoothRoundedCornerShape(cornerRadius),
59-
color = color
55+
color = colors.color(enabled)
6056
) {
6157
Row(
6258
Modifier
6359
.defaultMinSize(minWidth = minWidth, minHeight = minHeight)
64-
.padding(16.dp, 16.dp),
60+
.padding(insideMargin.width, insideMargin.height),
6561
horizontalArrangement = Arrangement.Center,
6662
verticalAlignment = Alignment.CenterVertically,
67-
) {
68-
Text(
69-
text = text,
70-
color = textColor,
71-
fontSize = MiuixTheme.textStyles.button.fontSize,
72-
fontWeight = FontWeight.Medium
73-
)
74-
}
63+
content = content
64+
)
7565
}
7666
}
7767

68+
/**
69+
* A [TextButton] component with Miuix style.
70+
*
71+
* @param text The text of the [TextButton].
72+
* @param onClick The callback when the [TextButton] is clicked.
73+
* @param modifier The modifier to be applied to the [TextButton].
74+
* @param enabled Whether the [TextButton] is enabled.
75+
* @param colors The [TextButtonColors] of the [TextButton].
76+
* @param cornerRadius The corner radius of the [TextButton].
77+
* @param minWidth The minimum width of the [TextButton].
78+
* @param minHeight The minimum height of the [TextButton].
79+
* @param insideMargin The margin inside the [TextButton].
80+
*/
7881
@Composable
79-
fun getButtonColor(enabled: Boolean, submit: Boolean): Color {
80-
return if (enabled) {
81-
if (submit) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.secondaryVariant
82-
} else {
83-
if (submit) MiuixTheme.colorScheme.disabledPrimaryButton else MiuixTheme.colorScheme.disabledSecondaryVariant
82+
fun TextButton(
83+
text: String,
84+
onClick: () -> Unit,
85+
modifier: Modifier = Modifier,
86+
enabled: Boolean = true,
87+
colors: TextButtonColors = ButtonDefaults.textButtonColors(),
88+
cornerRadius: Dp = ButtonDefaults.ConorRadius,
89+
minWidth: Dp = ButtonDefaults.MinWidth,
90+
minHeight: Dp = ButtonDefaults.MinHeight,
91+
insideMargin: DpSize = DpSize(16.dp, 16.dp),
92+
) {
93+
Surface(
94+
onClick = {
95+
onClick()
96+
},
97+
enabled = enabled,
98+
modifier = modifier.semantics { role = Role.Button },
99+
shape = SmoothRoundedCornerShape(cornerRadius),
100+
color = colors.color(enabled)
101+
) {
102+
Row(
103+
Modifier
104+
.defaultMinSize(minWidth = minWidth, minHeight = minHeight)
105+
.padding(insideMargin.width, insideMargin.height),
106+
horizontalArrangement = Arrangement.Center,
107+
verticalAlignment = Alignment.CenterVertically,
108+
content = {
109+
Text(
110+
text = text,
111+
color = colors.textColor(enabled),
112+
style = MiuixTheme.textStyles.button
113+
)
114+
}
115+
)
84116
}
85117
}
86118

87-
@Composable
88-
fun getTextColor(enabled: Boolean, submit: Boolean): Color {
89-
return if (enabled) {
90-
if (submit) MiuixTheme.colorScheme.onPrimary else MiuixTheme.colorScheme.onSecondaryVariant
91-
} else {
92-
if (submit) MiuixTheme.colorScheme.disabledOnPrimaryButton else MiuixTheme.colorScheme.disabledOnSecondaryVariant
119+
object ButtonDefaults {
120+
121+
/**
122+
* The default min width applied for all buttons. Note that you can override it by applying
123+
* Modifier.widthIn directly on the button composable.
124+
*/
125+
val MinWidth = 58.dp
126+
127+
/**
128+
* The default min height applied for all buttons. Note that you can override it by applying
129+
* Modifier.heightIn directly on the button composable.
130+
*/
131+
val MinHeight = 40.dp
132+
133+
/**
134+
* The default corner radius applied for all buttons.
135+
*/
136+
val ConorRadius = 16.dp
137+
138+
/**
139+
* The default [ButtonColors] for all buttons.
140+
*/
141+
@Composable
142+
fun buttonColors(
143+
color: Color = MiuixTheme.colorScheme.secondaryVariant,
144+
disabledColor: Color = MiuixTheme.colorScheme.disabledSecondaryVariant
145+
): ButtonColors {
146+
return ButtonColors(
147+
color = color,
148+
disabledColor = disabledColor
149+
)
93150
}
151+
152+
/**
153+
* The [ButtonColors] for primary buttons.
154+
*/
155+
@Composable
156+
fun buttonColorsPrimary() = ButtonColors(
157+
color = MiuixTheme.colorScheme.primary,
158+
disabledColor = MiuixTheme.colorScheme.disabledPrimaryButton
159+
)
160+
161+
/**
162+
* The default [TextButtonColors] for all text buttons.
163+
*/
164+
@Composable
165+
fun textButtonColors(
166+
color: Color = MiuixTheme.colorScheme.secondaryVariant,
167+
disabledColor: Color = MiuixTheme.colorScheme.disabledSecondaryVariant,
168+
textColor: Color = MiuixTheme.colorScheme.onSecondaryVariant,
169+
disabledTextColor: Color = MiuixTheme.colorScheme.disabledOnSecondaryVariant
170+
): TextButtonColors {
171+
return TextButtonColors(
172+
color = color,
173+
disabledColor = disabledColor,
174+
textColor = textColor,
175+
disabledTextColor = disabledTextColor
176+
)
177+
}
178+
179+
/**
180+
* The [TextButtonColors] for primary text buttons.
181+
*/
182+
@Composable
183+
fun textButtonColorsPrimary() = TextButtonColors(
184+
color = MiuixTheme.colorScheme.primary,
185+
disabledColor = MiuixTheme.colorScheme.disabledPrimaryButton,
186+
textColor = MiuixTheme.colorScheme.onPrimary,
187+
disabledTextColor = MiuixTheme.colorScheme.disabledOnPrimaryButton
188+
)
189+
}
190+
191+
@Immutable
192+
class ButtonColors(
193+
private val color: Color,
194+
private val disabledColor: Color
195+
) {
196+
@Stable
197+
internal fun color(enabled: Boolean): Color = if (enabled) color else disabledColor
198+
}
199+
200+
@Immutable
201+
class TextButtonColors(
202+
private val color: Color,
203+
private val disabledColor: Color,
204+
private val textColor: Color,
205+
private val disabledTextColor: Color
206+
) {
207+
@Stable
208+
internal fun color(enabled: Boolean): Color = if (enabled) color else disabledColor
209+
210+
@Stable
211+
internal fun textColor(enabled: Boolean): Color = if (enabled) textColor else disabledTextColor
94212
}

0 commit comments

Comments
 (0)