-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathForm.kt
97 lines (93 loc) · 3.27 KB
/
Form.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
package gomoku.ui.shared.components
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import gomoku.domain.home.ButtonData
import pdm.gomoku.R
// Config
private val defaultFormPaddingHorizontal = 20.dp
private val defaultPaddingBetweenInputFields = 10.dp
private val defaultFooterPaddingTop = 30.dp
private val defaultFooterPaddingBottom = 20.dp
/**
* A generic form composable.
* @param title The title of the form.
* @param inputFieldsData The data of the input fields.
* @param formPaddingHorizontal The horizontal padding of the form.
* @param paddingBetweenInputFields The padding between the input fields.
* @param footerPaddingTop The footer top padding.
* @param footerPaddingBottom The footer bottom padding.
* @param footer The optional footer of the form, like a submit button.
* @param renderInputField The function that renders the input field for each input field data.
*/
@Composable
fun <R> Form(
title: String,
inputFieldsData: List<R>,
formPaddingHorizontal: Dp = defaultFormPaddingHorizontal,
paddingBetweenInputFields: Dp = defaultPaddingBetweenInputFields,
footerPaddingTop: Dp = defaultFooterPaddingTop,
footerPaddingBottom: Dp = defaultFooterPaddingBottom,
footer: @Composable (() -> Unit)? = null,
renderInputField: @Composable (R) -> Unit
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = formPaddingHorizontal),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
HeaderText(text = title)
inputFieldsData.forEach { inputFieldData ->
Spacer(modifier = Modifier.padding(paddingBetweenInputFields))
renderInputField(inputFieldData)
}
footer.let {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = footerPaddingTop, bottom = footerPaddingBottom),
horizontalArrangement = Arrangement.Center,
) {
it?.invoke()
}
}
}
}
@Preview
@Composable
private fun RegisterFormPreview() {
val inputFieldsData = listOf(
ButtonData("Find Match", R.drawable.play_button),
ButtonData("LeaderBoards", R.drawable.leaderboard)
)
Form(
title = "Introduce your data",
inputFieldsData = inputFieldsData,
footer = {
SubmitButton(
onButtonText = "Register",
onClick = { },
textColor = Color.Black
)
},
) { inputFieldData ->
InputTextField(
value = "value",
label = inputFieldData.label,
leadingIconId = inputFieldData.iconId,
onValueChange = {},
)
}
}