feat: make tabs happen

Signed-off-by: Infi <wingit@geist.ga>
This commit is contained in:
Infi 2023-07-04 18:33:43 +02:00
parent 5981f064b5
commit c0d270b1a8
2 changed files with 76 additions and 62 deletions

View File

@ -0,0 +1,68 @@
package chat.revolt.components.generic
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.viewinterop.AndroidView
import chat.revolt.api.settings.GlobalState
import chat.revolt.ui.theme.Theme
import com.google.android.material.tabs.TabLayout
@Composable
fun PrimaryTabs(tabs: List<String>, currentIndex: Int, onTabSelected: (Int) -> Unit) {
when (GlobalState.theme) {
Theme.M3Dynamic -> AndroidView(
factory = {
TabLayout(it).apply {
tabMode = TabLayout.MODE_FIXED
tabGravity = TabLayout.GRAVITY_FILL
tabs.forEach { tab ->
addTab(newTab().setText(tab))
}
addOnTabSelectedListener(object :
TabLayout.OnTabSelectedListener {
override fun onTabSelected(tab: TabLayout.Tab?) {
onTabSelected(tab?.position ?: 0)
}
override fun onTabUnselected(tab: TabLayout.Tab?) {
}
override fun onTabReselected(tab: TabLayout.Tab?) {
}
})
}
},
update = {
it.getTabAt(currentIndex)?.select()
},
modifier = Modifier.fillMaxWidth()
)
else -> TabRow(selectedTabIndex = currentIndex) {
tabs.forEachIndexed { index, tab ->
Tab(
selected = index == currentIndex,
onClick = { onTabSelected(index) },
text = { Text(tab) }
)
}
}
}
}
@Preview
@Composable
fun PrimaryTabsPreview() {
PrimaryTabs(
tabs = listOf("Tab 1", "Tab 2", "Tab 3"),
currentIndex = 0,
onTabSelected = {}
)
}

View File

@ -18,8 +18,6 @@ import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
@ -38,9 +36,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import androidx.lifecycle.viewmodel.compose.viewModel
@ -51,9 +47,8 @@ import chat.revolt.api.REVOLT_BASE
import chat.revolt.api.RevoltJson
import chat.revolt.api.routes.misc.Root
import chat.revolt.api.routes.misc.getRootRoute
import chat.revolt.api.settings.GlobalState
import chat.revolt.components.generic.PageHeader
import chat.revolt.ui.theme.Theme
import chat.revolt.components.generic.PrimaryTabs
import kotlinx.coroutines.launch
import kotlinx.serialization.encodeToString
import java.net.URI
@ -163,62 +158,13 @@ fun AboutScreen(
showBackButton = true,
onBackButtonClicked = { navController.popBackStack() })
// TODO this should be a reusable "tabs" component
when (GlobalState.theme) {
Theme.M3Dynamic -> AndroidView(
factory = {
com.google.android.material.tabs.TabLayout(it).apply {
tabMode = com.google.android.material.tabs.TabLayout.MODE_FIXED
tabGravity = com.google.android.material.tabs.TabLayout.GRAVITY_FILL
addTab(newTab().setText(it.getString(R.string.about_tab_version)))
addTab(newTab().setText(it.getString(R.string.about_tab_details)))
addOnTabSelectedListener(object :
com.google.android.material.tabs.TabLayout.OnTabSelectedListener {
override fun onTabSelected(tab: com.google.android.material.tabs.TabLayout.Tab?) {
viewModel.selectedTabIndex = tab?.position ?: 0
}
override fun onTabUnselected(tab: com.google.android.material.tabs.TabLayout.Tab?) {
}
override fun onTabReselected(tab: com.google.android.material.tabs.TabLayout.Tab?) {
}
})
}
},
update = {
it.getTabAt(viewModel.selectedTabIndex)?.select()
},
modifier = Modifier.fillMaxWidth()
)
else -> TabRow(selectedTabIndex = viewModel.selectedTabIndex) {
Tab(
selected = viewModel.selectedTabIndex == 0,
onClick = { viewModel.selectedTabIndex = 0 },
text = {
Text(
text = stringResource(R.string.about_tab_version),
maxLines = 2,
overflow = TextOverflow.Ellipsis
)
}
)
Tab(
selected = viewModel.selectedTabIndex == 1,
onClick = { viewModel.selectedTabIndex = 1 },
text = {
Text(
text = stringResource(R.string.about_tab_details),
maxLines = 2,
overflow = TextOverflow.Ellipsis
)
}
)
}
}
PrimaryTabs(
tabs = listOf(
stringResource(R.string.about_tab_version),
stringResource(R.string.about_tab_details)
),
currentIndex = viewModel.selectedTabIndex,
onTabSelected = { viewModel.selectedTabIndex = it })
Column(
modifier = Modifier