Skip to content

Commit

Permalink
fix: PR review
Browse files Browse the repository at this point in the history
  • Loading branch information
@corentin-stamper
corentin-stamper committed May 20, 2023
1 parent 8d67ff4 commit 7f0cb5e
Show file tree
Hide file tree
Showing 28 changed files with 227 additions and 305 deletions.
42 changes: 23 additions & 19 deletions modals/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@ first add the Gradle dependency in your Gradle file:
implementation("com.decathlon.vitamin.compose:modals:<versions>")
```

### Acknowledge
### Primary

#### To display an information

```kotlin
object VitaminModals {
@Composable
fun Acknowledge(
fun Primary(
content: @Composable (() -> Unit),
onDismissRequest: () -> Unit,
modifier: Modifier = Modifier,
Expand All @@ -32,12 +34,12 @@ object VitaminModals {
}
```

The Acknowledge modal used to provide information.
This Primary modal implementation used to provide information.

The minimal usage of the component is callback to be notified when the user need to dismiss the modal.

```kotlin
VitaminModals.Acknowledge(
VitaminModals.Primary(
content = {
Text(text = "Simple information displayed to the user")
},
Expand All @@ -63,55 +65,57 @@ Parameters | Descriptions
`contentScrollState: ScrollState = rememberScrollState()` | The optional scroll state to observe the scrolling
`colors: ModalColors = VitaminModalColors.primary()` | The optional sizes used to define colors of icon, title, content and background of the modal
`sizes: ModalSizes = VitaminModalSizes.medium()` | The optional sizes used to define modal padding, spacers sizes and icon size
`button: (@Composable VitaminModalButtons.() -> Unit)? = null,` | The optional button to do the acknowledgement action
`button: (@Composable VitaminModalButtons.() -> Unit)? = null` | The optional button to do the acknowledgement action

### Confirmation
#### To confirm an action

```kotlin
object VitaminModals {
@Composable
fun Confirmation(
fun Primary(
content: @Composable (() -> Unit),
onDismissRequest: () -> Unit,
rightButton: (@Composable VitaminModalButtons.() -> Unit),
middleButton: (@Composable VitaminModalButtons.() -> Unit),
confirmationButton: (@Composable VitaminModalButtons.() -> Unit),
dismissButton: (@Composable VitaminModalButtons.() -> Unit),
modifier: Modifier = Modifier,
title: String? = null,
painter: Painter? = null,
buttonsOrientation: ModalButtonsOrientation = ModalButtonsOrientation.HORIZONTAL,
contentScrollState: ScrollState = rememberScrollState(),
colors: ModalColors = VitaminModalColors.primary(),
sizes: ModalSizes = VitaminModalSizes.medium(),
leftButton: (@Composable VitaminModalButtons.() -> Unit)? = null,
thirdButton: (@Composable VitaminModalButtons.() -> Unit)? = null,
)
}
```

The Confirmation modal used to ask for decision.
This implementation will be use to validate an action or request information from the user.
In this case, two buttons are mandatory. One must be a confirming action, and the other a dismissing action.
Providing a third action, such as "Learn more" is not recommended as it navigates the user away from the dialog, leaving the dialog task unfinished.

The minimal usage of the component is callback to be notified when the user need to dismiss the modal and action buttons (confirm & dismiss).

```kotlin
VitaminModals.Confirmation(
VitaminModals.Primary(
content = {
Text(text = "Description of the action you want to confirm")
},
onDismissRequest = {},
painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin),
title = "title",
rightButton = {
confirmationButton = {
VitaminModalButtons.Primary(
text = "Confirm",
onClick = {}
)
},
middleButton = {
dismissButton = {
VitaminModalButtons.Primary(
text = "Dismiss",
onClick = {}
)
},
leftButton = {
thirdButton = {
VitaminModalButtons.Primary(
text = "Third action",
onClick = {}
Expand All @@ -124,13 +128,13 @@ Parameters | Descriptions
-- | --
`content: @Composable (() -> Unit)` | The content to be displayed below the title
`onDismissRequest: () -> Unit` | The callback to be called when the user need to dismiss the modal
`rightButton: (@Composable VitaminModalButtons.() -> Unit),` | The button used to confirm the action
`middleButton: (@Composable VitaminModalButtons.() -> Unit),` | The button used to dismiss the action
`confirmationButton: (@Composable VitaminModalButtons.() -> Unit)` | The button used to confirm the action
`dismissButton: (@Composable VitaminModalButtons.() -> Unit)` | The button used to dismiss the action
`modifier: Modifier = Modifier` | The `Modifier` to be applied to the component
`title: String? = null` | The optional title to be displayed at the top of the modal
`painter: Painter? = null` | The optional leading icon to be displayed at the start of the title
`buttonsOrientation: ModalButtonsOrientation = ModalButtonsOrientation.HORIZONTAL,` | The optional buttons orientation to display buttons vertically or horizontally
`buttonsOrientation: ModalButtonsOrientation = ModalButtonsOrientation.HORIZONTAL` | The optional buttons orientation to display buttons vertically or horizontally
`contentScrollState: ScrollState = rememberScrollState()` | The optional scroll state to observe the scrolling
`colors: ModalColors = VitaminModalColors.primary()` | The optional sizes used to define colors of icon, title, content and background of the modal
`sizes: ModalSizes = VitaminModalSizes.medium()` | The optional sizes used to define modal padding, spacers sizes and icon size
`leftButton: (@Composable VitaminModalButtons.() -> Unit)? = null,`| The optional button used to display a third action
`thirdButton: (@Composable VitaminModalButtons.() -> Unit)? = null`| The optional button used to display a third action
2 changes: 1 addition & 1 deletion modals/build.gradle.kts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ plugins {

dependencies {
api(project(":foundation:foundation"))
implementation(project(":foundation:foundation-icons"))
implementation(project(":buttons"))
implementation(AndroidX.compose.ui.tooling)
testImplementation("com.google.testparameterinjector:test-parameter-injector:1.8")
testImplementation(project(":foundation:foundation-icons"))
}
83 changes: 43 additions & 40 deletions modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModals.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ object VitaminModals {
* @param neutralButton The optional neutral button to be displayed at the bottom of the modal
*/
@Deprecated(
message = "Please use Acknowledge or Confirmation variant.",
replaceWith = ReplaceWith("Confirmation")
message = "Please use other Primary implementations.",
replaceWith = ReplaceWith("Primary")
)
@Composable
fun Primary(
Expand All @@ -44,18 +44,29 @@ object VitaminModals {
negativeButton: (@Composable VitaminModalButtons.() -> Unit)? = null,
neutralButton: (@Composable VitaminModalButtons.() -> Unit)? = null,
) {
val rightButton = positiveButton ?: negativeButton ?: neutralButton
val middleButton = when {
// To avoid incorrect display of buttons, we need to display them from right to left
// If only one button is needed (positive, negative or neutral) -> display one button as confirmationButton
// If two buttons are defined -> display the first one as confirmationButton (positive or negative,
// in this order) & the other as dismissButton
// If three buttons are defined -> display positiveButton as confirmationButton, negativeButton as dismissButton
// & neutralButton as thirdButton

// We get the rightmost button as confirmationButton
val confirmationButton = positiveButton ?: negativeButton ?: neutralButton
// We get the rightmost button (exclude the confirmationButton) as dismissButton
val dismissButton = when {
positiveButton != null -> negativeButton ?: neutralButton
negativeButton != null -> neutralButton
else -> null
}
val leftButton = when {
// We get the last button as thirdButton
val thirdButton = when {
positiveButton != null && negativeButton != null -> neutralButton
else -> null
}
when {
(middleButton == null) -> Acknowledge(
// In this case, we have only one button or no button
(dismissButton == null) -> Primary(
content = content,
onDismissRequest = onDismissRequest,
modifier = modifier,
Expand All @@ -64,54 +75,58 @@ object VitaminModals {
contentScrollState = contentScrollState,
colors = colors,
sizes = sizes,
button = rightButton,
button = confirmationButton,
)
else -> Confirmation(
// In this cas, we have at least two buttons
else -> Primary(
content = content,
onDismissRequest = onDismissRequest,
rightButton = rightButton!!,
middleButton = middleButton,
confirmationButton = confirmationButton!!,
dismissButton = dismissButton,
modifier = modifier,
title = title,
painter = iconRes?.let { painterResource(id = it) },
buttonsOrientation = buttonsOrientation,
contentScrollState = contentScrollState,
colors = colors,
sizes = sizes,
leftButton = leftButton,
thirdButton = thirdButton,
)
}
}

/**
* The [Confirmation] modal used to ask for decision.
* This implementation will be use to validate an action or request information from the user
* In this case, two buttons are mandatory. One must be a confirming action, and the other a dismissing action.
* Providing a third action, such as "Learn more" is not recommended as it navigates the user away from the dialog,
* leaving the dialog task unfinished.
* @param content The content to be displayed below the title
* @param onDismissRequest The callback to be called when the user need to dismiss the modal
* @param rightButton The button used to confirm the action
* @param middleButton The button used to dismiss the action
* @param confirmationButton The button used to confirm the action
* @param dismissButton The button used to dismiss the action
* @param modifier The [Modifier] to be applied to the component
* @param title The optional title to be displayed at the top of the modal
* @param painter The optional leading icon to be displayed at the start of the title
* @param buttonsOrientation The optional buttons orientation to display buttons vertically or horizontally
* @param contentScrollState The optional scroll state to observe the scrolling
* @param colors The optional sizes used to define colors of icon, title, content and background of the modal
* @param sizes The optional sizes used to define modal padding, spacers sizes and icon size
* @param leftButton The optional button used to display a third action
* @param thirdButton The optional button used to display a third action (Not recommended).
*/
@Composable
fun Confirmation(
fun Primary(
content: @Composable (() -> Unit),
onDismissRequest: () -> Unit,
rightButton: (@Composable VitaminModalButtons.() -> Unit),
middleButton: (@Composable VitaminModalButtons.() -> Unit),
confirmationButton: (@Composable VitaminModalButtons.() -> Unit),
dismissButton: (@Composable VitaminModalButtons.() -> Unit),
modifier: Modifier = Modifier,
title: String? = null,
painter: Painter? = null,
buttonsOrientation: ModalButtonsOrientation = ModalButtonsOrientation.HORIZONTAL,
contentScrollState: ScrollState = rememberScrollState(),
colors: ModalColors = VitaminModalColors.primary(),
sizes: ModalSizes = VitaminModalSizes.medium(),
leftButton: (@Composable VitaminModalButtons.() -> Unit)? = null,
thirdButton: (@Composable VitaminModalButtons.() -> Unit)? = null,
) = VitaminModalImpl(
content = content,
onDismissRequest = onDismissRequest,
Expand All @@ -120,15 +135,16 @@ object VitaminModals {
painter = painter,
buttonsOrientation = buttonsOrientation,
contentScrollState = contentScrollState,
rightButton = rightButton.take(),
middleButton = middleButton.take(),
leftButton = leftButton.takeOrNull(),
confirmationButton = confirmationButton,
dismissButton = dismissButton,
thirdButton = thirdButton,
colors = colors,
sizes = sizes,
)

/**
* The [Acknowledge] modal used to provide information.
* This implementation will be use to notify the user.
* In this case, only one button is available to dismiss the [VitaminModals]
* @param content The content to be displayed below the title
* @param onDismissRequest The callback to be called when the user need to dismiss the modal
* @param modifier The [Modifier] to be applied to the component
Expand All @@ -140,7 +156,7 @@ object VitaminModals {
* @param button The optional button to do the acknowledgement action
*/
@Composable
fun Acknowledge(
fun Primary(
content: @Composable (() -> Unit),
onDismissRequest: () -> Unit,
modifier: Modifier = Modifier,
Expand All @@ -157,24 +173,11 @@ object VitaminModals {
title = title,
painter = painter,
contentScrollState = contentScrollState,
rightButton = button.takeOrNull(),
middleButton = null,
leftButton = null,
confirmationButton = button,
dismissButton = null,
thirdButton = null,
buttonsOrientation = ModalButtonsOrientation.HORIZONTAL,
sizes = sizes,
colors = colors
)
}

private fun (@Composable VitaminModalButtons.() -> Unit).take(): (@Composable () -> Unit) {
return {
VitaminModalButtons.this()
}
}

private fun (@Composable VitaminModalButtons.() -> Unit)?.takeOrNull(): (@Composable () -> Unit)? {
if (this == null) return null
return {
VitaminModalButtons.this()
}
}
Loading

0 comments on commit 7f0cb5e

Please sign in to comment.