Skip to content

PLASMA-7140: Motion API was added in Badge and IconBadge #761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SerraMorec wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

PLASMA-7140: Motion API was added in Badge and IconBadge #761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 98 additions & 29 deletions sdds-core/uikit-compose/src/main/kotlin/com/sdds/compose/uikit/Badge.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,21 @@
package com.sdds.compose.uikit

import androidx.compose.foundation.interaction.InteractionSource
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.SolidColor
import com.sdds.compose.uikit.interactions.getValue
import com.sdds.compose.uikit.internal.common.surface
import com.sdds.compose.uikit.internal.icontext.BaseIconText
import com.sdds.compose.uikit.motion.Motion
import com.sdds.compose.uikit.motion.components.badge.BadgeMotionStyle
import com.sdds.compose.uikit.motion.components.badge.IconBadgeMotionStyle
import com.sdds.compose.uikit.motion.components.badge.rememberBadgeMotion
import com.sdds.compose.uikit.motion.components.badge.rememberIconBadgeMotion
import com.sdds.compose.uikit.motion.getBrushAsState
import com.sdds.compose.uikit.motion.getTextStyleAsState
import com.sdds.compose.uikit.motion.rememberMotionContext

/**
* Компонент Badge с текстом и иконкой
Expand All @@ -17,6 +26,7 @@ import com.sdds.compose.uikit.internal.icontext.BaseIconText
* @param startContent контент в начале
* @param endContent контент в конце
* @param interactionSource источник взаимодействий
* @param motion объект анимаций
*/
@Composable
fun Badge(
Expand All @@ -26,21 +36,30 @@ fun Badge(
startContent: (@Composable () -> Unit)? = null,
endContent: (@Composable () -> Unit)? = null,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
motion: Motion<BadgeMotionStyle> = rememberBadgeMotion(
motionContext = rememberMotionContext(interactionSource),
),
) {
val labelStyle = style.labelStyle
val dimens = style.dimensions.toDimensionsSet()
val colors = style.colors.toColorsSet()
val background = style.colors.backgroundColor.colorForInteractionAsState(interactionSource)
val labelStyle = style.labelStyles.getTextStyleAsState(
motion.context,
motion.style.labelStyle,
)
val dimens = style.dimensions.toDimensionsSet(interactionSource)
val colors = style.colors.toBadgeColorsSet(motion)
val background = style.colors.backgroundBrush.getBrushAsState(
motion.context,
motion.style.backgroundColor,
)
BaseIconText(
modifier = modifier.surface(
shape = style.shape,
backgroundColor = { SolidColor(background.value) },
backgroundColor = { background.value },
interactionSource = interactionSource,
),
dimensionsSet = dimens,
colorsSet = colors,
labelContent = label,
labelStyle = labelStyle,
labelStyle = labelStyle.value,
startContent = startContent,
endContent = endContent,
interactionSource = interactionSource,
Expand All @@ -56,6 +75,7 @@ fun Badge(
* @param startContent контент в начале
* @param endContent контент в конце
* @param interactionSource источник взаимодействий
* @param motion объект анимаций
*/
@Composable
fun Badge(
Expand All @@ -65,14 +85,20 @@ fun Badge(
startContent: (@Composable () -> Unit)? = null,
endContent: (@Composable () -> Unit)? = null,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
motion: Motion<BadgeMotionStyle> = rememberBadgeMotion(
motionContext = rememberMotionContext(interactionSource),
),
) {
val dimens = style.dimensions.toDimensionsSet()
val colors = style.colors.toColorsSet()
val background = style.colors.backgroundColor.colorForInteractionAsState(interactionSource)
val dimens = style.dimensions.toDimensionsSet(interactionSource)
val colors = style.colors.toBadgeColorsSet(motion)
val background = style.colors.backgroundBrush.getBrushAsState(
motion.context,
motion.style.backgroundColor,
)
BaseIconText(
modifier = modifier.surface(
shape = style.shape,
backgroundColor = { SolidColor(background.value) },
backgroundColor = { background.value },
interactionSource = interactionSource,
),
dimensionsSet = dimens,
Expand All @@ -92,21 +118,28 @@ fun Badge(
* @param style стиль компонента
* @param content контент (иконка)
* @param interactionSource источник взаимодействий
* @param motion объект анимаций
*/
@Composable
fun IconBadge(
modifier: Modifier = Modifier,
style: BadgeStyle = LocalIconBadgeStyle.current,
content: (@Composable () -> Unit)? = null,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
motion: Motion<IconBadgeMotionStyle> = rememberIconBadgeMotion(
motionContext = rememberMotionContext(interactionSource),
),
) {
val dimens = style.dimensions.toDimensionsSet()
val colors = style.colors.toColorsSet()
val background = style.colors.backgroundColor.colorForInteractionAsState(interactionSource)
val dimens = style.dimensions.toDimensionsSet(interactionSource)
val colors = style.colors.toIconBadgeColorsSet(motion)
val background = style.colors.backgroundBrush.getBrushAsState(
motion.context,
motion.style.backgroundColor,
)
BaseIconText(
modifier = modifier.surface(
shape = style.shape,
backgroundColor = { SolidColor(background.value) },
backgroundColor = { background.value },
interactionSource = interactionSource,
),
dimensionsSet = dimens,
Expand All @@ -116,23 +149,59 @@ fun IconBadge(
)
}

internal fun BadgeDimensions.toDimensionsSet(): BaseIconText.Dimensions {
@Composable
internal fun BadgeDimensions.toDimensionsSet(
interactionSource: InteractionSource,
): BaseIconText.Dimensions {
// В будущем нужно будет получить из BadgeMotionStyle
// Dp values и прокинуть их в маппер
return BaseIconText.Dimensions(
height = this.height,
endContentSize = this.endContentSize,
startContentSize = this.startContentSize,
endContentMargin = this.endContentMargin,
startContentMargin = this.startContentMargin,
endPadding = this.endPadding,
startPadding = this.startPadding,
height = this.heightValues.getValue(interactionSource),
endContentSize = this.endContentSizeValues.getValue(interactionSource),
startContentSize = this.startContentSizeValues.getValue(interactionSource),
endContentMargin = this.endContentMarginValues.getValue(interactionSource),
startContentMargin = this.startContentMarginValues.getValue(interactionSource),
endPadding = this.endPaddingValues,
startPadding = this.startPaddingValues,
)
}

internal fun BadgeColors.toColorsSet(): BaseIconText.Colors {
return BaseIconText.Colors(
contentColor = this.contentColor,
labelColor = this.labelColor,
startContentColor = this.startContentColor,
endContentColor = this.endContentColor,
@Composable
internal fun BadgeColors.toBadgeColorsSet(
motion: Motion<BadgeMotionStyle>,
): BaseIconText.Brushes {
return BaseIconText.Brushes(
contentBrush = this.contentBrush.getBrushAsState(
motion.context,
motion.style.contentColor,
).value,
labelBrush = this.labelBrush.getBrushAsState(
motion.context,
motion.style.labelColor,
).value,
startContentBrush = this.startContentBrush.getBrushAsState(
motion.context,
motion.style.startContentColor,
).value,
endContentBrush = this.endContentBrush.getBrushAsState(
motion.context,
motion.style.endContentColor,
).value,
)
}

@Composable
internal fun BadgeColors.toIconBadgeColorsSet(
motion: Motion<IconBadgeMotionStyle>,
): BaseIconText.Brushes {
return BaseIconText.Brushes(
contentBrush = this.startContentBrush.getBrushAsState(
motion.context,
motion.style.startContentColor,
).value,
startContentBrush = this.startContentBrush.getBrushAsState(
motion.context,
motion.style.startContentColor,
).value,
)
}
Loading
Loading