124 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			Kotlin
		
	
	
	
	
	
			
		
		
	
	
			124 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			Kotlin
		
	
	
	
	
	
/*
 | 
						|
 * Copyright (C) 2023 The Android Open Source Project
 | 
						|
 *
 | 
						|
 * 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
 | 
						|
 *
 | 
						|
 *      https://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.example.cupcake.ui
 | 
						|
 | 
						|
import androidx.annotation.StringRes
 | 
						|
import androidx.compose.foundation.Image
 | 
						|
import androidx.compose.foundation.layout.Arrangement
 | 
						|
import androidx.compose.foundation.layout.Column
 | 
						|
import androidx.compose.foundation.layout.Row
 | 
						|
import androidx.compose.foundation.layout.Spacer
 | 
						|
import androidx.compose.foundation.layout.fillMaxHeight
 | 
						|
import androidx.compose.foundation.layout.fillMaxSize
 | 
						|
import androidx.compose.foundation.layout.fillMaxWidth
 | 
						|
import androidx.compose.foundation.layout.height
 | 
						|
import androidx.compose.foundation.layout.padding
 | 
						|
import androidx.compose.foundation.layout.width
 | 
						|
import androidx.compose.foundation.layout.widthIn
 | 
						|
import androidx.compose.material3.Button
 | 
						|
import androidx.compose.material3.MaterialTheme
 | 
						|
import androidx.compose.material3.Text
 | 
						|
import androidx.compose.runtime.Composable
 | 
						|
import androidx.compose.ui.Alignment
 | 
						|
import androidx.compose.ui.Modifier
 | 
						|
import androidx.compose.ui.res.dimensionResource
 | 
						|
import androidx.compose.ui.res.painterResource
 | 
						|
import androidx.compose.ui.res.stringResource
 | 
						|
import androidx.compose.ui.tooling.preview.Preview
 | 
						|
import androidx.compose.ui.unit.dp
 | 
						|
import com.example.cupcake.R
 | 
						|
import com.example.cupcake.data.DataSource
 | 
						|
 | 
						|
/**
 | 
						|
 * Composable that allows the user to select the desired cupcake quantity and expects
 | 
						|
 * [onNextButtonClicked] lambda that expects the selected quantity and triggers the navigation to
 | 
						|
 * next screen
 | 
						|
 */
 | 
						|
@Composable
 | 
						|
fun StartOrderScreen(
 | 
						|
    quantityOptions: List<Pair<Int, Int>>,
 | 
						|
    onNextButtonClicked: (Int) -> Unit,
 | 
						|
    modifier: Modifier = Modifier
 | 
						|
){
 | 
						|
    Column(
 | 
						|
        modifier = modifier,
 | 
						|
        verticalArrangement = Arrangement.SpaceBetween
 | 
						|
    ) {
 | 
						|
        Column(
 | 
						|
            modifier = Modifier.fillMaxWidth(),
 | 
						|
            horizontalAlignment = Alignment.CenterHorizontally,
 | 
						|
            verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_small))
 | 
						|
        ) {
 | 
						|
            Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_medium)))
 | 
						|
            Image(
 | 
						|
                painter = painterResource(R.drawable.cupcake),
 | 
						|
                contentDescription = null,
 | 
						|
                modifier = Modifier.width(300.dp)
 | 
						|
            )
 | 
						|
            Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_medium)))
 | 
						|
            Text(
 | 
						|
                text = stringResource(R.string.order_cupcakes),
 | 
						|
                style = MaterialTheme.typography.headlineSmall
 | 
						|
            )
 | 
						|
            Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_small)))
 | 
						|
        }
 | 
						|
        Row(modifier = Modifier.weight(1f, false)) {
 | 
						|
            Column(
 | 
						|
                modifier = Modifier.fillMaxWidth(),
 | 
						|
                horizontalAlignment = Alignment.CenterHorizontally,
 | 
						|
                verticalArrangement = Arrangement.spacedBy(
 | 
						|
                    dimensionResource(id = R.dimen.padding_medium)
 | 
						|
                )
 | 
						|
            ) {
 | 
						|
                quantityOptions.forEach { item ->
 | 
						|
                    SelectQuantityButton(
 | 
						|
                        labelResourceId = item.first,
 | 
						|
                        onClick = { onNextButtonClicked(item.second) }
 | 
						|
                    )
 | 
						|
                }
 | 
						|
            }
 | 
						|
        }
 | 
						|
    }
 | 
						|
}
 | 
						|
 | 
						|
/**
 | 
						|
 * Customizable button composable that displays the [labelResourceId]
 | 
						|
 * and triggers [onClick] lambda when this composable is clicked
 | 
						|
 */
 | 
						|
@Composable
 | 
						|
fun SelectQuantityButton(
 | 
						|
    @StringRes labelResourceId: Int,
 | 
						|
    onClick: () -> Unit,
 | 
						|
    modifier: Modifier = Modifier
 | 
						|
){
 | 
						|
    Button(
 | 
						|
        onClick = onClick,
 | 
						|
        modifier = modifier.widthIn(min = 250.dp)
 | 
						|
    ) {
 | 
						|
        Text(stringResource(labelResourceId))
 | 
						|
    }
 | 
						|
}
 | 
						|
 | 
						|
@Preview
 | 
						|
@Composable
 | 
						|
fun StartOrderPreview(){
 | 
						|
    StartOrderScreen(
 | 
						|
        quantityOptions = DataSource.quantityOptions,
 | 
						|
        onNextButtonClicked = {},
 | 
						|
        modifier = Modifier.fillMaxSize().padding(dimensionResource(R.dimen.padding_medium))
 | 
						|
    )
 | 
						|
}
 |