Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds ExpandableCard State and uses it in TraceOptions #619

Merged
Merged
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,6 @@ import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
Expand Down Expand Up @@ -68,15 +64,13 @@ fun ExpandableCard(
title: String = "",
description: (@Composable () -> Unit)? = null,
toggleable: Boolean = true,
initialExpandedState: Boolean = true,
expandableCardState: ExpandableCardState = rememberExpandableCardState(),
padding: PaddingValues = PaddingValues(16.dp),
colorScheme: ExpandableCardColorScheme = ExpandableCardDefaults.colorScheme(),
shapes: ExpandableCardShapes = ExpandableCardDefaults.shapes(),
typography: ExpandableCardTypography = ExpandableCardDefaults.typography(),
content: @Composable () -> Unit = {}
) {
var expanded by rememberSaveable { mutableStateOf(initialExpandedState) }

ExpandableCardTheme(
colorScheme = colorScheme,
shapes = shapes,
Expand All @@ -100,14 +94,14 @@ fun ExpandableCard(
colors = colorScheme,
shapes = shapes,
typography = typography,
isExpanded = expanded
isExpanded = expandableCardState.isExpanded,
) {
if (toggleable) {
expanded = !expanded
expandableCardState.toggle()
}
}

AnimatedVisibility(visible = expanded) {
AnimatedVisibility(visible = expandableCardState.isExpanded) {
content()
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
/*
* Copyright 2024 Esri
*
* 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.arcgismaps.toolkit.ui.expandablecard

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.Saver
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue

/**
* State object that can be hoisted to control the [ExpandableCard].
*
* In most cases, this will be created using [rememberExpandableCardState].
* @since 200.6.0
*/
class ExpandableCardState internal constructor(initialExpandedState: Boolean) {
/**
* The expanded state of the [ExpandableCard].
* @since 200.6.0
*/
internal var isExpanded by mutableStateOf(initialExpandedState)
private set

/**
* Toggles the expanded state of the [ExpandableCard].
*
* @since 200.6.0
*/
fun toggle() {
isExpanded = !isExpanded
}
}

/**
* Remember the state of [ExpandableCard].
*
* @param isExpanded the initial expanded state
* @since 200.6.0
*/
@Composable
fun rememberExpandableCardState(
isExpanded: Boolean = true
): ExpandableCardState {
return rememberSaveable(
saver = Saver(
save = { it.isExpanded},
restore = { ExpandableCardState(it) }
)
) {
ExpandableCardState(isExpanded)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -25,25 +25,35 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.arcgismaps.toolkit.ui.expandablecard.ExpandableCard
import com.arcgismaps.toolkit.ui.expandablecard.ExpandableCardState
import com.arcgismaps.toolkit.ui.expandablecard.rememberExpandableCardState

/**
* Composable that displays an expandable card with a label and its content.
*
* @since 200.6.0
*/
@Composable
internal fun ExpandableCardWithLabel(title: String, value: String, content: @Composable () -> Unit) {
internal fun ExpandableCardWithLabel(
labelText: String,
contentTitle: String,
expandableCardState: ExpandableCardState = rememberExpandableCardState(false),
content: @Composable () -> Unit
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(top = 16.dp)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we removing these padding values ?
They are making the result screen look congested.

Before

featureBranch featureBranch

After

featureBranch featureBranch

Also notice that AdvancedOptions is smaller that Feature and FunctionResult Card in the after picture.
It needs to be the same size the ones above it.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be fixed in a follow up PR.
This padding value will go on the outside composable for TraceResult as a Spacer.

) {
Text(
title,
labelText,
color = MaterialTheme.colorScheme.tertiary,
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.padding(start = 20.dp, bottom = 8.dp)
modifier = Modifier.padding(start = 16.dp, bottom = 8.dp)
)
ExpandableCard(
initialExpandedState = false,
title = value,
expandableCardState = expandableCardState,
title = contentTitle,
padding = PaddingValues(0.dp),
modifier = Modifier.padding(horizontal = 4.dp)
) {
content()
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ internal fun FeatureResultsDetailsScreen(
private fun FeatureList(assetTypeList: List<UtilityElement>, onFeatureSelected: (UtilityElement) -> Unit) {
Surface(modifier = Modifier.fillMaxWidth()) {
Column {
ExpandableCardWithLabel(assetTypeList[0].assetType.name, value = assetTypeList.size.toString()) {
ExpandableCardWithLabel(assetTypeList[0].assetType.name, contentTitle = assetTypeList.size.toString()) {
Column {
assetTypeList.forEach { utilityElement ->
HorizontalDivider()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@
*/
package com.arcgismaps.toolkit.utilitynetworks.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
Expand All @@ -36,11 +34,8 @@ import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.Icon
Expand All @@ -52,25 +47,28 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import com.arcgismaps.toolkit.ui.expandablecard.ExpandableCard
import com.arcgismaps.toolkit.ui.expandablecard.rememberExpandableCardState
import com.arcgismaps.toolkit.utilitynetworks.R
import com.arcgismaps.toolkit.utilitynetworks.StartingPoint
import com.arcgismaps.toolkit.utilitynetworks.internal.util.ExpandableCardWithLabel
import com.arcgismaps.toolkit.utilitynetworks.internal.util.AdvancedOptionsRow
import com.arcgismaps.toolkit.utilitynetworks.internal.util.ColorPicker
import com.arcgismaps.toolkit.utilitynetworks.internal.util.TabRow
Expand Down Expand Up @@ -183,85 +181,63 @@ private fun TraceConfigurations(
selectedConfig: UtilityNamedTraceConfiguration?,
onTraceSelected: (UtilityNamedTraceConfiguration) -> Unit
) {
TraceConfigurations(configs.map { it.name }, selectedConfigName = selectedConfig?.name ?: "") { index ->
TraceConfigurations(
configs = configs.map { it.name },
selectedConfigName = selectedConfig?.name ?: LocalContext.current.getString(R.string.no_configuration_selected)
) { index ->
onTraceSelected(configs[index])
}
}

@Composable
private fun TraceConfigurations(
configs: List<String>,
selectedConfigName: String?,
selectedConfigName: String,
onTraceSelected: (Int) -> Unit
) {
var showDropdown by rememberSaveable {
mutableStateOf(false)
val expandableCardState = rememberExpandableCardState(false)
var selectedConfigIndex by rememberSaveable { mutableIntStateOf(-1) }
ExpandableCardWithLabel(
expandableCardState = expandableCardState,
labelText = stringResource(id = R.string.trace_configuration),
contentTitle = selectedConfigName
) {
Column {
configs.forEachIndexed { index, name ->
TraceConfiguration(name = name, isSelected = selectedConfigIndex == index) {
selectedConfigIndex = index
expandableCardState.toggle()
onTraceSelected(index)
}
}
}
}
ReadOnlyTextField(stringResource(id = R.string.trace_configuration), modifier = Modifier.padding(horizontal = 4.dp))
Column(
}

@Composable
private fun TraceConfiguration(
name: String, isSelected: Boolean, onClicked: () -> Unit
) {
Row(
modifier = Modifier
.padding(horizontal = 4.dp)
.border(
width = 1.dp,
color = MaterialTheme.colorScheme.outline.copy(alpha = 0.6f),
shape = RoundedCornerShape(5.dp)
)
.background(color = MaterialTheme.colorScheme.background)
.fillMaxWidth()
.clickable { onClicked() }
) {
Row (
ReadOnlyTextField(
modifier = Modifier
.fillMaxWidth()
.padding(4.dp)
.clickable {
showDropdown = !showDropdown
},
verticalAlignment = Alignment.CenterVertically
) {
ReadOnlyTextField(
text = selectedConfigName ?: "",
modifier = Modifier.clickable {
showDropdown = !showDropdown
},
trailingIcon = {
.padding(start = 5.dp)
.height(40.dp),
text = name,
trailingIcon = {
if (isSelected) {
Icon(
imageVector = Icons.Filled.MoreVert,
contentDescription = "Edit icon",
imageVector = Icons.Filled.Done,
contentDescription = stringResource(R.string.selected_icon),
modifier = Modifier.size(FilterChipDefaults.IconSize)
)
}
)
}
}
MaterialTheme(shapes = MaterialTheme.shapes.copy(extraSmall = RoundedCornerShape(16.dp))) {
DropdownMenu(
expanded = showDropdown,
offset = DpOffset.Zero,
onDismissRequest = { showDropdown = false }) {
configs.forEachIndexed { index, name ->
DropdownMenuItem(
text = {
ReadOnlyTextField(
text = name, leadingIcon = if (name == selectedConfigName) {
{
Icon(
imageVector = Icons.Filled.Done,
contentDescription = "Done icon",
modifier = Modifier.size(FilterChipDefaults.IconSize)
)
}
} else {
null
}
)
},
onClick = {
onTraceSelected(index)
showDropdown = false
},
contentPadding = PaddingValues(vertical = 0.dp, horizontal = 10.dp)
)
}
}
)
}
}

Expand Down Expand Up @@ -357,7 +333,7 @@ internal fun AdvancedOptions(
ExpandableCard(
title = stringResource(id = R.string.advanced_options),
toggleable = true,
initialExpandedState = false,
expandableCardState = rememberExpandableCardState(isExpanded = false),
padding = PaddingValues(horizontal = 4.dp)
) {
Column {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.arcgismaps.toolkit.ui.expandablecard.ExpandableCard
import com.arcgismaps.toolkit.ui.expandablecard.rememberExpandableCardState
import com.arcgismaps.toolkit.utilitynetworks.R
import com.arcgismaps.toolkit.utilitynetworks.TraceRun
import com.arcgismaps.toolkit.utilitynetworks.internal.util.AdvancedOptionsRow
Expand Down Expand Up @@ -180,7 +181,7 @@ private fun FeatureResult(featureResults: List<UtilityElement>, onFeatureAssetGr

Surface(modifier = Modifier.fillMaxWidth()) {
Column {
ExpandableCardWithLabel(stringResource(R.string.feature_results), value = featureResults.size.toString()) {
ExpandableCardWithLabel(stringResource(R.string.feature_results), contentTitle = featureResults.size.toString()) {
Column {
assetGroupNames.forEach { assetGroupName ->
HorizontalDivider()
Expand Down Expand Up @@ -223,7 +224,7 @@ private fun elementsInAssetGroup(assetGroup: String, featureResults: List<Utilit
private fun FunctionResult(functionResults: List<UtilityTraceFunctionOutput>) {
Surface(modifier = Modifier.fillMaxWidth()) {
Column {
ExpandableCardWithLabel(stringResource(R.string.function_results), value = functionResults.size.toString()) {
ExpandableCardWithLabel(stringResource(R.string.function_results), contentTitle = functionResults.size.toString()) {
Column {
functionResults.forEach { functionResult ->
HorizontalDivider()
Expand Down Expand Up @@ -269,7 +270,7 @@ internal fun AdvancedOptions(
ExpandableCard(
title = stringResource(id = R.string.advanced_options),
toggleable = true,
initialExpandedState = false,
expandableCardState = rememberExpandableCardState(false),
padding = PaddingValues(horizontal = 4.dp)
) {
Column {
Expand Down
Loading