From 04100d8648be1b5d238e7e758d1243b13a1c34b4 Mon Sep 17 00:00:00 2001 From: minjun011026 Date: Tue, 31 Dec 2024 15:49:01 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20Chip=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat: Chip 구현 feat: Chip 구현 feat: Chip 구현 feat: Chip 구현 --- .../com/yourssu/handy/demo/ChipPreview.kt | 121 ++++++++++++++++++ .../kotlin/com/yourssu/handy/compose/Chip.kt | 117 +++++++++++++++++ .../com/yourssu/handy/compose/SearchBar.kt | 26 ++++ 3 files changed, 264 insertions(+) create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/ChipPreview.kt create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/SearchBar.kt diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/ChipPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/ChipPreview.kt new file mode 100644 index 00000000..5f788d33 --- /dev/null +++ b/app/src/main/kotlin/com/yourssu/handy/demo/ChipPreview.kt @@ -0,0 +1,121 @@ +package com.yourssu.handy.demo + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.runtime.Composable +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 com.yourssu.handy.compose.Chip +import com.yourssu.handy.compose.ChipSize +import com.yourssu.handy.compose.ChipState +import com.yourssu.handy.compose.HandyTheme + +@Preview +@Composable +fun ChipPreview() { + HandyTheme { + Row( + horizontalArrangement = Arrangement.spacedBy(8.dp), + modifier = Modifier + .background(Color.White) + .padding(10.dp) + ) { + Column( + verticalArrangement = Arrangement.spacedBy(8.dp), + modifier = Modifier.padding(16.dp) + ) { + Chip( + text = "Unselected", + chipState = ChipState.Unselected, + chipSize = ChipSize.Large + ) + + Chip( + text = "Selected", + chipState = ChipState.Selected, + chipSize = ChipSize.Large + ) + + Chip( + text = "Disabled", + chipState = ChipState.Disabled, + chipSize = ChipSize.Large + ) + } + Column( + verticalArrangement = Arrangement.spacedBy(8.dp), + modifier = Modifier.padding(16.dp) + ) { + Chip( + text = "Unselected", + chipState = ChipState.Unselected, + chipSize = ChipSize.Small + ) + + Chip( + text = "Selected", + chipState = ChipState.Selected, + chipSize = ChipSize.Small + ) + + Chip( + text = "Disabled", + chipState = ChipState.Disabled, + chipSize = ChipSize.Small + ) + } + } + } +} + +@Preview +@Composable +fun HorizontalChipPreview() { + HandyTheme { + val state = rememberLazyListState(initialFirstVisibleItemIndex = 2) + LazyRow( + state = state, + horizontalArrangement = Arrangement.spacedBy(8.dp), + modifier = Modifier + .background(Color.White) + .padding(10.dp) + + ) { + item { + Chip( + text = "Chip1", + chipState = ChipState.Unselected, + chipSize = ChipSize.Large + ) + } + item { + Chip( + text = "Chip2", + chipState = ChipState.Selected, + chipSize = ChipSize.Large + ) + } + item { + Chip( + text = "Chip3", + chipState = ChipState.Disabled, + chipSize = ChipSize.Large + ) + } + item { + Chip( + text = "LongNameChip", + chipState = ChipState.Unselected, + chipSize = ChipSize.Large + ) + } + } + } +} \ No newline at end of file diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt new file mode 100644 index 00000000..3cd82213 --- /dev/null +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt @@ -0,0 +1,117 @@ +package com.yourssu.handy.compose + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentWidth +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.foundation.* +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.line.* + +enum class ChipSize( + internal val chipHeight: Dp +) { + Large(32.dp), + Small(24.dp) +} + +enum class ChipState { + Unselected, + Selected, + Disabled +} + +@Composable +fun Chip( + modifier: Modifier = Modifier, + text: String = "", + chipState: ChipState = ChipState.Unselected, + chipSize: ChipSize = ChipSize.Large, + leadingIcon: ImageVector? = null, + trailingIcon: ImageVector? = null, + chipOnClick: (() -> Unit) = {}, + leadingIconOnClick: (() -> Unit) = {}, + trailingIconOnClick: (() -> Unit) = {} +) { + + val backgroundColor = when (chipState) { + ChipState.Unselected -> ColorGray100 + ChipState.Selected -> ColorViolet100 + ChipState.Disabled -> ColorGray50 + } + val textColor = when (chipState) { + ChipState.Unselected -> ColorGray700 + ChipState.Selected -> ColorViolet500 + ChipState.Disabled -> ColorGray300 + } + + val textStyle: HandyTextStyle = + if (chipState == ChipState.Selected) HandyTypography.B3Sb14 else HandyTypography.B3Rg14 + + Box( + modifier = modifier + .wrapContentWidth(unbounded = true) + .height(chipSize.chipHeight) + .background(backgroundColor, shape = RoundedCornerShape(16.dp)) + .clickable( + enabled = chipState != ChipState.Disabled, + onClick = { chipOnClick() }) + .padding(horizontal = 12.dp), + contentAlignment = Alignment.Center + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(4.dp) + ) { + leadingIcon?.let { + Icon( + leadingIcon, + tint = textColor, + iconSize = IconSize.XS, + modifier = Modifier.clickable( + enabled = chipState != ChipState.Disabled, + onClick = { leadingIconOnClick() }, + interactionSource = remember { MutableInteractionSource() }, + indication = null + ) + ) + } + + Text( + text = text, + color = textColor, + style = textStyle, + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + + trailingIcon?.let { + Icon( + trailingIcon, + tint = textColor, + iconSize = IconSize.XS, + modifier = Modifier.clickable( + enabled = chipState != ChipState.Disabled, + onClick = { trailingIconOnClick() }, + interactionSource = remember { MutableInteractionSource() }, + indication = null + ) + ) + } + } + } +} diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/SearchBar.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/SearchBar.kt new file mode 100644 index 00000000..3618d5bf --- /dev/null +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/SearchBar.kt @@ -0,0 +1,26 @@ +package com.yourssu.handy.compose + +import androidx.compose.foundation.layout.Row +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.Modifier +import androidx.compose.ui.text.input.TextFieldValue + +enum class SearchBarState { + Inactive, + Focused, + Typing, + Completed +} + +@Composable +fun SearchBar( + modifier: Modifier = Modifier, + text : String, + onTextChange : (String) -> Unit +){ + var searchText by remember { mutableStateOf(TextFieldValue(text)) } +} \ No newline at end of file From 08cbfd85c8b0cf32763bdb4a695a50fc385442de Mon Sep 17 00:00:00 2001 From: minjun011026 Date: Thu, 16 Jan 2025 12:00:36 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20Chip=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt index 3cd82213..a607991b 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt @@ -92,11 +92,10 @@ fun Chip( } Text( - text = text, + text = if (text.length < 10) text else text.take(9) + "...", color = textColor, - style = textStyle, - maxLines = 1, - overflow = TextOverflow.Ellipsis + fontSize = 14.dp, + style = textStyle ) trailingIcon?.let {