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.

Sign up for GitHub

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

Extract PayPalButtonsView Composable from PayPalButtonsFragment #209

Merged
merged 3 commits into from
Nov 15, 2023
Merged

Extract PayPalButtonsView Composable from PayPalButtonsFragment #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fe7a2b8
Add PayPalButtonsView.
sshropshire Nov 13, 2023
45fe8aa
Implement PayPalButtons by extracting a view.
sshropshire Nov 13, 2023
7c848bf
Suppress lint error for LongMethod in PayPalButtonsView.
sshropshire Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 1 addition & 166 deletions Demo/src/main/java/com/paypal/android/ui/paypalbuttons/PayPalButtonsFragment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,19 @@ import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.platform.ViewCompositionStrategy
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.fragment.app.Fragment
import androidx.fragment.app.viewModels
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.paypal.android.R
import com.paypal.android.paymentbuttons.PayLaterButton
import com.paypal.android.paymentbuttons.PayPalButton
import com.paypal.android.paymentbuttons.PayPalCreditButton
import com.paypal.android.paymentbuttons.PaymentButton
import com.paypal.android.paymentbuttons.PaymentButtonColor
import dagger.hilt.android.AndroidEntryPoint

@AndroidEntryPoint
class PayPalButtonsFragment : Fragment() {

private val viewModel by viewModels<PayPalButtonsViewModel>()

@ExperimentalMaterial3Api
override fun onCreateView(
inflater: LayoutInflater,
Expand All @@ -52,151 +28,10 @@ class PayPalButtonsFragment : Fragment() {
setContent {
MaterialTheme {
Surface(modifier = Modifier.fillMaxSize()) {
val uiState by viewModel.uiState.collectAsStateWithLifecycle()
PayPalButtonsView(uiState)
PayPalButtonsView()
}
}
}
}
}

@ExperimentalMaterial3Api
@Composable
fun PayPalButtonsView(uiState: PayPalButtonsUiState) {
val scrollState = rememberScrollState()

Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
Text(
text = stringResource(id = R.string.pay_pal_button_preview),
color = Color.Black,
style = MaterialTheme.typography.titleLarge,
)
Spacer(modifier = Modifier.size(16.dp))
PayPalButtonFactory(uiState = uiState)
Spacer(modifier = Modifier.size(16.dp))
Text(
text = stringResource(id = R.string.pay_pal_button_options),
color = Color.Black,
style = MaterialTheme.typography.titleLarge,
)
Spacer(modifier = Modifier.size(16.dp))
Column(
modifier = Modifier
.fillMaxWidth()
.weight(1.0f)
.verticalScroll(scrollState)
) {
PayPalButtonFundingTypeOptionList(
selectedOption = uiState.fundingType,
onSelection = { value -> viewModel.selectedFundingType = value }
)
Spacer(modifier = Modifier.size(8.dp))
PayPalButtonColorOptionListFactory(uiState = uiState)
if (uiState.fundingType == ButtonFundingType.PAYPAL) {
Spacer(modifier = Modifier.size(8.dp))
PayPalButtonLabelOptionList(
selectedOption = uiState.payPalButtonLabel,
onSelection = { value -> viewModel.payPalButtonLabel = value }
)
}
Spacer(modifier = Modifier.size(8.dp))
PaymentButtonShapeOptionList(
selectedOption = uiState.paymentButtonShape,
onSelection = { value -> viewModel.paymentButtonShape = value }
)
Spacer(modifier = Modifier.size(8.dp))
PaymentButtonSizeOptionList(
selectedOption = uiState.paymentButtonSize,
onSelection = { value -> viewModel.paymentButtonSize = value }
)
}
}
}

@Composable
fun PayPalButtonFactory(uiState: PayPalButtonsUiState) {
when (uiState.fundingType) {
ButtonFundingType.PAYPAL -> {
AndroidView(
factory = { context ->
PayPalButton(context)
},
update = { button ->
configureButton(button, uiState)
},
modifier = Modifier.fillMaxWidth()
)
}

ButtonFundingType.PAY_LATER -> {
AndroidView(
factory = { context ->
PayLaterButton(context)
},
update = { button ->
configureButton(button, uiState)
},
modifier = Modifier.fillMaxWidth()
)
}

ButtonFundingType.PAYPAL_CREDIT -> {
AndroidView(
factory = { context ->
PayPalCreditButton(context)
},
update = { button ->
configureButton(button, uiState)
},
modifier = Modifier.fillMaxWidth()
)
}
}
}

private fun configureButton(
button: PaymentButton<out PaymentButtonColor>,
uiState: PayPalButtonsUiState
) {
button.shape = uiState.paymentButtonShape
button.size = uiState.paymentButtonSize

if (button is PayPalButton) {
button.label = uiState.payPalButtonLabel
}

if (button is PayPalCreditButton) {
button.color = uiState.payPalCreditButtonColor
} else {
button.color = uiState.payPalButtonColor
}
}

