feat: Chiop 구현

yourssu · Jan 13, 2025 · 50874b4 · 50874b4
1 parent 2f4fd61
commit 50874b4
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 30 deletions.
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/ChipPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/ChipPreview.kt
@@ -23,8 +23,9 @@ fun ChipPreview() {
     HandyTheme {
         Row(
             horizontalArrangement = Arrangement.spacedBy(8.dp),
-            modifier = Modifier.padding(10.dp)
+            modifier = Modifier
                 .background(Color.White)
+                .padding(10.dp)
         ) {
             Column(
                 verticalArrangement = Arrangement.spacedBy(8.dp),
@@ -82,8 +83,10 @@ fun HorizontalChipPreview() {
         LazyRow(
             state = state,
             horizontalArrangement = Arrangement.spacedBy(8.dp),
-            modifier = Modifier.padding(10.dp)
+            modifier = Modifier
                 .background(Color.White)
+                .padding(10.dp)
+
         ) {
             item {
                 Chip(

diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt
@@ -2,6 +2,7 @@ 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
@@ -14,6 +15,7 @@ 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.*
@@ -35,31 +37,26 @@ enum class ChipState {
 
 @Composable
 fun Chip(
-    text: String = "",
     modifier: Modifier = Modifier,
+    text: String = "",
     chipState: ChipState = ChipState.Unselected,
     chipSize: ChipSize = ChipSize.Large,
-    leadingIcon: ImageVector? = HandyIcons.Line.InfoCircle,
-    trailingIcon: ImageVector? = HandyIcons.Line.Close,
-    chipOnClick: (() -> Unit)? = null,
-    leadingIconOnClick: (() -> Unit)? = null,
-    trailingIconOnClick: (() -> Unit)? = null
+    leadingIcon: ImageVector? = null,
+    trailingIcon: ImageVector? = null,
+    chipOnClick: (() -> Unit) = {},
+    leadingIconOnClick: (() -> Unit) = {},
+    trailingIconOnClick: (() -> Unit) = {}
 ) {
 
-    val backgroundColor = remember(chipState) {
-        when (chipState) {
-            ChipState.Unselected -> ColorGray100
-            ChipState.Selected -> ColorViolet100
-            ChipState.Disabled -> ColorGray50
-        }
+    val backgroundColor = when (chipState) {
+        ChipState.Unselected -> ColorGray100
+        ChipState.Selected -> ColorViolet100
+        ChipState.Disabled -> ColorGray50
     }
-
-    val textColor = remember(chipState) {
-        when (chipState) {
-            ChipState.Unselected -> ColorGray700
-            ChipState.Selected -> ColorViolet500
-            ChipState.Disabled -> ColorGray300
-        }
+    val textColor = when (chipState) {
+        ChipState.Unselected -> ColorGray700
+        ChipState.Selected -> ColorViolet500
+        ChipState.Disabled -> ColorGray300
     }
 
     val textStyle: HandyTextStyle =
@@ -72,40 +69,49 @@ fun Chip(
             .background(backgroundColor, shape = RoundedCornerShape(16.dp))
             .clickable(
                 enabled = chipState != ChipState.Disabled,
-                onClick = { chipOnClick?.invoke() })
+                onClick = { chipOnClick() })
             .padding(horizontal = 12.dp),
         contentAlignment = Alignment.Center
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(4.dp)
         ) {
-            if (leadingIcon != null)
+            leadingIcon?.let {
                 Icon(
                     leadingIcon,
                     tint = textColor,
                     iconSize = IconSize.XS,
                     modifier = Modifier.clickable(
                         enabled = chipState != ChipState.Disabled,
-                        onClick = { leadingIconOnClick?.invoke() })
+                        onClick = { leadingIconOnClick() },
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null
+                    )
                 )
+            }
 
             Text(
-                text = if (text.length < 10) text else text.take(9) + "...",
+                text = text,
                 color = textColor,
-                fontSize = 14.dp,
-                style = textStyle
+                style = textStyle,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
             )
 
-            if (trailingIcon != null)
+            trailingIcon?.let {
                 Icon(
                     trailingIcon,
                     tint = textColor,
                     iconSize = IconSize.XS,
                     modifier = Modifier.clickable(
                         enabled = chipState != ChipState.Disabled,
-                        onClick = { trailingIconOnClick?.invoke() })
+                        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
@@ -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)) }
+}
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
@@ -102,7 +102,7 @@ data class ColorScheme(
     val checkBoxUnselected: Color = ColorNeutralWhite,
     val checkBoxDisabled: Color = ColorGray200,
 
-    // com.yourssu.handy.compose.Chip
+    // Chip
     val chipSelected: Color = ColorViolet100,
     val chipUnselected: Color = ColorGray100,
     val chipDisabled: Color = ColorGray50,