diff --git a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/BeeTablesCompose.kt b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/BeeTablesCompose.kt index 2aece75..a6dbac6 100644 --- a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/BeeTablesCompose.kt +++ b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/BeeTablesCompose.kt @@ -33,6 +33,8 @@ import com.breens.beetablescompose.components.TableHeaderComponentWithoutColumnD import com.breens.beetablescompose.components.TableRowComponent import com.breens.beetablescompose.components.TableRowComponentWithoutDividers import com.breens.beetablescompose.utils.extractMembers +import com.breens.beetablescompose.utils.lightColor +import com.breens.beetablescompose.utils.lightGray /** * 🐝 A Compose UI data table library. @@ -61,21 +63,24 @@ inline fun BeeTablesCompose( data: List, enableTableHeaderTitles: Boolean = true, headerTableTitles: List, - headerTitlesBorderColor: Color = Color.LightGray, + headerTitlesBorderColor: Color = lightGray(), headerTitlesTextStyle: TextStyle = MaterialTheme.typography.bodySmall, - headerTitlesBackGroundColor: Color = Color.White, - tableRowColors: List = listOf(Color.White, Color.White), - rowBorderColor: Color = Color.LightGray, + headerTitlesBackGroundColor: Color = lightColor(), + tableRowColors: List = listOf( + lightColor(), + lightColor(), + ), + rowBorderColor: Color = lightGray(), rowTextStyle: TextStyle = MaterialTheme.typography.bodySmall, tableElevation: Dp = 0.dp, shape: RoundedCornerShape = RoundedCornerShape(4.dp), borderStroke: BorderStroke = BorderStroke( width = 1.dp, - color = Color.LightGray, + color = lightGray(), ), disableVerticalDividers: Boolean = false, dividerThickness: Dp = 1.dp, - horizontalDividerColor: Color = Color.LightGray, + horizontalDividerColor: Color = lightGray(), contentAlignment: Alignment = Alignment.Center, textAlign: TextAlign = TextAlign.Center, tablePadding: Dp = 0.dp, diff --git a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponent.kt b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponent.kt index 2b9a080..23dc5f9 100644 --- a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponent.kt +++ b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponent.kt @@ -35,6 +35,8 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import com.breens.beetablescompose.utils.darkColor +import com.breens.beetablescompose.utils.lightGray @Composable fun TableHeaderComponent( @@ -85,9 +87,9 @@ fun TableHeaderComponentPreview() { val titles = listOf("Team", "Home", "Away", "Points") TableHeaderComponent( headerTableTitles = titles, - headerTitlesBorderColor = Color.Black, + headerTitlesBorderColor = darkColor(), headerTitlesTextStyle = MaterialTheme.typography.labelMedium, - headerTitlesBackGroundColor = Color.LightGray, + headerTitlesBackGroundColor = lightGray(), contentAlignment = Alignment.Center, textAlign = TextAlign.Center, tablePadding = 0.dp, diff --git a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponentWithoutColumnDividers.kt b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponentWithoutColumnDividers.kt index 4eef107..811b527 100644 --- a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponentWithoutColumnDividers.kt +++ b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponentWithoutColumnDividers.kt @@ -36,6 +36,7 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import com.breens.beetablescompose.utils.lightColor @Composable fun TableHeaderComponentWithoutColumnDividers( @@ -91,7 +92,7 @@ fun TableHeaderComponentWithoutColumnDividersPreview() { TableHeaderComponentWithoutColumnDividers( headerTableTitles = titles, headerTitlesTextStyle = MaterialTheme.typography.bodySmall, - headerTitlesBackGroundColor = Color.White, + headerTitlesBackGroundColor = lightColor(), dividerThickness = 1.dp, contentAlignment = Alignment.Center, textAlign = TextAlign.Center, diff --git a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableRowComponent.kt b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableRowComponent.kt index f1212b2..d001bc6 100644 --- a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableRowComponent.kt +++ b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableRowComponent.kt @@ -35,6 +35,8 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import com.breens.beetablescompose.utils.lightColor +import com.breens.beetablescompose.utils.lightGray @Composable fun TableRowComponent( @@ -87,9 +89,9 @@ fun TableRowComponentPreview() { TableRowComponent( data = titles, - rowBorderColor = Color.LightGray, + rowBorderColor = lightGray(), rowTextStyle = MaterialTheme.typography.bodySmall, - rowBackGroundColor = Color.White, + rowBackGroundColor = lightColor(), contentAlignment = Alignment.Center, textAlign = TextAlign.Center, tablePadding = 0.dp, diff --git a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableRowComponentWithoutVerticalDividers.kt b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableRowComponentWithoutVerticalDividers.kt index 5ee9766..d579067 100644 --- a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableRowComponentWithoutVerticalDividers.kt +++ b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableRowComponentWithoutVerticalDividers.kt @@ -36,6 +36,7 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import com.breens.beetablescompose.utils.lightGray @Composable fun TableRowComponentWithoutDividers( @@ -94,9 +95,9 @@ fun TableRowComponentWithoutDividersPreview() { TableRowComponentWithoutDividers( data = titles, rowTextStyle = MaterialTheme.typography.bodySmall, - rowBackGroundColor = Color.White, + rowBackGroundColor = MaterialTheme.colorScheme.background, dividerThickness = 1.dp, - horizontalDividerColor = Color.LightGray, + horizontalDividerColor = lightGray(), contentAlignment = Alignment.Center, textAlign = TextAlign.Center, tablePadding = 0.dp, diff --git a/BeeTablesCompose/src/main/java/com/breens/beetablescompose/utils/ColorUtils.kt b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/utils/ColorUtils.kt new file mode 100644 index 0000000..9017dba --- /dev/null +++ b/BeeTablesCompose/src/main/java/com/breens/beetablescompose/utils/ColorUtils.kt @@ -0,0 +1,28 @@ +/* + * Copyright 2023 Breens Mbaka + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +package com.breens.beetablescompose.utils + +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable + +@Composable +fun lightGray() = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.12f) + +@Composable +fun darkColor() = MaterialTheme.colorScheme.onBackground + +@Composable +fun lightColor() = MaterialTheme.colorScheme.background diff --git a/app/src/main/java/com/breens/beetablescompose/MainActivity.kt b/app/src/main/java/com/breens/beetablescompose/MainActivity.kt index 3afd623..4cbdbbf 100644 --- a/app/src/main/java/com/breens/beetablescompose/MainActivity.kt +++ b/app/src/main/java/com/breens/beetablescompose/MainActivity.kt @@ -29,6 +29,7 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material3.Checkbox import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Slider +import androidx.compose.material3.Surface import androidx.compose.material3.Switch import androidx.compose.material3.Text import androidx.compose.runtime.getValue @@ -40,6 +41,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp +import com.breens.beetablescompose.ui.theme.BeeTablesComposeTheme import com.breens.beetablescompose.utils.premierLeagueTeams import com.breens.beetablescompose.utils.titles @@ -47,212 +49,218 @@ class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { - var disableVerticalDividers by remember { - mutableStateOf(false) - } - var horizontalDividerThickness by remember { - mutableStateOf(0.6f) - } - - var enableHeaderTitles by remember { - mutableStateOf(false) - } - - var centerContent by remember { - mutableStateOf(false) - } - - var centerTextAlignment by remember { - mutableStateOf(false) - } - - var increaseColumnWidth by remember { - mutableStateOf(null) - } + BeeTablesComposeTheme { + Surface( + color = MaterialTheme.colorScheme.background, + ) { + var disableVerticalDividers by remember { + mutableStateOf(false) + } + var horizontalDividerThickness by remember { + mutableStateOf(0.6f) + } - LazyColumn(contentPadding = PaddingValues(16.dp)) { - item { - BeeTablesCompose( - data = premierLeagueTeams, - enableTableHeaderTitles = enableHeaderTitles, - disableVerticalDividers = disableVerticalDividers, - dividerThickness = horizontalDividerThickness.dp, - columnToIndexIncreaseWidth = increaseColumnWidth?.minus(1), - headerTableTitles = titles, - headerTitlesBackGroundColor = Color(0XFFE9AB17), - tableRowColors = listOf( - MaterialTheme.colorScheme.surface, - MaterialTheme.colorScheme.surface, - ), - contentAlignment = if (centerContent) Alignment.Center else Alignment.CenterStart, - textAlign = if (centerTextAlignment) TextAlign.Center else TextAlign.Start, - ) + var enableHeaderTitles by remember { + mutableStateOf(false) + } - Spacer(modifier = Modifier.padding(12.dp)) - } + var centerContent by remember { + mutableStateOf(false) + } - item { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Enable Table Header Titles", - style = MaterialTheme.typography.bodyMedium, - ) - Switch( - checked = enableHeaderTitles, - onCheckedChange = { - enableHeaderTitles = it - }, - ) + var centerTextAlignment by remember { + mutableStateOf(false) } - Spacer(modifier = Modifier.padding(12.dp)) - } - item { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Hide Vertical Divider", - style = MaterialTheme.typography.bodyMedium, - ) - Switch( - checked = disableVerticalDividers, - onCheckedChange = { - disableVerticalDividers = it - }, - ) + var increaseColumnWidth by remember { + mutableStateOf(null) } - Spacer(modifier = Modifier.padding(8.dp)) - } + LazyColumn(contentPadding = PaddingValues(16.dp)) { + item { + BeeTablesCompose( + data = premierLeagueTeams, + enableTableHeaderTitles = enableHeaderTitles, + disableVerticalDividers = disableVerticalDividers, + dividerThickness = horizontalDividerThickness.dp, + columnToIndexIncreaseWidth = increaseColumnWidth?.minus(1), + headerTableTitles = titles, + headerTitlesBackGroundColor = Color(0XFFE9AB17), + tableRowColors = listOf( + MaterialTheme.colorScheme.surface, + MaterialTheme.colorScheme.surface, + ), + contentAlignment = if (centerContent) Alignment.Center else Alignment.CenterStart, + textAlign = if (centerTextAlignment) TextAlign.Center else TextAlign.Start, + ) - item { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Divider Thickness", - style = MaterialTheme.typography.bodyMedium, - ) + Spacer(modifier = Modifier.padding(12.dp)) + } - Slider(value = horizontalDividerThickness, onValueChange = { - horizontalDividerThickness = it - }) - } - } + item { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Enable Table Header Titles", + style = MaterialTheme.typography.bodyMedium, + ) + Switch( + checked = enableHeaderTitles, + onCheckedChange = { + enableHeaderTitles = it + }, + ) + } - item { - Spacer(modifier = Modifier.padding(12.dp)) + Spacer(modifier = Modifier.padding(12.dp)) + } + item { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Hide Vertical Divider", + style = MaterialTheme.typography.bodyMedium, + ) + Switch( + checked = disableVerticalDividers, + onCheckedChange = { + disableVerticalDividers = it + }, + ) + } - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Center Content", - style = MaterialTheme.typography.bodyMedium, - ) - Switch( - checked = centerContent, - onCheckedChange = { - centerContent = it - }, - ) - } + Spacer(modifier = Modifier.padding(8.dp)) + } - Spacer(modifier = Modifier.padding(12.dp)) - } + item { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Divider Thickness", + style = MaterialTheme.typography.bodyMedium, + ) - item { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Text Alignment Center", - style = MaterialTheme.typography.bodyMedium, - ) - Switch( - checked = centerTextAlignment, - onCheckedChange = { - centerTextAlignment = it - }, - ) - } + Slider(value = horizontalDividerThickness, onValueChange = { + horizontalDividerThickness = it + }) + } + } - Spacer(modifier = Modifier.padding(12.dp)) - } + item { + Spacer(modifier = Modifier.padding(12.dp)) - item { - Column { - Text( - text = "The Column To Increase Width", - style = MaterialTheme.typography.bodyMedium, - ) - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text(text = "1", style = MaterialTheme.typography.bodySmall) - Checkbox( - checked = increaseColumnWidth == 1, - onCheckedChange = { - increaseColumnWidth = if (it) 1 else null - }, - ) - } + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Center Content", + style = MaterialTheme.typography.bodyMedium, + ) + Switch( + checked = centerContent, + onCheckedChange = { + centerContent = it + }, + ) + } - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text(text = "2", style = MaterialTheme.typography.bodySmall) - Checkbox( - checked = increaseColumnWidth == 2, - onCheckedChange = { - increaseColumnWidth = if (it) 2 else null - }, - ) + Spacer(modifier = Modifier.padding(12.dp)) } - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text(text = "3", style = MaterialTheme.typography.bodySmall) - Checkbox( - checked = increaseColumnWidth == 3, - onCheckedChange = { - increaseColumnWidth = if (it) 3 else null - }, - ) + item { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Text Alignment Center", + style = MaterialTheme.typography.bodyMedium, + ) + Switch( + checked = centerTextAlignment, + onCheckedChange = { + centerTextAlignment = it + }, + ) + } + + Spacer(modifier = Modifier.padding(12.dp)) } - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text(text = "4", style = MaterialTheme.typography.bodySmall) - Checkbox( - checked = increaseColumnWidth == 4, - onCheckedChange = { - increaseColumnWidth = if (it) 4 else null - }, - ) + item { + Column { + Text( + text = "The Column To Increase Width", + style = MaterialTheme.typography.bodyMedium, + ) + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text(text = "1", style = MaterialTheme.typography.bodySmall) + Checkbox( + checked = increaseColumnWidth == 1, + onCheckedChange = { + increaseColumnWidth = if (it) 1 else null + }, + ) + } + + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text(text = "2", style = MaterialTheme.typography.bodySmall) + Checkbox( + checked = increaseColumnWidth == 2, + onCheckedChange = { + increaseColumnWidth = if (it) 2 else null + }, + ) + } + + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text(text = "3", style = MaterialTheme.typography.bodySmall) + Checkbox( + checked = increaseColumnWidth == 3, + onCheckedChange = { + increaseColumnWidth = if (it) 3 else null + }, + ) + } + + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text(text = "4", style = MaterialTheme.typography.bodySmall) + Checkbox( + checked = increaseColumnWidth == 4, + onCheckedChange = { + increaseColumnWidth = if (it) 4 else null + }, + ) + } + } } } }