토글 이모지 버튼 그룹 추가

channel-io · Aug 26, 2024 · 627a4a3 · 627a4a3
1 parent e6941b7
commit 627a4a3
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 0 deletions.
diff --git a/...n/java/io/channel/bezier/compose/component/toggle_emoji_button/BezierToggleEmojiButton.kt b/...n/java/io/channel/bezier/compose/component/toggle_emoji_button/BezierToggleEmojiButton.kt
@@ -16,6 +16,7 @@ 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.tooling.preview.Preview
@@ -62,6 +63,7 @@ fun BezierToggleEmojiButton(
                             },
                     )
                     .padding(12.dp),
+            contentAlignment = Alignment.Center,
     ) {
         BezierEmoji(
                 name = name,

diff --git a/...hannel/bezier/compose/component/toggle_emoji_button_group/BezierToggleEmojiButtonGroup.kt b/...hannel/bezier/compose/component/toggle_emoji_button_group/BezierToggleEmojiButtonGroup.kt
@@ -0,0 +1,89 @@
+package io.channel.bezier.compose.component.toggle_emoji_button_group
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.times
+import io.channel.bezier.BezierTheme
+import io.channel.bezier.compose.component.toggle_emoji_button.BezierToggleEmojiButton
+import io.channel.bezier.compose.component.toggle_emoji_button.properties.BezierToggleEmojiButtonVariant
+import io.channel.bezier.compose.component.toggle_emoji_button_group.property.BezierToggleEmojiButtonGroupFillDirectionType
+import io.channel.bezier.extension.thenIf
+
+@Composable
+fun BezierToggleEmojiButtonGroup(
+        emojis: List<String>,
+        type: BezierToggleEmojiButtonGroupFillDirectionType,
+        onEmojiClick: (String) -> Unit,
+        modifier: Modifier = Modifier,
+) {
+    val horizontalArrangement = when (type) {
+        BezierToggleEmojiButtonGroupFillDirectionType.Undefined -> Arrangement.spacedBy(6.dp, Alignment.CenterHorizontally)
+        BezierToggleEmojiButtonGroupFillDirectionType.Horizontal -> Arrangement.spacedBy(6.dp)
+        BezierToggleEmojiButtonGroupFillDirectionType.All -> Arrangement.spacedBy(6.dp)
+    }
+
+    BoxWithConstraints(
+            modifier = modifier,
+    ) {
+        val perWidth = (maxWidth - ((emojis.size - 1) * 6.dp)) / emojis.size
+
+        Row(
+                modifier = modifier,
+                horizontalArrangement = horizontalArrangement,
+        ) {
+            emojis.forEach { emoji ->
+                BezierToggleEmojiButton(
+                        selected = false,
+                        name = emoji,
+                        variant = BezierToggleEmojiButtonVariant.Primary,
+                        onClick = { onEmojiClick.invoke(emoji) },
+                        modifier = Modifier
+                                .thenIf(type == BezierToggleEmojiButtonGroupFillDirectionType.All) {
+                                    size(perWidth).weight(1F)
+                                }
+                                .thenIf(type == BezierToggleEmojiButtonGroupFillDirectionType.Horizontal) {
+                                    weight(1f)
+                                },
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BezierToggleEmojiButtonGroupPreview() {
+    BezierTheme {
+        Column(
+                verticalArrangement = Arrangement.spacedBy(10.dp),
+        ) {
+            BezierToggleEmojiButtonGroup(
+                    emojis = listOf("1", "2", "3", "4"),
+                    type = BezierToggleEmojiButtonGroupFillDirectionType.Undefined,
+                    onEmojiClick = {},
+                    modifier = Modifier.fillMaxWidth(),
+            )
+            BezierToggleEmojiButtonGroup(
+                    emojis = listOf("1", "2", "3", "4"),
+                    type = BezierToggleEmojiButtonGroupFillDirectionType.Horizontal,
+                    onEmojiClick = {},
+                    modifier = Modifier.fillMaxWidth(),
+            )
+            BezierToggleEmojiButtonGroup(
+                    emojis = listOf("1", "2", "3", "4"),
+                    type = BezierToggleEmojiButtonGroupFillDirectionType.All,
+                    onEmojiClick = {},
+                    modifier = Modifier.fillMaxWidth(),
+            )
+        }
+    }
+}
diff --git a/...onent/toggle_emoji_button_group/property/BezierToggleEmojiButtonGroupFillDirectionType.kt b/...onent/toggle_emoji_button_group/property/BezierToggleEmojiButtonGroupFillDirectionType.kt
@@ -0,0 +1,7 @@
+package io.channel.bezier.compose.component.toggle_emoji_button_group.property
+
+enum class BezierToggleEmojiButtonGroupFillDirectionType {
+    Undefined,
+    Horizontal,
+    All,
+}