Skip to content

Commit

Permalink
Merge pull request #806 from Orange-OpenSource/549-add-code-implement…
Browse files Browse the repository at this point in the history 
…ation-in-missing-components

549 - OdsTabRow and OdsScrollableTabRow - Add Compose code implementation
  • Loading branch information
@florentmaitre
florentmaitre authored Feb 20, 2024
2 parents 13bda43 + 032110c commit 8f9a542
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 26 deletions.
80 changes: 59 additions & 21 deletions app/src/main/java/com/orange/ods/app/ui/components/tabs/ComponentTabs.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableIntStateOf
Expand All @@ -32,7 +34,10 @@ import com.orange.ods.app.ui.TabsConfiguration
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.code.CodeImplementationColumn
import com.orange.ods.app.ui.utilities.code.FunctionCallCode
import com.orange.ods.app.ui.utilities.composable.Subtitle
import com.orange.ods.compose.OdsComposable
import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
import com.orange.ods.compose.component.listitem.OdsListItem
import com.orange.ods.compose.component.tab.OdsTabRow
Expand Down Expand Up @@ -65,7 +70,7 @@ fun ComponentTabs(variant: Variant) {
with(tabsCustomizationState) {
val appBarManager = LocalAppBarManager.current
appBarManager.updateAppBarTabs(
TabsConfiguration(scrollableTabs, tabs, pagerState, tabsIconPosition.value, tabIconEnabled.value, tabTextEnabled.value)
TabsConfiguration(scrollableTabs, tabs, pagerState, tabIconPosition.value, tabIconEnabled.value, tabTextEnabled.value)
)

ComponentCustomizationBottomSheetScaffold(
Expand All @@ -81,14 +86,18 @@ fun ComponentTabs(variant: Variant) {
)
Subtitle(textRes = R.string.component_tabs_icon_position, horizontalPadding = true)
OdsChoiceChipsFlowRow(
selectedChoiceChipIndex = OdsTabRow.Tab.Icon.Position.entries.indexOf(tabsIconPosition.value),
selectedChoiceChipIndex = OdsTabRow.Tab.Icon.Position.entries.indexOf(tabIconPosition.value),
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m)),
choiceChips = OdsTabRow.Tab.Icon.Position.entries.map { tabsIconPosition ->
val textResId = when (tabsIconPosition) {
choiceChips = OdsTabRow.Tab.Icon.Position.entries.map { tabIconPosition ->
val textResId = when (tabIconPosition) {
OdsTabRow.Tab.Icon.Position.Top -> R.string.component_tabs_icon_position_top
OdsTabRow.Tab.Icon.Position.Leading -> R.string.component_tabs_icon_position_leading
}
OdsChoiceChipsFlowRow.ChoiceChip(stringResource(id = textResId), { this.tabsIconPosition.value = tabsIconPosition }, isTabsIconPositionEnabled)
OdsChoiceChipsFlowRow.ChoiceChip(
stringResource(id = textResId),
{ this.tabIconPosition.value = tabIconPosition },
isTabIconPositionEnabled
)
}
)

Expand All @@ -101,23 +110,52 @@ fun ComponentTabs(variant: Variant) {
minCount = tabCountMin,
maxCount = tabCountMax
)
}) {
}
) {
HorizontalPager(state = pagerState) { pageIndex ->
val modifier = if (pageIndex == 0) {
Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.padding(top = dimensionResource(id = com.orange.ods.R.dimen.screen_vertical_margin))
} else {
Modifier
.fillMaxSize()
.wrapContentSize(Alignment.Center)
}

HorizontalPager(state = pagerState) { page ->
val textResId = tabs[page].textResId
TabsPagerContentScreen(stringResource(id = textResId))
Column(modifier = modifier) {
if (pageIndex == 0) {
// Display code implementation on first page only
CodeImplementationColumn(modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.screen_horizontal_margin))) {
FunctionCallCode(
name = if (scrollableTabs) OdsComposable.OdsScrollableTabRow.name else OdsComposable.OdsTabRow.name,
parameters = {
int("selectedTabIndex", pageIndex)
list("tabs") {
tabs.forEach { tab ->
classInstance<OdsTabRow.Tab> {
if (tabIconEnabled.value) {
classInstance<OdsTabRow.Tab.Icon>("icon") {
painter()
}
}
if (tabTextEnabled.value) {
text(tab.name)
}
onClick()
}
}
}
enum("tabIconPosition", tabIconPosition.value)
}
)
}
} else {
OdsText(text = stringResource(tabs[pageIndex].textResId), style = OdsTextStyle.BodyL)
}
}
}
}
}
}

