diff --git a/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/products/ProductDetails.kt b/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/products/ProductDetails.kt index 5b0a30e20..e7e3da82d 100644 --- a/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/products/ProductDetails.kt +++ b/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/products/ProductDetails.kt @@ -16,6 +16,10 @@ import androidx.compose.ui.unit.sp import io.opentelemetry.android.demo.clients.ImageLoader import io.opentelemetry.android.demo.gothamFont import io.opentelemetry.android.demo.model.Product +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.ArrowDropDown +import androidx.compose.material.icons.filled.Check +import androidx.compose.ui.Alignment @Composable fun ProductDetails(product:Product){ @@ -61,6 +65,8 @@ fun ProductDetails(product:Product){ textAlign = TextAlign.Center ) Spacer(modifier = Modifier.height(32.dp)) + QuantityChooser() + Spacer(modifier = Modifier.height(16.dp)) Button( onClick = { /* TODO: Handle add to cart */ }, modifier = Modifier @@ -71,3 +77,101 @@ fun ProductDetails(product:Product){ } } } + +@Composable +fun QuantityChooser() { + var quantity by remember { mutableIntStateOf(1) } + var expanded by remember { mutableStateOf(false) } + + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .padding(vertical = 8.dp) + .fillMaxWidth() + .padding(horizontal = 16.dp) + ) { + Text( + text = "Quantity", + fontFamily = gothamFont, + fontSize = 18.sp, + modifier = Modifier.padding(end = 16.dp) + ) + Box( + modifier = Modifier.weight(1f) + ) { + QuantityButton(quantity = quantity, onClick = { expanded = true }) + QuantityDropdown( + expanded = expanded, + onDismissRequest = { expanded = false }, + selectedQuantity = quantity, + onQuantitySelected = { selectedQuantity -> + quantity = selectedQuantity + expanded = false + } + ) + } + } +} + +@Composable +fun QuantityButton(quantity: Int, onClick: () -> Unit) { + OutlinedButton( + onClick = onClick, + modifier = Modifier + .width(120.dp) + .height(48.dp) + ) { + Row( + horizontalArrangement = Arrangement.SpaceBetween, + modifier = Modifier.fillMaxWidth() + ) { + Text( + text = quantity.toString(), + fontSize = 18.sp, + modifier = Modifier.align(Alignment.CenterVertically) + ) + Icon( + imageVector = Icons.Filled.ArrowDropDown, + contentDescription = "Dropdown Icon", + modifier = Modifier.align(Alignment.CenterVertically) + ) + } + } +} + +@Composable +fun QuantityDropdown( + expanded: Boolean, + onDismissRequest: () -> Unit, + selectedQuantity: Int, + onQuantitySelected: (Int) -> Unit +) { + DropdownMenu( + expanded = expanded, + onDismissRequest = onDismissRequest + ) { + for (i in 1..10) { + DropdownMenuItem( + text = { + Row( + verticalAlignment = Alignment.CenterVertically + ) { + if (i == selectedQuantity) { + Icon( + imageVector = Icons.Filled.Check, + contentDescription = "Selected", + tint = Color.Black, + modifier = Modifier.size(18.dp) + ) + Spacer(modifier = Modifier.width(8.dp)) + } + Text( + text = i.toString(), + ) + } + }, + onClick = { onQuantitySelected(i) } + ) + } + } +}