@Composable
fun PayPalButtonColorOptionListFactory(uiState: PayPalButtonsUiState) {
when (uiState.fundingType) {
ButtonFundingType.PAYPAL,
ButtonFundingType.PAY_LATER -> {
PayPalButtonColorOptionList(
selectedOption = uiState.payPalButtonColor,
onSelection = { value ->
viewModel.payPalButtonColor = value
}
)
}

ButtonFundingType.PAYPAL_CREDIT -> {
PayPalCreditButtonColorOptionList(
selectedOption = uiState.payPalCreditButtonColor,
onSelection = { value ->
viewModel.payPalCreditButtonColor = value
}
)
}
}
}
}
182 changes: 182 additions & 0 deletions Demo/src/main/java/com/paypal/android/ui/paypalbuttons/PayPalButtonsView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
package com.paypal.android.ui.paypalbuttons

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
import com.paypal.android.R
import com.paypal.android.paymentbuttons.PayLaterButton
import com.paypal.android.paymentbuttons.PayPalButton
import com.paypal.android.paymentbuttons.PayPalButtonColor
import com.paypal.android.paymentbuttons.PayPalCreditButton
import com.paypal.android.paymentbuttons.PayPalCreditButtonColor
import com.paypal.android.paymentbuttons.PaymentButton
import com.paypal.android.paymentbuttons.PaymentButtonColor

@Suppress("LongMethod")
@ExperimentalMaterial3Api
@Composable
fun PayPalButtonsView(viewModel: PayPalButtonsViewModel = viewModel()) {
val uiState by viewModel.uiState.collectAsStateWithLifecycle()
val scrollState = rememberScrollState()

Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
Text(
text = stringResource(id = R.string.pay_pal_button_preview),
color = Color.Black,
style = MaterialTheme.typography.titleLarge,
)
Spacer(modifier = Modifier.size(16.dp))
PayPalButtonFactory(uiState = uiState)
Spacer(modifier = Modifier.size(16.dp))
Text(
text = stringResource(id = R.string.pay_pal_button_options),
color = Color.Black,
style = MaterialTheme.typography.titleLarge,
)
Spacer(modifier = Modifier.size(16.dp))
Column(
modifier = Modifier
.fillMaxWidth()
.weight(1.0f)
.verticalScroll(scrollState)
) {
PayPalButtonFundingTypeOptionList(
selectedOption = uiState.fundingType,
onSelection = { value -> viewModel.selectedFundingType = value }
)
Spacer(modifier = Modifier.size(8.dp))
PayPalButtonColorOptionListFactory(
fundingType = uiState.fundingType,
payPalButtonColor = uiState.payPalButtonColor,
payPalCreditButtonColor = uiState.payPalCreditButtonColor,
onPayPalButtonColorChange = { value -> viewModel.payPalButtonColor = value },
onPayPalCreditButtonColorChange = { value ->
viewModel.payPalCreditButtonColor = value
}
)
if (uiState.fundingType == ButtonFundingType.PAYPAL) {
Spacer(modifier = Modifier.size(8.dp))
PayPalButtonLabelOptionList(
selectedOption = uiState.payPalButtonLabel,
onSelection = { value -> viewModel.payPalButtonLabel = value }
)
}
Spacer(modifier = Modifier.size(8.dp))
PaymentButtonShapeOptionList(
selectedOption = uiState.paymentButtonShape,
onSelection = { value -> viewModel.paymentButtonShape = value }
)
Spacer(modifier = Modifier.size(8.dp))
PaymentButtonSizeOptionList(
selectedOption = uiState.paymentButtonSize,
onSelection = { value -> viewModel.paymentButtonSize = value }
)
}
}
}

@Composable
fun PayPalButtonFactory(uiState: PayPalButtonsUiState) {
when (uiState.fundingType) {
ButtonFundingType.PAYPAL -> {
AndroidView(
factory = { context ->
PayPalButton(context)
},
update = { button ->
configureButton(button, uiState)
},
modifier = Modifier.fillMaxWidth()
)
}

ButtonFundingType.PAY_LATER -> {
AndroidView(
factory = { context ->
PayLaterButton(context)
},
update = { button ->
configureButton(button, uiState)
},
modifier = Modifier.fillMaxWidth()
)
}

ButtonFundingType.PAYPAL_CREDIT -> {
AndroidView(
factory = { context ->
PayPalCreditButton(context)
},
update = { button ->
configureButton(button, uiState)
},
modifier = Modifier.fillMaxWidth()
)
}
}
}

private fun configureButton(
button: PaymentButton<out PaymentButtonColor>,
uiState: PayPalButtonsUiState
) {
button.shape = uiState.paymentButtonShape
button.size = uiState.paymentButtonSize

if (button is PayPalButton) {
button.label = uiState.payPalButtonLabel
}

if (button is PayPalCreditButton) {
button.color = uiState.payPalCreditButtonColor
} else {
button.color = uiState.payPalButtonColor
}
}

@Composable
fun PayPalButtonColorOptionListFactory(
fundingType: ButtonFundingType,
payPalButtonColor: PayPalButtonColor,
payPalCreditButtonColor: PayPalCreditButtonColor,
onPayPalButtonColorChange: (PayPalButtonColor) -> Unit,
onPayPalCreditButtonColorChange: (PayPalCreditButtonColor) -> Unit,
) {
when (fundingType) {
ButtonFundingType.PAYPAL,
ButtonFundingType.PAY_LATER -> {
PayPalButtonColorOptionList(
selectedOption = payPalButtonColor,
onSelection = onPayPalButtonColorChange,
)
}

ButtonFundingType.PAYPAL_CREDIT -> {
PayPalCreditButtonColorOptionList(
selectedOption = payPalCreditButtonColor,
onSelection = onPayPalCreditButtonColorChange,
)
}
}
}
Loading