diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/Component.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/Component.kt index ae323c885..088cf5ade 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/Component.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/Component.kt @@ -36,7 +36,7 @@ sealed class Component( AppBarsTop, BottomNavigation -> Alignment.TopCenter Lists -> Alignment.BottomCenter Sliders, TextFields -> Alignment.CenterEnd - Buttons, Cards, Checkboxes, Chips, Dialogs, FloatingActionButtons, Menus, Progress, RadioButtons, Snackbars, Switches, Tabs -> Alignment.Center + Buttons, Cards, Sheets, Checkboxes, Chips, Dialogs, FloatingActionButtons, Menus, Progress, RadioButtons, Snackbars, Switches, Tabs -> Alignment.Center } object AppBarsTop : Component( @@ -144,6 +144,14 @@ sealed class Component( composableName = OdsComponent.OdsRadioButton.name ) + object Sheets : Component( + R.string.component_sheets, + R.drawable.il_bottom_sheet, + null, + R.string.component_sheet_description, + composableName = "" + ) + object Sliders : Component( R.string.component_sliders, R.drawable.il_sliders, diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/ComponentDemoScreen.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/ComponentDemoScreen.kt index 1c0bc1356..3d411d97a 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/ComponentDemoScreen.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/ComponentDemoScreen.kt @@ -19,6 +19,7 @@ import com.orange.ods.demo.ui.components.dialogs.ComponentDialog import com.orange.ods.demo.ui.components.floatingactionbuttons.ComponentFloatingActionButton import com.orange.ods.demo.ui.components.lists.ComponentLists import com.orange.ods.demo.ui.components.radiobuttons.ComponentRadioButtons +import com.orange.ods.demo.ui.components.sheets.ComponentSheetBottom import com.orange.ods.demo.ui.components.sliders.ComponentSliders import com.orange.ods.demo.ui.components.snackbars.ComponentSnackbars import com.orange.ods.demo.ui.components.switches.ComponentSwitches @@ -36,6 +37,7 @@ fun ComponentDemoScreen(componentId: Long) { Component.FloatingActionButtons -> ComponentFloatingActionButton() Component.Lists -> ComponentLists() Component.RadioButtons -> ComponentRadioButtons() + Component.Sheets -> ComponentSheetBottom() Component.Sliders -> ComponentSliders() Component.Snackbars -> ComponentSnackbars() Component.Switches -> ComponentSwitches() diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/ComponentSheetBottom.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/ComponentSheetBottom.kt new file mode 100644 index 000000000..f1c0cbca2 --- /dev/null +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/ComponentSheetBottom.kt @@ -0,0 +1,100 @@ +/* + * + * Copyright 2021 Orange + * + * Use of this source code is governed by an MIT-style + * license that can be found in the LICENSE file or at + * https://opensource.org/licenses/MIT. + * / + */ + +package com.orange.ods.demo.ui.components.sheets + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.material.rememberBottomSheetScaffoldState +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.chip.OdsChoiceChip +import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow +import com.orange.ods.compose.component.list.OdsListItem +import com.orange.ods.compose.text.OdsTextCaption +import com.orange.ods.compose.text.OdsTextH6 +import com.orange.ods.demo.R +import com.orange.ods.demo.domain.recipes.LocalRecipes +import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold +import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn +import com.orange.ods.demo.ui.utilities.composable.FloatingActionButtonTechnicalTextColumn + + +@OptIn(ExperimentalMaterialApi::class) +@Composable +fun ComponentSheetBottom() { + + val sheetsbottomCustomizationState = rememberSheetsbottomCustomizationState() + + with(sheetsbottomCustomizationState) { + + + ComponentCustomizationBottomSheetScaffold( + bottomSheetScaffoldState = rememberBottomSheetScaffoldState(), + + bottomSheetContent = { + when (content.value) { + SheetsbottomCustomizationState.Content.Empty -> { + OdsListItem( + text = "" + ) + } + + SheetsbottomCustomizationState.Content.Example -> { + val recipes = LocalRecipes.current + recipes.forEach { recipe -> + OdsListItem( + //icon = recipe.iconResId?.let { iconRes -> + // { + // OdsListItemIcon( + // painter = painterResource(id = iconRes), + // contentDescription = null + // ) + //} + //}, + text = recipe.title + ) + } + + } + + } + } + ) { + Column() { + Column( + modifier = Modifier + .padding(top = dimensionResource(id = R.dimen.screen_vertical_margin)) + .padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin)) + ) { + OdsTextH6(text = stringResource(id = R.string.component_sheet_customize)) + OdsTextCaption(text = stringResource(id = R.string.component_content)) + + OdsChoiceChipsFlowRow( + selectedChip = content, + outlinedChips = true + ) { + OdsChoiceChip(textRes = R.string.component_sheet_empty, value = SheetsbottomCustomizationState.Content.Empty) + OdsChoiceChip(textRes = R.string.component_sheet_example, value = SheetsbottomCustomizationState.Content.Example) + } + } + + CodeImplementationColumn { + FloatingActionButtonTechnicalTextColumn( + componentName = "" + ) + } + } + } + } +} \ No newline at end of file diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/SheetsbottomCustomizationState.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/SheetsbottomCustomizationState.kt new file mode 100644 index 000000000..cf3d7be24 --- /dev/null +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/SheetsbottomCustomizationState.kt @@ -0,0 +1,42 @@ +/* + * + * Copyright 2021 Orange + * + * Use of this source code is governed by an MIT-style + * license that can be found in the LICENSE file or at + * https://opensource.org/licenses/MIT. + * / + */ + +package com.orange.ods.demo.ui.components.sheets + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.MutableState +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.saveable.rememberSaveable + + +@Composable +fun rememberSheetsbottomCustomizationState( + content: MutableState = rememberSaveable { mutableStateOf(SheetsbottomCustomizationState.Content.Empty) }, +) = + remember( + content, + ) { + SheetsbottomCustomizationState( + content, + ) + } + +class SheetsbottomCustomizationState( + + val content: MutableState, +) { + + enum class Content { + Empty, Example + } + + +} \ No newline at end of file diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt index 8ad7c2a1a..96ee79dfc 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt @@ -87,17 +87,17 @@ fun ComponentCustomizationBottomSheetScaffold( .semantics { stateDescription = bottomSheetHeaderStateDescription }, - text = stringResource(id = R.string.component_customize), - icon = { - val degrees = if (bottomSheetScaffoldState.bottomSheetState.isExpanded) 0f else -180f - val angle by animateFloatAsState(targetValue = degrees) - Icon( - modifier = Modifier.rotate(angle), - painter = painterResource(id = R.drawable.ic_chevron_down), - contentDescription = null, - tint = OdsTheme.colors.onSurface - ) - }) + text = stringResource(id = R.string.component_customize) + ) { + val degrees = if (bottomSheetScaffoldState.bottomSheetState.isExpanded) 0f else -180f + val angle by animateFloatAsState(targetValue = degrees) + Icon( + modifier = Modifier.rotate(angle), + painter = painterResource(id = R.drawable.ic_chevron_down), + contentDescription = null, + tint = OdsTheme.colors.onSurface + ) + } Column(modifier = Modifier.verticalScroll(rememberScrollState())) { bottomSheetContent() diff --git a/demo/src/main/res/drawable/il_bottom_sheet.xml b/demo/src/main/res/drawable/il_bottom_sheet.xml new file mode 100644 index 000000000..65f748713 --- /dev/null +++ b/demo/src/main/res/drawable/il_bottom_sheet.xml @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + diff --git a/demo/src/main/res/drawable/il_bottom_sheet_generic.xml b/demo/src/main/res/drawable/il_bottom_sheet_generic.xml new file mode 100644 index 000000000..65f748713 --- /dev/null +++ b/demo/src/main/res/drawable/il_bottom_sheet_generic.xml @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + diff --git a/demo/src/main/res/values/strings.xml b/demo/src/main/res/values/strings.xml index 6e564f649..6bb8fc00d 100644 --- a/demo/src/main/res/values/strings.xml +++ b/demo/src/main/res/values/strings.xml @@ -243,6 +243,14 @@ Divider Information + + Sheets : bottom + Bottom sheets are surfaces anchored to the bottom of the screen that present users supplemental content. + Content + Customize the bottom sheet + Empty + Example + Snackbars There are two ways to show users short, non permanent messages giving system information or feedback about an operation. diff --git a/lib/src/main/java/com/orange/ods/compose/component/bottomsheet/OdsBottomSheet.kt b/lib/src/main/java/com/orange/ods/compose/component/bottomsheet/OdsBottomSheet.kt new file mode 100644 index 000000000..dbc86031c --- /dev/null +++ b/lib/src/main/java/com/orange/ods/compose/component/bottomsheet/OdsBottomSheet.kt @@ -0,0 +1,73 @@ +/* + * + * Copyright 2021 Orange + * + * Use of this source code is governed by an MIT-style + * license that can be found in the LICENSE file or at + * https://opensource.org/licenses/MIT. + * / + */ + +package com.orange.ods.compose.component.bottomsheet + +import androidx.compose.foundation.layout.ColumnScope +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.material.BottomSheetScaffold +import androidx.compose.material.BottomSheetScaffoldDefaults +import androidx.compose.material.BottomSheetScaffoldState +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.material.FabPosition +import androidx.compose.material.MaterialTheme +import androidx.compose.material.SnackbarHost +import androidx.compose.material.SnackbarHostState +import androidx.compose.material.contentColorFor +import androidx.compose.material.rememberBottomSheetScaffoldState +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.unit.Dp +import com.orange.ods.compose.component.OdsComponentApi +import com.orange.ods.compose.theme.OdsTheme + +@Composable +@ExperimentalMaterialApi +@OdsComponentApi +fun OdsBottomSheet( + sheetContent: @Composable ColumnScope.() -> Unit, + modifier: Modifier = Modifier, + scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(), + topBar: (@Composable () -> Unit)? = null, + snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }, + floatingActionButton: (@Composable () -> Unit)? = null, + floatingActionButtonPosition: FabPosition = FabPosition.End, + sheetGesturesEnabled: Boolean = true, + sheetShape: Shape = MaterialTheme.shapes.large, + sheetElevation: Dp = BottomSheetScaffoldDefaults.SheetElevation, + sheetBackgroundColor: Color = MaterialTheme.colors.surface, + sheetContentColor: Color = contentColorFor(sheetBackgroundColor), + sheetPeekHeight: Dp = BottomSheetScaffoldDefaults.SheetPeekHeight, + backgroundColor: Color = OdsTheme.colors.surface, + contentColor: Color = contentColorFor(backgroundColor), + content: @Composable (PaddingValues) -> Unit + +) { + BottomSheetScaffold( + sheetContent = sheetContent, + modifier = modifier, + scaffoldState = scaffoldState, + topBar = topBar, + snackbarHost = snackbarHost, + floatingActionButton = floatingActionButton, + floatingActionButtonPosition = floatingActionButtonPosition, + sheetElevation = sheetElevation, + sheetGesturesEnabled = sheetGesturesEnabled, + sheetShape = sheetShape, + sheetBackgroundColor = MaterialTheme.colors.surface, + sheetContentColor = sheetContentColor, + sheetPeekHeight = sheetPeekHeight, + backgroundColor = OdsTheme.colors.surface, + contentColor = contentColor, + content = content + ) +} \ No newline at end of file diff --git a/lib/src/main/java/com/orange/ods/compose/component/list/OdsListItem.kt b/lib/src/main/java/com/orange/ods/compose/component/list/OdsListItem.kt index 79fa8a481..d81dece8c 100644 --- a/lib/src/main/java/com/orange/ods/compose/component/list/OdsListItem.kt +++ b/lib/src/main/java/com/orange/ods/compose/component/list/OdsListItem.kt @@ -101,9 +101,8 @@ fun OdsListItem( icon = icon, secondaryText = secondaryText, singleLineSecondaryText = singleLineSecondaryText, - overlineText = overlineText, - trailing = { OdsListItemTrailing(trailing = trailing) } - ) + overlineText = overlineText + ) { OdsListItemTrailing(trailing = trailing) } } /**