@Composable
private fun TabsPagerContentScreen(text: String) {
Column(
modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.Center)
) {
OdsText(text = text, style = OdsTextStyle.BodyL)
}
}
}
10 changes: 5 additions & 5 deletions app/src/main/java/com/orange/ods/app/ui/components/tabs/MainTabsCustomizationState.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,20 @@ fun rememberMainTabsCustomizationState(
bottomSheetScaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
tabsCount: MutableIntState,
pagerState: PagerState = rememberPagerState { tabsCount.intValue.coerceAtLeast(0) },
selectedTabsIconPosition: MutableState<OdsTabRow.Tab.Icon.Position> = rememberSaveable { mutableStateOf(OdsTabRow.Tab.Icon.Position.Top) },
tabIconPosition: MutableState<OdsTabRow.Tab.Icon.Position> = rememberSaveable { mutableStateOf(OdsTabRow.Tab.Icon.Position.Top) },
tabIconEnabled: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) },
tabTextEnabled: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) }
) =
remember(bottomSheetScaffoldState, pagerState, tabsCount, selectedTabsIconPosition, tabIconEnabled, tabTextEnabled) {
MainTabsCustomizationState(bottomSheetScaffoldState, pagerState, tabsCount, selectedTabsIconPosition, tabIconEnabled, tabTextEnabled)
remember(bottomSheetScaffoldState, pagerState, tabsCount, tabIconPosition, tabIconEnabled, tabTextEnabled) {
MainTabsCustomizationState(bottomSheetScaffoldState, pagerState, tabsCount, tabIconPosition, tabIconEnabled, tabTextEnabled)
}

@OptIn(ExperimentalMaterialApi::class, ExperimentalFoundationApi::class)
class MainTabsCustomizationState(
val bottomSheetScaffoldState: BottomSheetScaffoldState,
val pagerState: PagerState,
val tabsCount: MutableIntState,
val tabsIconPosition: MutableState<OdsTabRow.Tab.Icon.Position>,
val tabIconPosition: MutableState<OdsTabRow.Tab.Icon.Position>,
val tabIconEnabled: MutableState<Boolean>,
val tabTextEnabled: MutableState<Boolean>
) {
Expand All @@ -56,7 +56,7 @@ class MainTabsCustomizationState(
val isTabIconCustomizationEnabled: Boolean
get() = tabTextEnabled.value

val isTabsIconPositionEnabled: Boolean
val isTabIconPositionEnabled: Boolean
get() = isTabIconCustomizationEnabled && isTabTextCustomizationEnabled

val tabs: List<NavigationItem>
Expand Down
1 change: 1 addition & 0 deletions app/src/main/java/com/orange/ods/app/ui/utilities/code/KotlinCode.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@ class ParametersBuilder {
fun string(name: String, textValue: String) = add(StringParameter(name, textValue))
fun lambda(name: String, value: String = "") = add(LambdaParameter(name, value))
fun float(name: String, value: Float) = add(FloatParameter(name, value))
fun int(name: String, value: Int) = add(SimpleParameter(name, value.toString()))
fun mutableState(name: String, stateValue: String) = add(MutableStateParameter(name, stateValue))
fun <T : Enum<T>> enum(name: String, value: T) = add(EnumParameter(name, value))
inline fun <reified T> classInstance(name: String, noinline parameters: ParametersBuilder.() -> Unit) =
Expand Down
1 change: 1 addition & 0 deletions changelog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

- \[App\] Display third party libraries in the About section ([#485](https://github.com/Orange-OpenSource/ods-android/issues/485))
- \[App\] Display XML code implementation for components with an XML version available ([#788](https://github.com/Orange-OpenSource/ods-android/issues/788))
- \[App\] Display Compose code implementation for `OdsTabRow` and `OdsScrollableTabRow` ([#549](https://github.com/Orange-OpenSource/ods-android/issues/549))
- \[Doc\] Add XML integration documentation for components with an XML version ([#540](https://github.com/Orange-OpenSource/ods-android/issues/540))
- \[Lib\] Add `OdsSearchTopAppBar` component variant ([#577](https://github.com/Orange-OpenSource/ods-android/issues/577))
- \[Lib\] Add `OdsEmptyStateView` module ([#119](https://github.com/Orange-OpenSource/ods-android/issues/119))
Expand Down

0 comments on commit 8f9a542

Please sign in to comment.