🛠️ Add CustomBottomSheetTabRow

* Added custom implementation of TabRow to use in BottomSheets

app/src/main/java/ua/acclorite/book_story/presentation/core/components/custom_bottom_sheet/CustomBottomSheet.kt

@@ -1,4 +1,4 @@
-package ua.acclorite.book_story.presentation.core.components
+package ua.acclorite.book_story.presentation.core.components.custom_bottom_sheet
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.ColumnScope

app/src/main/java/ua/acclorite/book_story/presentation/core/components/custom_bottom_sheet/CustomBottomSheetTabRow.kt

@@ -0,0 +1,54 @@
+package ua.acclorite.book_story.presentation.core.components.custom_bottom_sheet
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.PrimaryTabRow
+import androidx.compose.material3.Tab
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+
+/**
+ * Custom Primary Row. Used in BottomSheet in pair with HorizontalPager.
+ * Better to not use too many tabs, as they will overflow.
+ *
+ * @param selectedTabIndex Selected index, typically pager.currentPage.
+ * @param tabs Tabs to be shown, should match HorizontalPager's page count.
+ * @param onClick OnClick callback, gives you an index of clicked item.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun CustomBottomSheetTabRow(
+    selectedTabIndex: Int,
+    tabs: List<String>,
+    onClick: (index: Int) -> Unit
+) {
+    PrimaryTabRow(
+        modifier = Modifier
+            .fillMaxWidth(),
+        selectedTabIndex = selectedTabIndex,
+        containerColor = Color.Transparent
+    ) {
+        tabs.forEachIndexed { index, tabItem ->
+            Tab(
+                selected = selectedTabIndex == index,
+                onClick = {
+                    onClick(index)
+                },
+                selectedContentColor = MaterialTheme.colorScheme.primary,
+                unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
+                text = {
+                    Text(
+                        tabItem,
+                        style = MaterialTheme.typography.bodyLarge,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                }
+            )
+        }
+    }
+}

app/src/main/java/ua/acclorite/book_story/presentation/screens/book_info/components/change_cover_bottom_sheet/BookInfoChangeCoverBottomSheet.kt

@@ -18,10 +18,10 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.R
-import ua.acclorite.book_story.presentation.core.components.CustomBottomSheet
 import ua.acclorite.book_story.presentation.core.components.LocalBookInfoViewModel
 import ua.acclorite.book_story.presentation.core.components.LocalHistoryViewModel
 import ua.acclorite.book_story.presentation.core.components.LocalLibraryViewModel
+import ua.acclorite.book_story.presentation.core.components.custom_bottom_sheet.CustomBottomSheet
 import ua.acclorite.book_story.presentation.core.util.showToast
 import ua.acclorite.book_story.presentation.screens.book_info.data.BookInfoEvent
 import ua.acclorite.book_story.presentation.screens.history.data.HistoryEvent

app/src/main/java/ua/acclorite/book_story/presentation/screens/book_info/components/details_bottom_sheet/BookInfoDetailsBottomSheet.kt

@@ -10,8 +10,8 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.R
-import ua.acclorite.book_story.presentation.core.components.CustomBottomSheet
 import ua.acclorite.book_story.presentation.core.components.LocalBookInfoViewModel
+import ua.acclorite.book_story.presentation.core.components.custom_bottom_sheet.CustomBottomSheet
 import ua.acclorite.book_story.presentation.core.util.showToast
 import ua.acclorite.book_story.presentation.screens.book_info.data.BookInfoEvent
 import java.io.File

app/src/main/java/ua/acclorite/book_story/presentation/screens/browse/components/filter_bottom_sheet/BrowseFilterBottomSheet.kt

@@ -10,8 +10,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import ua.acclorite.book_story.presentation.core.components.CustomBottomSheet
 import ua.acclorite.book_story.presentation.core.components.LocalBrowseViewModel
+import ua.acclorite.book_story.presentation.core.components.custom_bottom_sheet.CustomBottomSheet
 import ua.acclorite.book_story.presentation.screens.browse.data.BrowseEvent
 import ua.acclorite.book_story.presentation.screens.settings.nested.browse.components.subcategories.BrowseFilterSubcategory
 import ua.acclorite.book_story.presentation.screens.settings.nested.browse.components.subcategories.BrowseGeneralSubcategory

app/src/main/java/ua/acclorite/book_story/presentation/screens/browse/components/filter_bottom_sheet/BrowseFilterBottomSheetTabRow.kt

@@ -1,17 +1,10 @@
 package ua.acclorite.book_story.presentation.screens.browse.components.filter_bottom_sheet
 
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.pager.PagerState
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.PrimaryTabRow
-import androidx.compose.material3.Tab
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import ua.acclorite.book_story.R
+import ua.acclorite.book_story.presentation.core.components.custom_bottom_sheet.CustomBottomSheetTabRow
 import ua.acclorite.book_story.presentation.screens.browse.data.BrowseEvent
 
 /**
@@ -21,7 +14,6 @@ import ua.acclorite.book_story.presentation.screens.browse.data.BrowseEvent
  * @param onEvent [BrowseEvent] callback.
  * @param pagerState [PagerState].
  */
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun BrowseFilterBottomSheetTabRow(
     onEvent: (BrowseEvent) -> Unit,
@@ -33,29 +25,10 @@ fun BrowseFilterBottomSheetTabRow(
         stringResource(id = R.string.sort_tab)
     )
 
-    PrimaryTabRow(
+    CustomBottomSheetTabRow(
-        modifier = Modifier
-            .fillMaxWidth(),
         selectedTabIndex = pagerState.currentPage,
-        containerColor = Color.Transparent
+        tabs = tabItems
-    ) {
+    ) { index ->
-        tabItems.forEachIndexed { index, tabItem ->
+        onEvent(BrowseEvent.OnScrollToFilterPage(index, pagerState))
-            Tab(
-                modifier = Modifier,
-                selected = pagerState.currentPage == index,
-                onClick = {
-                    onEvent(BrowseEvent.OnScrollToFilterPage(index, pagerState))
-                },
-                selectedContentColor = MaterialTheme.colorScheme.primary,
-                unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
-                text = {
-                    Text(
-                        tabItem,
-                        style = MaterialTheme.typography.bodyLarge,
-                        maxLines = 1
-                    )
-                }
-            )
-        }
     }
 }

app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/components/settings_bottom_sheet/ReaderSettingsBottomSheet.kt

@@ -19,8 +19,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
-import ua.acclorite.book_story.presentation.core.components.CustomBottomSheet
 import ua.acclorite.book_story.presentation.core.components.LocalReaderViewModel
+import ua.acclorite.book_story.presentation.core.components.custom_bottom_sheet.CustomBottomSheet
 import ua.acclorite.book_story.presentation.screens.reader.data.ReaderEvent
 import ua.acclorite.book_story.presentation.screens.settings.nested.appearance.components.subcategories.ColorsSubcategory
 import ua.acclorite.book_story.presentation.screens.settings.nested.reader.components.ReaderSettingsCategory

app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/components/settings_bottom_sheet/ReaderSettingsBottomSheetTabRow.kt

@@ -1,25 +1,19 @@
 package ua.acclorite.book_story.presentation.screens.reader.components.settings_bottom_sheet
 
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.pager.PagerState
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.PrimaryTabRow
-import androidx.compose.material3.Tab
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextOverflow
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.core.components.LocalReaderViewModel
+import ua.acclorite.book_story.presentation.core.components.custom_bottom_sheet.CustomBottomSheetTabRow
 import ua.acclorite.book_story.presentation.screens.reader.data.ReaderEvent
 
 /**
- * Settings bottom sheet tab row. It is used to switch between categories.
+ * Settings bottom sheet tab row.
+ * It is used to switch between categories.
+ *
+ * @param pagerState PagerState to use along with TabRow.
  */
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ReaderSettingsBottomSheetTabRow(pagerState: PagerState) {
     val onEvent = LocalReaderViewModel.current.onEvent
@@ -29,28 +23,10 @@ fun ReaderSettingsBottomSheetTabRow(pagerState: PagerState) {
         stringResource(id = R.string.color_tab)
     )
 
-    PrimaryTabRow(
+    CustomBottomSheetTabRow(
-        modifier = Modifier
-            .fillMaxWidth(),
         selectedTabIndex = pagerState.currentPage,
-        containerColor = Color.Transparent
+        tabs = tabItems
-    ) {
+    ) { index ->
-        tabItems.forEachIndexed { index, tabItem ->
+        onEvent(ReaderEvent.OnScrollToSettingsPage(index, pagerState))
-            Tab(
-                selected = pagerState.currentPage == index,
-                onClick = {
-                    onEvent(ReaderEvent.OnScrollToSettingsPage(index, pagerState))
-                },
-                selectedContentColor = MaterialTheme.colorScheme.primary,
-                unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
-                text = {
-                    Text(
-                        tabItem,
-                        style = MaterialTheme.typography.bodyLarge,
-                        maxLines = 1
-                    )
-                }
-            )
-        }
     }
 }