Skip to content

Commit

Permalink
Merge pull request #604 from Orange-OpenSource/603-update-odschip-api
Browse files Browse the repository at this point in the history 
603 - Update OdsChip OdsChoiceChipsFlowRow and OdsFilterChip APIs
  • Loading branch information
@florentmaitre
florentmaitre authored Sep 11, 2023
2 parents cb18303 + ae0233b commit deccc3e
Show file tree
Hide file tree
Showing 21 changed files with 620 additions and 443 deletions.
49 changes: 29 additions & 20 deletions app/src/main/java/com/orange/ods/app/ui/components/appbars/top/ComponentTopAppBar.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,16 +187,20 @@ private fun CustomizationBottomSheetContent(customizationState: TopAppBarCustomi
if (isLarge) {
Subtitle(textRes = R.string.component_app_bars_top_large_scroll_behavior, horizontalPadding = true)
OdsChoiceChipsFlowRow(
selectedChip = scrollBehavior,
value = scrollBehavior.value,
onValueChange = { value -> scrollBehavior.value = value },
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m)),
outlinedChips = true
) {
OdsChoiceChip(textRes = R.string.component_app_bars_top_large_scroll_behavior_none, value = TopAppBarCustomizationState.ScrollBehavior.None)
OdsChoiceChip(
textRes = R.string.component_app_bars_top_large_scroll_behavior_collapsible,
value = TopAppBarCustomizationState.ScrollBehavior.Collapsible
chips = listOf(
OdsChoiceChip(
text = stringResource(id = R.string.component_app_bars_top_large_scroll_behavior_none),
value = TopAppBarCustomizationState.ScrollBehavior.None
),
OdsChoiceChip(
text = stringResource(R.string.component_app_bars_top_large_scroll_behavior_collapsible),
value = TopAppBarCustomizationState.ScrollBehavior.Collapsible
)
)
}
)
}
OdsListItem(
text = stringResource(id = R.string.component_app_bars_top_element_navigation_icon),
Expand All @@ -223,19 +227,24 @@ private fun CustomizationBottomSheetContent(customizationState: TopAppBarCustomi
if (isLarge) {
Subtitle(textRes = R.string.component_element_title, horizontalPadding = true)
OdsChoiceChipsFlowRow(
selectedChip = title,
modifier = Modifier
.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m))
.padding(bottom = dimensionResource(id = com.orange.ods.R.dimen.spacing_s)),
outlinedChips = true
) {
OdsChoiceChip(textRes = R.string.component_app_bars_top_large_title_one_line, value = TopAppBarCustomizationState.Title.Short)
OdsChoiceChip(textRes = R.string.component_app_bars_top_large_title_two_lines, value = TopAppBarCustomizationState.Title.TwoLines)
OdsChoiceChip(
textRes = R.string.component_app_bars_top_large_title_truncated,
value = TopAppBarCustomizationState.Title.Long
value = title.value,
onValueChange = { value -> title.value = value },
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m)),
chips = listOf(
OdsChoiceChip(
text = stringResource(id = R.string.component_app_bars_top_large_title_one_line),
value = TopAppBarCustomizationState.Title.Short
),
OdsChoiceChip(
text = stringResource(id = R.string.component_app_bars_top_large_title_two_lines),
value = TopAppBarCustomizationState.Title.TwoLines
),
OdsChoiceChip(
text = stringResource(id = R.string.component_app_bars_top_large_title_truncated),
value = TopAppBarCustomizationState.Title.Long
)
)
}
)
}
}
}
Expand Down
30 changes: 16 additions & 14 deletions app/src/main/java/com/orange/ods/app/ui/components/buttons/ComponentButtons.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,24 +63,26 @@ fun ComponentButtons(variant: Variant) {
Variant.ButtonsFunctional -> {
Subtitle(textRes = R.string.component_button_style_functional, horizontalPadding = true)
OdsChoiceChipsFlowRow(
selectedChip = buttonStyle,
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.screen_horizontal_margin)),
outlinedChips = true
) {
OdsChoiceChip(textRes = R.string.component_button_style_functional_positive, value = OdsButtonStyle.FunctionalPositive)
OdsChoiceChip(textRes = R.string.component_button_style_functional_negative, value = OdsButtonStyle.FunctionalNegative)
}
value = buttonStyle.value,
onValueChange = { value -> buttonStyle.value = value },
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m)),
chips = listOf(
OdsChoiceChip(text = stringResource(id = R.string.component_button_style_functional_positive), value = OdsButtonStyle.FunctionalPositive),
OdsChoiceChip(text = stringResource(id = R.string.component_button_style_functional_negative), value = OdsButtonStyle.FunctionalNegative)
)
)
}
Variant.ButtonsText -> {
Subtitle(textRes = R.string.component_style, horizontalPadding = true)
OdsChoiceChipsFlowRow(
selectedChip = textButtonStyle,
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.screen_horizontal_margin)),
outlinedChips = true
) {
OdsChoiceChip(textRes = R.string.component_button_style_primary, value = OdsTextButtonStyle.Primary)
OdsChoiceChip(textRes = R.string.component_button_style_default, value = OdsTextButtonStyle.Default)
}
value = textButtonStyle.value,
onValueChange = { value -> textButtonStyle.value = value },
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m)),
chips = listOf(
OdsChoiceChip(text = stringResource(id = R.string.component_button_style_primary), value = OdsTextButtonStyle.Primary),
OdsChoiceChip(text = stringResource(id = R.string.component_button_style_default), value = OdsTextButtonStyle.Default)
)
)
}
Variant.ButtonsTextToggleGroup -> {
ComponentCountRow(
Expand Down
25 changes: 13 additions & 12 deletions app/src/main/java/com/orange/ods/app/ui/components/cards/ComponentCard.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import com.orange.ods.compose.component.card.OdsHorizontalCardImagePosition
import com.orange.ods.compose.component.chip.OdsChoiceChip
import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
import com.orange.ods.compose.component.list.OdsListItem
import com.orange.ods.compose.component.list.OdsSwitchTrailing
import com.orange.ods.app.R
import com.orange.ods.app.ui.components.Variant
import com.orange.ods.app.ui.components.utilities.ComponentCountRow
import com.orange.ods.app.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
import com.orange.ods.app.ui.utilities.composable.Subtitle
import com.orange.ods.compose.component.card.OdsHorizontalCardImagePosition
import com.orange.ods.compose.component.chip.OdsChoiceChip
import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
import com.orange.ods.compose.component.list.OdsListItem
import com.orange.ods.compose.component.list.OdsSwitchTrailing

@OptIn(ExperimentalMaterialApi::class)
@Composable
Expand All @@ -49,13 +49,14 @@ fun ComponentCard(variant: Variant) {
} else if (variant == Variant.CardHorizontal) {
Subtitle(textRes = R.string.component_card_horizontal_image_position, horizontalPadding = true)
OdsChoiceChipsFlowRow(
selectedChip = imagePosition,
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.screen_horizontal_margin)),
outlinedChips = true
) {
OdsChoiceChip(textRes = R.string.component_card_horizontal_image_position_start, value = OdsHorizontalCardImagePosition.Start)
OdsChoiceChip(textRes = R.string.component_card_horizontal_image_position_end, value = OdsHorizontalCardImagePosition.End)
}
value = imagePosition.value,
onValueChange = { value -> imagePosition.value = value },
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m)),
chips = listOf(
OdsChoiceChip(text = stringResource(id = R.string.component_card_horizontal_image_position_start), value = OdsHorizontalCardImagePosition.Start),
OdsChoiceChip(text = stringResource(id = R.string.component_card_horizontal_image_position_end), value = OdsHorizontalCardImagePosition.End)
)
)
}
OdsListItem(
text = stringResource(id = R.string.component_element_subtitle),
Expand Down
85 changes: 48 additions & 37 deletions app/src/main/java/com/orange/ods/app/ui/components/chips/Chip.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import androidx.compose.ui.res.stringResource
import coil.compose.rememberAsyncImagePainter
import com.orange.ods.app.R
import com.orange.ods.app.domain.recipes.LocalRecipes
import com.orange.ods.app.ui.LocalThemeManager
import com.orange.ods.app.ui.components.Variant
import com.orange.ods.app.ui.components.chips.ChipCustomizationState.ChipType
import com.orange.ods.app.ui.components.chips.ChipCustomizationState.LeadingElement
Expand All @@ -37,16 +36,16 @@ import com.orange.ods.app.ui.components.utilities.clickOnElement
import com.orange.ods.app.ui.utilities.DrawableManager
import com.orange.ods.app.ui.utilities.composable.CodeImplementationColumn
import com.orange.ods.app.ui.utilities.composable.FunctionCallCode
import com.orange.ods.app.ui.utilities.composable.ImagePainterValue
import com.orange.ods.app.ui.utilities.composable.Subtitle
import com.orange.ods.compose.OdsComposable
import com.orange.ods.compose.component.chip.OdsChip
import com.orange.ods.compose.component.chip.OdsChipLeadingAvatar
import com.orange.ods.compose.component.chip.OdsChipLeadingIcon
import com.orange.ods.compose.component.chip.OdsChoiceChip
import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
import com.orange.ods.compose.component.list.OdsListItem
import com.orange.ods.compose.component.list.OdsSwitchTrailing
import com.orange.ods.compose.text.OdsTextBody2
import com.orange.ods.theme.OdsComponentsConfiguration.ComponentStyle

@OptIn(ExperimentalMaterialApi::class)
@Composable
Expand All @@ -60,14 +59,15 @@ fun Chip(variant: Variant) {
if (isInputChip) {
Subtitle(textRes = R.string.component_element_leading, horizontalPadding = true)
OdsChoiceChipsFlowRow(
selectedChip = leadingElement,
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.screen_horizontal_margin)),
outlinedChips = true
) {
OdsChoiceChip(textRes = R.string.component_element_none, value = LeadingElement.None)
OdsChoiceChip(textRes = R.string.component_element_avatar, value = LeadingElement.Avatar)
OdsChoiceChip(textRes = R.string.component_element_icon, value = LeadingElement.Icon)
}
value = leadingElement.value,
onValueChange = { value -> leadingElement.value = value },
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m)),
chips = listOf(
OdsChoiceChip(text = stringResource(id = R.string.component_element_none), value = LeadingElement.None),
OdsChoiceChip(text = stringResource(id = R.string.component_element_avatar), value = LeadingElement.Avatar),
OdsChoiceChip(text = stringResource(id = R.string.component_element_icon), value = LeadingElement.Icon)
)
)
} else {
resetLeadingElement()
}
Expand Down Expand Up @@ -107,55 +107,57 @@ fun ChipTypeDemo(chipType: ChipType, content: @Composable () -> Unit) {
@Composable
private fun Chip(chipCustomizationState: ChipCustomizationState) {
val context = LocalContext.current
val outlinedChips = LocalThemeManager.current.currentThemeConfiguration.componentsConfiguration.chipStyle == ComponentStyle.Outlined
val cancelCrossLabel = stringResource(id = R.string.component_element_cancel_cross)
val recipes = LocalRecipes.current.take(4)

with(chipCustomizationState) {
if (isChoiceChip) {
OdsChoiceChipsFlowRow(selectedChip = choiceChipIndexSelected, outlinedChips = outlinedChips) {
recipes.forEachIndexed { index, recipe ->
OdsChoiceChipsFlowRow(
value = choiceChipIndexSelected.value,
onValueChange = { value -> choiceChipIndexSelected.value = value },
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m)),
chips = recipes.mapIndexed { index, recipe ->
OdsChoiceChip(
text = recipe.title,
value = index,
enabled = isEnabled
)
}
}
)

Spacer(modifier = Modifier.padding(top = dimensionResource(com.orange.ods.R.dimen.spacing_s)))

CodeImplementationColumn {
FunctionCallCode(
name = OdsComposable.OdsChoiceChipsFlowRow.name,
parameters = {
mutableState("selectedChip", choiceChipIndexSelected.value.toString())
if (!outlinedChips) stringRepresentation("outlinedChips", outlinedChips)
stringRepresentation("value", choiceChipIndexSelected.value.toString())
lambda("onValueChange")
list("chips") {
recipes.forEachIndexed { index, recipe ->
classInstance(OdsChoiceChip::class.java) {
text(recipe.title)
stringRepresentation("value", index)
if (!isEnabled) enabled(false)
}
}
}
}
) {
recipes.forEachIndexed { index, recipe ->
FunctionCallCode(
name = OdsComposable.OdsChoiceChip.name,
parameters = {
text(recipe.title)
stringRepresentation("value", index)
if (!isEnabled) enabled(false)
})
}
}
)
}
} else {
val recipe = recipes.firstOrNull()
OdsChip(
text = recipe?.title.orEmpty(),
onClick = { clickOnElement(context, recipe?.title.orEmpty()) },
outlined = outlinedChips,
leadingIcon = if (isActionChip || hasLeadingIcon) recipe?.iconResId?.let { painterResource(id = it) } else null,
leadingIcon = if (isActionChip || hasLeadingIcon) recipe?.iconResId?.let { OdsChipLeadingIcon(painterResource(id = it), "") } else null,
leadingAvatar = if (hasLeadingAvatar) {
rememberAsyncImagePainter(
model = recipe?.imageUrl,
placeholder = painterResource(id = DrawableManager.getPlaceholderSmallResId()),
error = painterResource(id = DrawableManager.getPlaceholderSmallResId(error = true))
OdsChipLeadingAvatar(
rememberAsyncImagePainter(
model = recipe?.imageUrl,
placeholder = painterResource(id = DrawableManager.getPlaceholderSmallResId()),
error = painterResource(id = DrawableManager.getPlaceholderSmallResId(error = true))
), ""
)
} else null,
enabled = isEnabled,
Expand All @@ -172,9 +174,18 @@ private fun Chip(chipCustomizationState: ChipCustomizationState) {
exhaustiveParameters = false,
parameters = {
text(recipe?.title.orEmpty())
if (!outlinedChips) stringRepresentation("outlined", outlinedChips)
if (isActionChip || hasLeadingIcon) icon()
if (hasLeadingAvatar) simple("leadingAvatar", ImagePainterValue)
if (isActionChip || hasLeadingIcon) {
classInstance("leadingIcon", OdsChipLeadingIcon::class.java) {
painter()
contentDescription("")
}
}
if (hasLeadingAvatar) {
classInstance("leadingAvatar", OdsChipLeadingAvatar::class.java) {
image()
contentDescription("")
}
}
if (!isEnabled) enabled(false)
onClick()
if (isInputChip) lambda("onCancel")
Expand Down
Loading

0 comments on commit deccc3e

Please sign in to comment.