Skip to content

Commit

Permalink
DON-800 Calendar day cell animations (#2105)
Browse files Browse the repository at this point in the history 
* DON-800 Add Crossfade to BpkCalendarDayCell

* DON-800 Do not select spaces between months
  • Loading branch information
@henrik-sky
henrik-sky authored Oct 4, 2024
1 parent a8f4d8f commit 11893e2
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 90 deletions.
162 changes: 83 additions & 79 deletions ...e/src/main/kotlin/net/skyscanner/backpack/compose/calendar/internal/BpkCalendarDayCell.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@

package net.skyscanner.backpack.compose.calendar.internal

import androidx.compose.animation.Crossfade
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
Expand Down Expand Up @@ -65,94 +66,97 @@ internal fun BpkCalendarDayCell(
onClick: (CalendarCell.Day) -> Unit,
) {

val selection = model.selection
val inactive = model.inactive

val status = model.info.status
val style = model.info.style
val label = model.info.label

Column(
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier
.padding(bottom = BpkSpacing.Lg)
.clickable(
indication = null,
enabled = !inactive,
onClick = { onClick(model) },
onClickLabel = model.onClickLabel,
interactionSource = remember { MutableInteractionSource() },
)
.semantics {
if (model.stateDescription != null) {
stateDescription = model.stateDescription!!
} else {
selected = selection != null && selection != Selection.Middle
}
},
) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxWidth()
.cellSelectionBackground(
surfaceSubtle = BpkTheme.colors.surfaceSubtle,
selection = selection,
),
) {
Crossfade(model, label = "Day cell selection transition") { mModel ->
val selection = mModel.selection
val inactive = mModel.inactive

Spacer(
Modifier
.size(BpkCalendarSizes.SelectionHeight)
.cellDayBackground(
coreAccent = BpkTheme.colors.coreAccent,
val status = mModel.info.status
val style = mModel.info.style
val label = mModel.info.label

Column(
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier
.padding(bottom = BpkSpacing.Lg)
.clickable(
indication = null,
enabled = !inactive,
onClick = { onClick(mModel) },
onClickLabel = mModel.onClickLabel,
interactionSource = remember { MutableInteractionSource() },
)
.semantics {
if (mModel.stateDescription != null) {
stateDescription = mModel.stateDescription!!
} else {
selected = selection != null && selection != Selection.Middle
}
},
) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxWidth()
.cellSelectionBackground(
surfaceSubtle = BpkTheme.colors.surfaceSubtle,
selection = selection,
),
)
) {

BpkText(
text = model.text.toString(),
modifier = Modifier.semantics {
contentDescription = model.contentDescription
},
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = BpkTheme.typography.label1,
color = dateColor(selection, status, inactive, style),
)
}
Spacer(
Modifier
.size(BpkCalendarSizes.SelectionHeight)
.cellDayBackground(
coreAccent = BpkTheme.colors.coreAccent,
surfaceSubtle = BpkTheme.colors.surfaceSubtle,
selection = selection,
),
)

if (!inactive) {
when (val cellLabel = model.info.label) {
is CellLabel.Text -> {
if (cellLabel.text.isNotBlank()) {
BpkText(
text = cellLabel.text,
modifier = Modifier
.padding(horizontal = BpkSpacing.Sm),
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Center,
maxLines = 2,
style = BpkTheme.typography.caption,
color = labelColor(status, style),
)
}
}
is CellLabel.Icon -> {
cellLabel.resId.let { resId ->
BpkIcon.findBySmall(resId)?.let { bpkIcon ->
val iconTint = cellLabel.tint
?.let { colorRes -> ContextCompat.getColor(LocalContext.current, colorRes) }
?.let { Color(it) } ?: LocalContentColor.current
BpkIcon(
icon = bpkIcon,
tint = iconTint,
contentDescription = null,
BpkText(
text = mModel.text.toString(),
modifier = Modifier.semantics {
contentDescription = mModel.contentDescription
},
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = BpkTheme.typography.label1,
color = dateColor(selection, status, inactive, style),
)
}

if (!inactive) {
when (val cellLabel = mModel.info.label) {
is CellLabel.Text -> {
if (cellLabel.text.isNotBlank()) {
BpkText(
text = cellLabel.text,
modifier = Modifier
.padding(horizontal = BpkSpacing.Sm),
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Center,
maxLines = 2,
style = BpkTheme.typography.caption,
color = labelColor(status, style),
)
}
}

is CellLabel.Icon -> {
cellLabel.resId.let { resId ->
BpkIcon.findBySmall(resId)?.let { bpkIcon ->
val iconTint = cellLabel.tint
?.let { colorRes -> ContextCompat.getColor(LocalContext.current, colorRes) }
?.let { Color(it) } ?: LocalContentColor.current
BpkIcon(
icon = bpkIcon,
tint = iconTint,
contentDescription = null,
)
}
}
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion ...pose/src/main/kotlin/net/skyscanner/backpack/compose/calendar/internal/BpkCalendarGrid.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ internal fun BpkCalendarGrid(
when (val item = state.cells[index]) {
is CalendarCell.Day -> BpkCalendarDayCell(item) { onClick(CalendarInteraction.DateClicked(it)) }
is CalendarCell.Header -> BpkCalendarHeaderCell(item) { onClick(CalendarInteraction.SelectMonthClicked(it)) }
is CalendarCell.Space -> BpkCalendarSpaceCell(item)
is CalendarCell.Space -> BpkCalendarSpaceCell()
}
},
)
Expand Down
11 changes: 1 addition & 10 deletions ...src/main/kotlin/net/skyscanner/backpack/compose/calendar/internal/BpkCalendarSpaceCell.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,16 @@

package net.skyscanner.backpack.compose.calendar.internal

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import net.skyscanner.backpack.calendar2.data.CalendarCell
import net.skyscanner.backpack.compose.theme.BpkTheme
import net.skyscanner.backpack.compose.utils.applyIf

@Composable
internal fun BpkCalendarSpaceCell(
model: CalendarCell.Space,
modifier: Modifier = Modifier,
) {
Spacer(
modifier = modifier
.height(BpkCalendarSizes.SelectionHeight)
.applyIf(model.selected) {
background(BpkTheme.colors.surfaceSubtle)
},
modifier = modifier.height(BpkCalendarSizes.SelectionHeight),
)
}

0 comments on commit 11893e2

Please sign in to comment.