Skip to content

Commit 4e1385f

Browse files
paulineapaulinea
authored
feat: create component - bottom sheet (#1150)
1 parent 693b202 commit 4e1385f

46 files changed

Lines changed: 1190 additions & 55 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/src/main/java/com/orange/ouds/app/ui/components/Component.kt‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import com.orange.ouds.app.R
1919
import com.orange.ouds.app.ui.components.alert.AlertMessageDemoScreen
2020
import com.orange.ouds.app.ui.components.alert.InlineAlertDemoScreen
2121
import com.orange.ouds.app.ui.components.badge.BadgeDemoScreen
22+
import com.orange.ouds.app.ui.components.bottomsheet.StandardBottomSheetDemoScreen
23+
import com.orange.ouds.app.ui.components.bottomsheet.ModalBottomSheetDemoScreen
2224
import com.orange.ouds.app.ui.components.bulletlist.BulletListDemoScreen
2325
import com.orange.ouds.app.ui.components.button.ButtonDemoScreen
2426
import com.orange.ouds.app.ui.components.checkbox.CheckboxDemoScreen
@@ -73,6 +75,13 @@ sealed class Component(
7375
demoScreen = { BadgeDemoScreen() }
7476
)
7577

78+
data object BottomSheet : Component(
79+
R.string.app_components_bottomSheet_tech,
80+
R.string.app_components_bottomSheet_description_text,
81+
{ BottomSheetIllustration() },
82+
listOf(Variant.StandardBottomSheet, Variant.ModalBottomSheet)
83+
)
84+
7685
data object BulletList : Component(
7786
R.string.app_components_bulletList_tech,
7887
R.string.app_components_bulletList_description_text,
@@ -201,6 +210,10 @@ sealed class Variant(
201210
data object AlertMessage : Variant(R.string.app_components_alert_alertMessage_tech, { AlertMessageDemoScreen() })
202211
data object InlineAlert : Variant(R.string.app_components_alert_inlineAlert_tech, { InlineAlertDemoScreen() })
203212

213+
// Bottom sheet
214+
data object StandardBottomSheet : Variant(R.string.app_components_bottomSheet_standardBottomSheet_tech, { StandardBottomSheetDemoScreen() })
215+
data object ModalBottomSheet : Variant(R.string.app_components_bottomSheet_modalBottomSheet_tech, { ModalBottomSheetDemoScreen() })
216+
204217
// Checkbox
205218
data object Checkbox : Variant(R.string.app_components_checkbox_checkbox_tech, { CheckboxDemoScreen() })
206219
data object CheckboxItem : Variant(R.string.app_components_checkbox_checkboxItem_tech, { CheckboxItemDemoScreen() })

‎app/src/main/java/com/orange/ouds/app/ui/components/ComponentIllustrations.kt‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ import androidx.compose.material3.ExperimentalMaterial3Api
2424
import androidx.compose.runtime.Composable
2525
import androidx.compose.runtime.CompositionLocalProvider
2626
import androidx.compose.ui.Modifier
27+
import androidx.compose.ui.draw.clip
28+
import androidx.compose.ui.graphics.Color
29+
import androidx.compose.ui.graphics.RectangleShape
2730
import androidx.compose.ui.platform.LocalConfiguration
2831
import androidx.compose.ui.platform.LocalCursorBlinkEnabled
2932
import androidx.compose.ui.platform.LocalDensity
@@ -40,6 +43,7 @@ import com.orange.ouds.core.component.OudsAlertMessage
4043
import com.orange.ouds.core.component.OudsBadge
4144
import com.orange.ouds.core.component.OudsBadgeSize
4245
import com.orange.ouds.core.component.OudsBadgeStatus
46+
import com.orange.ouds.core.component.OudsBottomSheetScaffold
4347
import com.orange.ouds.core.component.OudsBulletList
4448
import com.orange.ouds.core.component.OudsBulletListType
4549
import com.orange.ouds.core.component.OudsButton
@@ -87,6 +91,20 @@ fun BadgeIllustration() = ComponentIllustration {
8791
)
8892
}
8993

94+
@OptIn(ExperimentalMaterial3Api::class)
95+
@Composable
96+
fun BottomSheetIllustration() = ComponentIllustration {
97+
OudsBottomSheetScaffold(
98+
modifier = Modifier
99+
.clip(RectangleShape)
100+
.padding(horizontal = 16.dp),
101+
sheetPeekHeight = 120.dp,
102+
sheetSwipeEnabled = false,
103+
sheetContent = {},
104+
containerColor = Color.Transparent
105+
) {}
106+
}
107+
90108
@Composable
91109
fun BulletListIllustration() = ComponentIllustration {
92110
val label = stringResource(id = R.string.app_components_common_label_label)

‎app/src/main/java/com/orange/ouds/app/ui/components/ComponentsScreen.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ private fun ComponentsScreen(components: List<Component>, onComponentClick: (Lon
6666
@Composable
6767
private fun PreviewComponentsScreen() = AppPreview {
6868
ComponentsScreen(
69-
components = listOf(Component.Button, Component.BulletList),
69+
components = listOf(Component.Button, Component.BottomSheet),
7070
onComponentClick = {}
7171
)
7272
}

‎app/src/main/java/com/orange/ouds/app/ui/components/bottomsheet/BottomSheetDemoContent.kt‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
* Software Name: OUDS Android
3+
* SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This software is distributed under the MIT license,
7+
* the text of which is available at https://opensource.org/license/MIT/
8+
* or see the "LICENSE" file for more details.
9+
*
10+
* Software description: Android library of reusable graphical components
11+
*/
12+
13+
package com.orange.ouds.app.ui.components.bottomsheet
14+
15+
import androidx.compose.foundation.layout.Column
16+
import androidx.compose.foundation.layout.padding
17+
import androidx.compose.foundation.rememberScrollState
18+
import androidx.compose.foundation.verticalScroll
19+
import androidx.compose.material3.Text
20+
import androidx.compose.runtime.Composable
21+
import androidx.compose.ui.Modifier
22+
import androidx.compose.ui.res.stringResource
23+
import androidx.compose.ui.unit.dp
24+
import com.orange.ouds.app.R
25+
import com.orange.ouds.core.component.OudsButton
26+
import com.orange.ouds.core.theme.OudsTheme
27+
28+
@Composable
29+
fun BottomSheetDemoContent(dragHandle: Boolean, buttonLabel: String, onButtonClick: () -> Unit) {
30+
val scrollState = rememberScrollState()
31+
Column(
32+
modifier = Modifier
33+
.verticalScroll(scrollState)
34+
.padding(top = if (dragHandle) 0.dp else OudsTheme.spaces.fixed.medium)
35+
) {
36+
Text(
37+
modifier = Modifier.padding(horizontal = OudsTheme.grids.margin),
38+
text = stringResource(R.string.app_components_bottomSheet_sheetContent_text)
39+
)
40+
OudsButton(
41+
modifier = Modifier.padding(
42+
vertical = OudsTheme.spaces.fixed.medium,
43+
horizontal = OudsTheme.grids.margin
44+
),
45+
label = buttonLabel,
46+
onClick = onButtonClick
47+
)
48+
}
49+
}

‎app/src/main/java/com/orange/ouds/app/ui/components/bottomsheet/ModalBottomSheetDemoScreen.kt‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/*
2+
* Software Name: OUDS Android
3+
* SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This software is distributed under the MIT license,
7+
* the text of which is available at https://opensource.org/license/MIT/
8+
* or see the "LICENSE" file for more details.
9+
*
10+
* Software description: Android library of reusable graphical components
11+
*/
12+
13+
package com.orange.ouds.app.ui.components.bottomsheet
14+
15+
import androidx.compose.foundation.layout.Column
16+
import androidx.compose.foundation.layout.fillMaxSize
17+
import androidx.compose.foundation.layout.padding
18+
import androidx.compose.foundation.rememberScrollState
19+
import androidx.compose.foundation.verticalScroll
20+
import androidx.compose.material3.ExperimentalMaterial3Api
21+
import androidx.compose.material3.rememberModalBottomSheetState
22+
import androidx.compose.runtime.Composable
23+
import androidx.compose.runtime.getValue
24+
import androidx.compose.runtime.mutableStateOf
25+
import androidx.compose.runtime.saveable.rememberSaveable
26+
import androidx.compose.runtime.setValue
27+
import androidx.compose.ui.Modifier
28+
import androidx.compose.ui.res.stringResource
29+
import androidx.compose.ui.tooling.preview.PreviewLightDark
30+
import com.orange.ouds.app.R
31+
import com.orange.ouds.app.ui.utilities.Code
32+
import com.orange.ouds.app.ui.utilities.composable.AppPreview
33+
import com.orange.ouds.app.ui.utilities.composable.CodeSnippet
34+
import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchItem
35+
import com.orange.ouds.app.ui.utilities.composable.DetailScreenDescription
36+
import com.orange.ouds.app.ui.utilities.composable.Screen
37+
import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
38+
import com.orange.ouds.app.ui.utilities.topBarsTopPadding
39+
import com.orange.ouds.core.component.OudsButton
40+
import com.orange.ouds.core.component.OudsModalBottomSheet
41+
import com.orange.ouds.core.theme.OudsTheme
42+
43+
@OptIn(ExperimentalMaterial3Api::class)
44+
@Composable
45+
fun ModalBottomSheetDemoScreen() {
46+
val state = rememberModalBottomSheetDemoState()
47+
var modalBottomSheetVisible by rememberSaveable { mutableStateOf(false) }
48+
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
49+
with(state) {
50+
Screen {
51+
Column(
52+
modifier = Modifier
53+
.fillMaxSize()
54+
.verticalScroll(rememberScrollState())
55+
.consumeTopBarsTopWindowInsets()
56+
.padding(top = topBarsTopPadding)
57+
) {
58+
DetailScreenDescription(
59+
modifier = Modifier.padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.medium),
60+
description = stringResource(id = R.string.app_components_bottomSheet_modalBottomSheet_description_text)
61+
)
62+
ModalBottomSheetDemoCustomization(
63+
state = state,
64+
onButtonClick = { modalBottomSheetVisible = true }
65+
)
66+
CodeSnippet(
67+
modifier = Modifier
68+
.padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.medium)
69+
.padding(top = OudsTheme.spaces.fixed.medium),
70+
init = { modalBottomSheetDemoCodeSnippet(state = state) }
71+
)
72+
if (modalBottomSheetVisible) {
73+
OudsModalBottomSheet(
74+
dragHandle = dragHandle,
75+
sheetGesturesEnabled = sheetGesturesEnabled,
76+
onDismissRequest = { modalBottomSheetVisible = false },
77+
sheetState = sheetState
78+
) {
79+
BottomSheetDemoContent(
80+
dragHandle = dragHandle,
81+
buttonLabel = stringResource(R.string.app_components_bottomSheet_modalBottomSheet_close_label)
82+
) {
83+
modalBottomSheetVisible = false
84+
}
85+
}
86+
}
87+
}
88+
}
89+
}
90+
}
91+
92+
@Composable
93+
private fun ModalBottomSheetDemoCustomization(state: ModalBottomSheetDemoState, onButtonClick: () -> Unit) {
94+
with(state) {
95+
CustomizationSwitchItem(
96+
label = stringResource(R.string.app_components_bottomSheet_modalBottomSheet_dragHandle_tech),
97+
checked = dragHandle,
98+
onCheckedChange = { dragHandle = it },
99+
)
100+
CustomizationSwitchItem(
101+
label = stringResource(R.string.app_components_bottomSheet_modalBottomSheet_sheetGesturesEnabled_tech),
102+
checked = sheetGesturesEnabled,
103+
onCheckedChange = { sheetGesturesEnabled = it },
104+
)
105+
OudsButton(
106+
modifier = Modifier.padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.small),
107+
label = "Show bottom sheet",
108+
onClick = onButtonClick
109+
)
110+
}
111+
}
112+
113+
private fun Code.Builder.modalBottomSheetDemoCodeSnippet(state: ModalBottomSheetDemoState) {
114+
functionCall("OudsModalBottomSheet") {
115+
trailingLambda = true
116+
typedArgument("dragHandle", state.dragHandle)
117+
typedArgument("sheetGesturesEnabled", state.sheetGesturesEnabled)
118+
functionCallArgument("sheetState", "rememberModalBottomSheetState")
119+
lambdaArgument("onDismissRequest") {
120+
comment("do something on dismiss")
121+
}
122+
lambdaArgument(null) {
123+
comment("sheet content")
124+
}
125+
}
126+
}
127+
128+
@PreviewLightDark
129+
@Composable
130+
private fun PreviewModalBottomSheetDemoScreen() = AppPreview {
131+
ModalBottomSheetDemoScreen()
132+
}

‎app/src/main/java/com/orange/ouds/app/ui/components/bottomsheet/ModalBottomSheetDemoState.kt‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/*
2+
* Software Name: OUDS Android
3+
* SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This software is distributed under the MIT license,
7+
* the text of which is available at https://opensource.org/license/MIT/
8+
* or see the "LICENSE" file for more details.
9+
*
10+
* Software description: Android library of reusable graphical components
11+
*/
12+
13+
package com.orange.ouds.app.ui.components.bottomsheet
14+
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.runtime.getValue
17+
import androidx.compose.runtime.mutableStateOf
18+
import androidx.compose.runtime.saveable.listSaver
19+
import androidx.compose.runtime.saveable.rememberSaveable
20+
import androidx.compose.runtime.setValue
21+
22+
@Composable
23+
fun rememberModalBottomSheetDemoState(
24+
dragHandle: Boolean = true,
25+
sheetGesturesEnabled: Boolean = true
26+
) = rememberSaveable(dragHandle, sheetGesturesEnabled, saver = ModalBottomSheetDemoState.Saver) {
27+
ModalBottomSheetDemoState(dragHandle, sheetGesturesEnabled)
28+
}
29+
30+
class ModalBottomSheetDemoState(
31+
dragHandle: Boolean,
32+
sheetGesturesEnabled: Boolean
33+
) {
34+
companion object {
35+
val Saver = listSaver(
36+
save = { state ->
37+
with(state) {
38+
listOf(
39+
dragHandle,
40+
sheetGesturesEnabled
41+
)
42+
}
43+
},
44+
restore = { list: List<Any?> ->
45+
ModalBottomSheetDemoState(
46+
list[0] as Boolean,
47+
list[1] as Boolean
48+
)
49+
}
50+
)
51+
}
52+
53+
var dragHandle: Boolean by mutableStateOf(dragHandle)
54+
var sheetGesturesEnabled: Boolean by mutableStateOf(sheetGesturesEnabled)
55+
}

0 commit comments

Comments
 (0)