Skip to content

Commit

Permalink
Extract InputIconCard to separate InputMatrix and `InputSequentia…
Browse files Browse the repository at this point in the history 
…l` components
  • Loading branch information
@msasikanth
msasikanth committed Sep 14, 2023
1 parent 5980ecf commit 0d0e999
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 134 deletions.
17 changes: 7 additions & 10 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/IconCardsScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import androidx.compose.ui.graphics.Color
import org.hisp.dhis.mobile.ui.designsystem.component.AvatarSize
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
import org.hisp.dhis.mobile.ui.designsystem.component.IconCardData
import org.hisp.dhis.mobile.ui.designsystem.component.InputIconCard
import org.hisp.dhis.mobile.ui.designsystem.component.IconCardLayoutType
import org.hisp.dhis.mobile.ui.designsystem.component.InputMatrix
import org.hisp.dhis.mobile.ui.designsystem.component.InputSequential
import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
import org.hisp.dhis.mobile.ui.designsystem.component.MetadataAvatar
import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
Expand Down Expand Up @@ -111,11 +111,10 @@ fun IconCardsScreen() {
)
}

InputIconCard(
InputMatrix(
title = "Label",
data = inputCardData,
selectedData = matrixSelectedItem,
layoutType = IconCardLayoutType.Matrix(),
onSelectionChanged = { newSelectedItem ->
matrixSelectedItem = if (matrixSelectedItem == newSelectedItem) {
null
Expand All @@ -125,22 +124,21 @@ fun IconCardsScreen() {
},
)

InputIconCard(
InputMatrix(
title = "Label",
data = inputCardData,
selectedData = matrixSelectedItem,
state = InputShellState.DISABLED,
layoutType = IconCardLayoutType.Matrix(itemCount = 3),
itemCount = 3,
onSelectionChanged = {
// no-op
},
)

InputIconCard(
InputSequential(
title = "Label",
data = inputCardData,
selectedData = sequentialSelectedItem,
layoutType = IconCardLayoutType.Sequential,
onSelectionChanged = { newSelectedItem ->
sequentialSelectedItem = if (matrixSelectedItem == newSelectedItem) {
null
Expand All @@ -150,11 +148,10 @@ fun IconCardsScreen() {
},
)

InputIconCard(
InputSequential(
title = "Label",
data = inputCardData,
selectedData = sequentialSelectedItem,
layoutType = IconCardLayoutType.Sequential,
state = InputShellState.DISABLED,
onSelectionChanged = {
// no-op
Expand Down
182 changes: 94 additions & 88 deletions ...tem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputIconCard.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.unit.dp
import org.hisp.dhis.mobile.ui.designsystem.component.IconCardLayoutType.Matrix
import org.hisp.dhis.mobile.ui.designsystem.component.IconCardLayoutType.Sequential
import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState.UNFOCUSED
import org.hisp.dhis.mobile.ui.designsystem.component.internal.VerticalGrid
import org.hisp.dhis.mobile.ui.designsystem.resource.provideDHIS2Icon
Expand All @@ -38,7 +36,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
import org.hisp.dhis.mobile.ui.designsystem.theme.bottomShadow

/**
* DHIS2 icon card input component
* DHIS2 icon card matrix input component
* @param title: Label of the component
* @param data: List of [IconCardData] to show
* @param layoutType: [IconCardLayoutType] to render list in, Matrix or Sequential. Default is [IconCardLayoutType.Matrix]
Expand All @@ -50,10 +48,10 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.bottomShadow
* @param onSelectionChanged: Callback to receive new selected item
*/
@Composable
fun InputIconCard(
fun InputMatrix(
title: String,
data: List<IconCardData>,
layoutType: IconCardLayoutType,
itemCount: Int = 2,
selectedData: IconCardData? = null,
modifier: Modifier = Modifier,
state: InputShellState = UNFOCUSED,
Expand All @@ -71,21 +69,29 @@ fun InputIconCard(
secondaryButton = null,
isRequiredField = isRequired,
inputField = {
when (layoutType) {
is Matrix -> IconCardInputMatrix(
data = data,
itemCount = layoutType.itemCount,
state = state,
selectedData = selectedData,
testTag = testTag,
onSelectionChanged = onSelectionChanged,
)
is Sequential -> IconCardInputSequential(
data = data,
state = state,
selectedData = selectedData,
testTag = testTag,
onSelectionChanged = onSelectionChanged,
VerticalGrid(
columns = itemCount,
itemCount = data.size,
horizontalArrangement = Arrangement.spacedBy(Spacing.Spacing8),
verticalArrangement = Arrangement.spacedBy(Spacing.Spacing8),
modifier = Modifier.padding(
PaddingValues(
start = Spacing.Spacing0,
top = Spacing.Spacing8,
end = Spacing.Spacing12,
bottom = Spacing.Spacing8,
),
).testTag("ICON_CARD_INPUT_MATRIX_$testTag"),
) { index ->
val iconCardData = data[index]
MatrixIconCard(
data = iconCardData,
onClick = {
onSelectionChanged(iconCardData)
},
selected = iconCardData == selectedData,
enabled = state != InputShellState.DISABLED,
modifier = Modifier.testTag("MATRIX_ICON_CARD_$testTag"),
)
}
},
Expand All @@ -106,73 +112,78 @@ fun InputIconCard(
)
}

/**
* DHIS2 icon card sequential input component
* @param title: Label of the component
* @param data: List of [IconCardData] to show
* @param layoutType: [IconCardLayoutType] to render list in, Matrix or Sequential. Default is [IconCardLayoutType.Matrix]
* @param selectedData: Selected [IconCardData], renders selected UI around that item
* @param state: [InputShellState]
* @param supportingText: List of [SupportingTextData] that manages all the messages to be shown
* @param legendData: [LegendData] to be render below the input shell
* @param isRequired: Mark this input as marked
* @param onSelectionChanged: Callback to receive new selected item
*/
@Composable
private fun IconCardInputMatrix(
data: List<IconCardData>,
itemCount: Int,
state: InputShellState,
selectedData: IconCardData?,
testTag: String,
onSelectionChanged: (IconCardData) -> Unit,
) {
VerticalGrid(
columns = itemCount,
itemCount = data.size,
horizontalArrangement = Arrangement.spacedBy(Spacing.Spacing8),
verticalArrangement = Arrangement.spacedBy(Spacing.Spacing8),
modifier = Modifier.padding(
PaddingValues(
start = Spacing.Spacing0,
top = Spacing.Spacing8,
end = Spacing.Spacing12,
bottom = Spacing.Spacing8,
),
).testTag("ICON_CARD_INPUT_MATRIX_$testTag"),
) { index ->
val iconCardData = data[index]
MatrixIconCard(
data = iconCardData,
onClick = {
onSelectionChanged(iconCardData)
},
selected = iconCardData == selectedData,
enabled = state != InputShellState.DISABLED,
modifier = Modifier.testTag("MATRIX_ICON_CARD_$testTag"),
)
}
}

@Composable
private fun IconCardInputSequential(
fun InputSequential(
title: String,
data: List<IconCardData>,
state: InputShellState,
selectedData: IconCardData?,
testTag: String,
selectedData: IconCardData? = null,
modifier: Modifier = Modifier,
state: InputShellState = UNFOCUSED,
supportingText: List<SupportingTextData>? = null,
legendData: LegendData? = null,
isRequired: Boolean = false,
testTag: String = "",
onSelectionChanged: (IconCardData) -> Unit,
) {
Column(
verticalArrangement = Arrangement.spacedBy(Spacing.Spacing8),
modifier = Modifier.padding(
PaddingValues(
start = Spacing.Spacing0,
top = Spacing.Spacing8,
end = Spacing.Spacing12,
bottom = Spacing.Spacing8,
),
).testTag("ICON_CARD_INPUT_SEQUENTIAL_$testTag"),
) {
data.forEach { iconCardData ->
SequentialIconCard(
data = iconCardData,
onClick = {
onSelectionChanged(iconCardData)
},
selected = iconCardData == selectedData,
enabled = state != InputShellState.DISABLED,
modifier = Modifier.testTag("SEQUENTIAL_ICON_CARD_$testTag"),
)
}
}
InputShell(
modifier = modifier.testTag("ICON_CARDS_INPUT_$testTag"),
title = title,
state = state,
primaryButton = null,
secondaryButton = null,
isRequiredField = isRequired,
inputField = {
Column(
verticalArrangement = Arrangement.spacedBy(Spacing.Spacing8),
modifier = Modifier.padding(
PaddingValues(
start = Spacing.Spacing0,
top = Spacing.Spacing8,
end = Spacing.Spacing12,
bottom = Spacing.Spacing8,
),
).testTag("ICON_CARD_INPUT_SEQUENTIAL_$testTag"),
) {
data.forEach { iconCardData ->
SequentialIconCard(
data = iconCardData,
onClick = {
onSelectionChanged(iconCardData)
},
selected = iconCardData == selectedData,
enabled = state != InputShellState.DISABLED,
modifier = Modifier.testTag("SEQUENTIAL_ICON_CARD_$testTag"),
)
}
}
},
supportingText = {
supportingText?.forEach { label ->
SupportingText(
label.text,
label.state,
modifier = Modifier.testTag("ICON_CARDS_INPUT_" + testTag + "_SUPPORTING_TEXT"),
)
}
},
legend = {
legendData?.let {
Legend(legendData, Modifier.testTag("ICON_CARDS_INPUT_" + testTag + "_LEGEND"))
}
},
)
}

@Composable
Expand Down Expand Up @@ -337,8 +348,3 @@ data class IconCardData(
val iconRes: String,
val iconTint: Color,
)

sealed interface IconCardLayoutType {
data class Matrix(val itemCount: Int = 2) : IconCardLayoutType
data object Sequential : IconCardLayoutType
}
Loading

0 comments on commit 0d0e999

Please sign in to comment.