From 62d76e2a6296b1b0549d08b301eb10af00abaa88 Mon Sep 17 00:00:00 2001 From: evergreen Date: Tue, 24 Sep 2024 22:24:58 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[Feat]=20=ED=85=8D=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=ED=95=84=EB=93=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/textfield/FarmemeTextField.kt | 183 ++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/FarmemeTextField.kt diff --git a/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/FarmemeTextField.kt b/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/FarmemeTextField.kt new file mode 100644 index 00000000..42444301 --- /dev/null +++ b/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/FarmemeTextField.kt @@ -0,0 +1,183 @@ +package team.ppac.designsystem.component.textfield + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import team.ppac.designsystem.FarmemeTheme + +@Composable +fun FarmemeTextField( + modifier: Modifier = Modifier, + text: String, + placeholder: String = "", + trailingContent: @Composable () -> Unit = {}, + onTextChanged: (String) -> Unit, + enabled: Boolean = true, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions.Default, +) { + BasicTextField( + modifier = modifier, + value = text, + onValueChange = onTextChanged, + enabled = enabled, + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + singleLine = true, + decorationBox = { innerTextField -> + Box( + modifier = Modifier + .height(46.dp) + .fillMaxWidth() + .clip(RoundedCornerShape(10.dp)) + .background(color = FarmemeTheme.backgroundColor.assistive) + .padding( + horizontal = 16.dp, + vertical = 14.dp, + ), + ) { + if (text.isBlank()) { + Text( + text = placeholder, + style = FarmemeTheme.typography.body.large.medium.copy( + color = FarmemeTheme.textColor.assistive + ) + ) + } + Row(verticalAlignment = Alignment.CenterVertically) { + Box(modifier = Modifier.weight(1f)) { + innerTextField() + } + Spacer(modifier = Modifier.padding(start = 8.dp)) + Box(modifier = Modifier.align(Alignment.Bottom)) { + trailingContent() + } + } + } + } + ) +} + +@Composable +fun FarmemeTextArea( + modifier: Modifier = Modifier, + text: String, + placeholder: String = "", + trailingContent: @Composable () -> Unit = {}, + onTextChanged: (String) -> Unit = {}, + enabled: Boolean = true, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions.Default, + singleLine: Boolean = false, + maxLines: Int = Int.MAX_VALUE, +) { + BasicTextField( + modifier = modifier, + value = text, + onValueChange = onTextChanged, + enabled = enabled, + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + singleLine = singleLine, + maxLines = maxLines, + decorationBox = { innerTextField -> + Box( + modifier = Modifier + .height(82.dp) + .fillMaxWidth() + .clip(RoundedCornerShape(10.dp)) + .background(color = FarmemeTheme.backgroundColor.assistive) + .padding( + horizontal = 16.dp, + vertical = 14.dp, + ), + ) { + if (text.isBlank()) { + Text( + modifier = Modifier.align(Alignment.TopStart), + text = placeholder, + style = FarmemeTheme.typography.body.large.medium.copy( + color = FarmemeTheme.textColor.assistive + ) + ) + } + Row(modifier = Modifier.matchParentSize()) { + Box(modifier = Modifier.weight(1f)) { + innerTextField() + } + Box(modifier = Modifier.align(Alignment.Bottom)) { + trailingContent() + } + } + } + } + ) +} + +@Composable +@Preview +private fun Preview() { + var value by remember { mutableStateOf("") } + Column( + modifier = Modifier + .fillMaxSize() + .background(Color.White) + .padding(horizontal = 16.dp) + ) { + FarmemeTextField( + modifier = Modifier.fillMaxWidth(), + text = value, + placeholder = "예) 러키비키잖아", + onTextChanged = { + value = it + }, + trailingContent = { + Text( + text = "${value.length} / 10", + style = FarmemeTheme.typography.body.large.medium.copy( + color = FarmemeTheme.textColor.assistive + ) + ) + } + ) + Spacer(modifier = Modifier.padding(top = 16.dp)) + FarmemeTextArea( + modifier = Modifier.fillMaxWidth(), + text = value, + onTextChanged = { + value = it + }, + placeholder = "예) 무한도전, 핀터레스트", + trailingContent = { + Text( + text = "${value.length} / 20", + style = FarmemeTheme.typography.body.large.medium.copy( + color = FarmemeTheme.textColor.assistive + ) + ) + } + ) + } +} \ No newline at end of file From 108bf74d4e0daa87c6b7fcedb476a4a532375639 Mon Sep 17 00:00:00 2001 From: evergreen Date: Thu, 26 Sep 2024 22:58:29 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[Refactor]=20@Jasunglee=20@ze-zeh=20?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/textfield/FarmemeTextField.kt | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/FarmemeTextField.kt b/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/FarmemeTextField.kt index 42444301..3c2e74f2 100644 --- a/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/FarmemeTextField.kt +++ b/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/FarmemeTextField.kt @@ -1,6 +1,7 @@ package team.ppac.designsystem.component.textfield import androidx.compose.foundation.background +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -32,11 +33,12 @@ fun FarmemeTextField( modifier: Modifier = Modifier, text: String, placeholder: String = "", - trailingContent: @Composable () -> Unit = {}, - onTextChanged: (String) -> Unit, enabled: Boolean = true, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, + onTextChanged: (String) -> Unit, + trailingContent: @Composable () -> Unit = {}, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, ) { BasicTextField( modifier = modifier, @@ -46,6 +48,7 @@ fun FarmemeTextField( keyboardOptions = keyboardOptions, keyboardActions = keyboardActions, singleLine = true, + interactionSource = interactionSource, decorationBox = { innerTextField -> Box( modifier = Modifier @@ -85,13 +88,14 @@ fun FarmemeTextArea( modifier: Modifier = Modifier, text: String, placeholder: String = "", - trailingContent: @Composable () -> Unit = {}, - onTextChanged: (String) -> Unit = {}, enabled: Boolean = true, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, singleLine: Boolean = false, maxLines: Int = Int.MAX_VALUE, + onTextChanged: (String) -> Unit = {}, + trailingContent: @Composable () -> Unit = {}, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, ) { BasicTextField( modifier = modifier, @@ -102,6 +106,7 @@ fun FarmemeTextArea( keyboardActions = keyboardActions, singleLine = singleLine, maxLines = maxLines, + interactionSource = interactionSource, decorationBox = { innerTextField -> Box( modifier = Modifier