diff --git a/bezier/src/main/java/io/channel/bezier/compose/component/button/BezierButton.kt b/bezier/src/main/java/io/channel/bezier/compose/component/button/BezierButton.kt index a774e0bb..541f2dc0 100644 --- a/bezier/src/main/java/io/channel/bezier/compose/component/button/BezierButton.kt +++ b/bezier/src/main/java/io/channel/bezier/compose/component/button/BezierButton.kt @@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.Icon import androidx.compose.material.Text import androidx.compose.runtime.Composable @@ -20,16 +19,23 @@ import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.rememberVectorPainter +import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import io.channel.bezier.BezierIcons import io.channel.bezier.BezierTheme +import io.channel.bezier.compose.R +import io.channel.bezier.compose.component.loader.BezierLoader +import io.channel.bezier.compose.component.loader.properties.BezierLoaderSize +import io.channel.bezier.compose.component.loader.properties.BezierLoaderVariant +import io.channel.bezier.compose.component.avatar.BezierAvatar import io.channel.bezier.compose.component.button.properties.BezierButtonColor import io.channel.bezier.compose.component.button.properties.BezierButtonContent import io.channel.bezier.compose.component.button.properties.BezierButtonSize import io.channel.bezier.compose.component.button.properties.BezierButtonVariant import io.channel.bezier.extension.thenIf +import io.channel.bezier.extension.toEmojiPainter import io.channel.bezier.icon.ArrowRight import io.channel.bezier.icon.Plus @@ -62,10 +68,9 @@ fun BezierButton( contentAlignment = Alignment.Center, ) { if (isLoading) { - // TODO : 베지어 로더로 변경 예정 - CircularProgressIndicator( - modifier = Modifier.size(size.iconSize), - color = contentColor, + BezierLoader( + variant = BezierLoaderVariant.OnOverlay, + size = BezierLoaderSize.Small, ) } @@ -118,16 +123,15 @@ private fun BezierButtonContent( tint = contentColor, ) - // TODO : Not Implementation - is BezierButtonContent.Avatar -> Box( - modifier = Modifier, + is BezierButtonContent.Avatar -> BezierAvatar( + painter = content.painter, + size = size.avatarSize, ) - // TODO : Not Implementation is BezierButtonContent.Emoji -> Image( - modifier = Modifier.size(size.iconSize), - painter = content.painter, - contentDescription = null, + modifier = Modifier.size(size.emojiSize), + painter = content.name.toEmojiPainter, + contentDescription = content.name, ) } } @@ -201,6 +205,22 @@ private fun BezierButtonOnlyTextPreview() { } } +@Composable +@Preview(showBackground = true) +private fun BezierButtonOtherContentsPreview() { + BezierTheme { + BezierButton( + text = "Label", + size = BezierButtonSize.Medium, + variant = BezierButtonVariant.Primary, + color = BezierButtonColor.Blue, + onClick = { }, + prefixContent = BezierButtonContent.Avatar(painterResource(id = R.drawable.unknown)), + suffixContent = BezierButtonContent.Emoji("smile") + ) + } +} + @Composable @Preview(showBackground = true) private fun BezierButtonLoadingPreview() { diff --git a/bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonContent.kt b/bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonContent.kt index 095a8a30..f74b4dad 100644 --- a/bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonContent.kt +++ b/bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonContent.kt @@ -1,12 +1,35 @@ package io.channel.bezier.compose.component.button.properties +import androidx.compose.runtime.Composable import androidx.compose.runtime.Stable import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.res.painterResource +import coil.compose.rememberAsyncImagePainter import io.channel.bezier.BezierIcon +import io.channel.bezier.compose.R @Stable sealed interface BezierButtonContent { data class Icon(val icon: BezierIcon) : BezierButtonContent - data class Avatar(val painter: Painter) : BezierButtonContent - data class Emoji(val painter: Painter) : BezierButtonContent + class Avatar : BezierButtonContent { + private val _painter: @Composable () -> Painter + val painter: Painter + @Composable + get() = _painter() + + constructor(url: String, error: Painter? = null) { + _painter = { + rememberAsyncImagePainter( + model = url, + error = error ?: painterResource(id = R.drawable.unknown), + ) + } + } + + constructor(painter: Painter) { + _painter = { painter } + } + } + + data class Emoji(val name: String) : BezierButtonContent } diff --git a/bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonSize.kt b/bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonSize.kt index 307e97f3..2676caea 100644 --- a/bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonSize.kt +++ b/bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonSize.kt @@ -6,6 +6,7 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import io.channel.bezier.BezierTheme +import io.channel.bezier.compose.component.avatar.properties.BezierAvatarSize enum class BezierButtonSize( internal val textStyle: @Composable () -> TextStyle, @@ -13,6 +14,8 @@ enum class BezierButtonSize( internal val containerPadding: PaddingValues, internal val textPadding: PaddingValues, internal val iconSize: Dp, + internal val emojiSize: Dp, + internal val avatarSize: BezierAvatarSize, ) { XSmall( textStyle = { BezierTheme.typography.caption2SemiBold }, @@ -20,6 +23,8 @@ enum class BezierButtonSize( containerPadding = PaddingValues(horizontal = 6.dp, vertical = 3.dp), textPadding = PaddingValues(horizontal = 3.dp, vertical = 0.dp), iconSize = 16.dp, + emojiSize = 16.dp, + avatarSize = BezierAvatarSize.Size16, ), Small( textStyle = { BezierTheme.typography.caption1SemiBold }, @@ -27,6 +32,8 @@ enum class BezierButtonSize( containerPadding = PaddingValues(horizontal = 8.dp, vertical = 6.dp), textPadding = PaddingValues(horizontal = 4.dp, vertical = 1.dp), iconSize = 16.dp, + emojiSize = 16.dp, + avatarSize = BezierAvatarSize.Size16, ), Medium( textStyle = { BezierTheme.typography.body2SemiBold }, @@ -34,6 +41,8 @@ enum class BezierButtonSize( containerPadding = PaddingValues(horizontal = 12.dp, vertical = 9.dp), textPadding = PaddingValues(horizontal = 4.dp, vertical = 0.dp), iconSize = 20.dp, + emojiSize = 20.dp, + avatarSize = BezierAvatarSize.Size20, ), Large( textStyle = { BezierTheme.typography.body1SemiBold }, @@ -41,6 +50,8 @@ enum class BezierButtonSize( containerPadding = PaddingValues(horizontal = 14.dp, vertical = 11.dp), textPadding = PaddingValues(horizontal = 5.dp, vertical = 1.dp), iconSize = 20.dp, + emojiSize = 20.dp, + avatarSize = BezierAvatarSize.Size20, ), XLarge( textStyle = { BezierTheme.typography.title2SemiBold }, @@ -48,5 +59,7 @@ enum class BezierButtonSize( containerPadding = PaddingValues(horizontal = 16.dp, vertical = 15.dp), textPadding = PaddingValues(horizontal = 6.dp, vertical = 0.dp), iconSize = 24.dp, + emojiSize = 24.dp, + avatarSize = BezierAvatarSize.Size24, ), } diff --git a/bezier/src/main/java/io/channel/bezier/extension/EmojiExtensions.kt b/bezier/src/main/java/io/channel/bezier/extension/EmojiExtensions.kt index f8a65d18..0bc4a79c 100644 --- a/bezier/src/main/java/io/channel/bezier/extension/EmojiExtensions.kt +++ b/bezier/src/main/java/io/channel/bezier/extension/EmojiExtensions.kt @@ -2,11 +2,19 @@ package io.channel.bezier.extension import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.graphics.vector.rememberVectorPainter +import androidx.compose.ui.platform.LocalInspectionMode import coil.compose.rememberAsyncImagePainter +import io.channel.bezier.BezierIcons +import io.channel.bezier.icon.FaceSmile import java.net.URLEncoder private const val emojiUrl = "https://cf.channel.io/asset/emoji/images/80/%s.png" internal val String.toEmojiPainter: Painter @Composable - get() = rememberAsyncImagePainter(model = emojiUrl.format(URLEncoder.encode(this, "UTF-8"))) + get() = if (LocalInspectionMode.current) { + rememberVectorPainter(image = BezierIcons.FaceSmile.imageVector) + } else { + rememberAsyncImagePainter(model = emojiUrl.format(URLEncoder.encode(this, "UTF-8"))) + }