From be622bfb8aec086cf2a27d28ca829fd75cdce9a6 Mon Sep 17 00:00:00 2001 From: Jaesung Lee Date: Sat, 28 Sep 2024 12:35:22 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[Feat]=20=EA=B2=80=EC=83=89=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{FarmemeTextField.kt => TextField.kt} | 82 +++++++++++++++++++ .../src/main/res/drawable/ic_delete_24.xml | 20 ++--- 2 files changed, 92 insertions(+), 10 deletions(-) rename core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/{FarmemeTextField.kt => TextField.kt} (67%) 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/TextField.kt similarity index 67% rename from core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/FarmemeTextField.kt rename to core/designsystem/src/main/kotlin/team/ppac/designsystem/component/textfield/TextField.kt index 3c2e74f2..94f84231 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/TextField.kt @@ -10,6 +10,7 @@ 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.layout.size import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.KeyboardActions @@ -24,9 +25,84 @@ 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.graphics.SolidColor import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import team.ppac.designsystem.FarmemeTheme +import team.ppac.designsystem.foundation.FarmemeIcon +import team.ppac.designsystem.foundation.FarmemeRadius +import team.ppac.designsystem.util.extension.noRippleClickable + +@Composable +fun FarmemeSearchTextField( + modifier: Modifier = Modifier, + text: String, + onTextChanged: (String) -> Unit, + enabled: Boolean = true, + keyboardActions: KeyboardActions = KeyboardActions.Default, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, +) { + BasicTextField( + modifier = modifier, + value = text, + onValueChange = onTextChanged, + textStyle = FarmemeTheme.typography.body.large.medium.copy( + color = FarmemeTheme.textColor.primary + ), + enabled = enabled, + singleLine = true, + keyboardActions = keyboardActions, + keyboardOptions = keyboardOptions, + cursorBrush = SolidColor(FarmemeTheme.backgroundColor.brand), + interactionSource = interactionSource, + decorationBox = { innerTextField -> + Box( + modifier = Modifier + .fillMaxWidth() + .clip(FarmemeRadius.Radius10.shape) + .background( + color = FarmemeTheme.backgroundColor.assistive, + ) + .padding(vertical = 12.dp), + ) { + Row( + verticalAlignment = Alignment.CenterVertically + ) { + Spacer(modifier = Modifier.size(16.dp)) + FarmemeIcon.Search( + modifier = Modifier.size(20.dp), + tint = FarmemeTheme.iconColor.secondary + ) + Spacer(modifier = Modifier.size(12.dp)) + if (text.isBlank()) { + Text( + modifier = Modifier.fillMaxWidth(), + text = "찾고 싶은 밈 있어?", + style = FarmemeTheme.typography.body.large.medium.copy( + color = FarmemeTheme.textColor.tertiary + ) + ) + } + Box(modifier = Modifier.weight(1f)) { + innerTextField() + } + Spacer(modifier = Modifier.size(12.dp)) + Box(modifier = Modifier) { + FarmemeIcon.Delete( + modifier = Modifier + .size(20.dp) + .noRippleClickable( + onClick = { onTextChanged("") } + ), + ) + } + Spacer(modifier = Modifier.size(16.dp)) + } + } + } + ) +} @Composable fun FarmemeTextField( @@ -151,6 +227,12 @@ private fun Preview() { .background(Color.White) .padding(horizontal = 16.dp) ) { + FarmemeSearchTextField( + modifier = Modifier.fillMaxWidth(), + text = value, + onTextChanged = { value = it }, + ) + Spacer(modifier = Modifier.size(16.dp)) FarmemeTextField( modifier = Modifier.fillMaxWidth(), text = value, diff --git a/core/designsystem/src/main/res/drawable/ic_delete_24.xml b/core/designsystem/src/main/res/drawable/ic_delete_24.xml index c3a4fd41..e845416a 100644 --- a/core/designsystem/src/main/res/drawable/ic_delete_24.xml +++ b/core/designsystem/src/main/res/drawable/ic_delete_24.xml @@ -1,20 +1,20 @@ + android:width="20dp" + android:height="20dp" + android:viewportWidth="20" + android:viewportHeight="20"> + android:pathData="M10,10m-8.75,0a8.75,8.75 0,1 1,17.5 0a8.75,8.75 0,1 1,-17.5 0" + android:fillColor="#BDCAD4"/> From 987d4fa5b6e4ef668121da088ae29bed1787b9bf Mon Sep 17 00:00:00 2001 From: Jaesung Lee Date: Sat, 28 Sep 2024 13:17:33 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[Feat]=20=EA=B2=80=EC=83=89=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=ED=95=84=EB=93=9C=20=ED=83=91=EB=B0=94=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designsystem/component/toolbar/Toolbar.kt | 52 +++++++++++++++++-- 1 file changed, 49 insertions(+), 3 deletions(-) diff --git a/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/toolbar/Toolbar.kt b/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/toolbar/Toolbar.kt index f9d0580b..282af9cd 100644 --- a/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/toolbar/Toolbar.kt +++ b/core/designsystem/src/main/kotlin/team/ppac/designsystem/component/toolbar/Toolbar.kt @@ -1,9 +1,6 @@ -@file:OptIn(ExperimentalLayoutApi::class) - package team.ppac.designsystem.component.toolbar import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth @@ -12,15 +9,51 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.statusBarsPadding 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.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import team.ppac.designsystem.FarmemeTheme +import team.ppac.designsystem.component.textfield.FarmemeSearchTextField import team.ppac.designsystem.foundation.FarmemeIcon import team.ppac.designsystem.util.extension.noRippleClickable +@Composable +fun FarmemeSearchToolbar( + modifier: Modifier = Modifier, + text: String, + onTextChanged: (String) -> Unit, + navigationIcon: (@Composable () -> Unit)? = null, +) { + Row( + modifier = modifier + .padding( + horizontal = 20.dp, + vertical = 10.dp + ) + .statusBarsPadding() + .fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically + ) { + Box( + modifier = Modifier.size(20.dp) + ) { + navigationIcon?.invoke() + } + Spacer(modifier = Modifier.size(12.dp)) + FarmemeSearchTextField( + modifier = Modifier.fillMaxWidth(), + text = text, + onTextChanged = onTextChanged + ) + } +} + @Composable fun FarmemeActionToolBar(onClickActionIcon: () -> Unit) { FarmemeToolbar( @@ -87,6 +120,19 @@ internal fun FarmemeToolbar( } } +@Preview(showBackground = true) +@Composable +private fun PreviewSearchToolbar() { + var text by remember { mutableStateOf("") } + FarmemeSearchToolbar( + text = text, + onTextChanged = { text = it }, + navigationIcon = { + FarmemeIcon.Back() + } + ) +} + @Preview(showBackground = true) @Composable private fun PreviewBackTitleToolbar() {