Skip to content

Commit

Permalink
Add subtract remove icons moved to QuantityIcons
Browse files Browse the repository at this point in the history
  • Loading branch information
burak.ozturk1 committed Sep 17, 2024
1 parent 309ffbc commit 2092918
Show file tree
Hide file tree
Showing 11 changed files with 137 additions and 95 deletions.
42 changes: 21 additions & 21 deletions libraries/quantity-picker-compose/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,22 +28,20 @@ dependencies {

You can add **QuantityPicker** wherever you want with your modifier

| Attribute | Type | Description |
| ------------------- | ----------------------- | --------------------------------------------------------------------------- |
| modifier | Modifier | Compose modifier for QuantityPicker |
| direction | QuantityPickerDirection | Picker Direction Vertical or Horizontal |
| quantityTextShape | QuantityPickerShape | Compose shape for quantity text. |
| quantityPickerShape | QuantityPickerShape | Background of all view also defines border if it is not null |
| textStyle | TextStyle | Text style for quantity text |
| addIconResId | Int | Drawable for add button |
| subtractIconResId | Int | Drawable for subtract button |
| removeIconResId | Int | Drawable for remove button. Visible if it is null and current quantity is 1 |
| iconTintColor | Color | Tint Color for Icons |
| quantityData | QuantityData | Quantity values. It has min,max,current and postfix |
| showLoading | Boolean | Loading state |
| progressColor | Color | Color for loading progress indicator |
| onAddClick | (() -> Unit) | Listener for add button clicks |
| onSubtractClick | (() -> Unit) | Listener for subtract clicks |

| Attribute | Type | Description |
| ------------------- | ----------------------- | ------------------------------------------------------------ |
| modifier | Modifier | Compose modifier for QuantityPicker |
| direction | QuantityPickerDirection | Picker Direction Vertical or Horizontal |
| icons | QuantityIcons | Drawables for add subtract remove and colors |
| quantityTextShape | QuantityPickerShape | Compose shape for quantity text. |
| quantityPickerShape | QuantityPickerShape | Background of all view also defines border if it is not null |
| textStyle | TextStyle | Text style for quantity text |
| quantityData | QuantityData | Quantity values. It has min,max,current and postfix |
| showLoading | Boolean | Loading state |
| progressColor | Color | Color for loading progress indicator |
| onAddClick | (() -> Unit) | Listener for add button clicks |
| onSubtractClick | (() -> Unit) | Listener for subtract clicks |

## Implementation

Expand All @@ -65,10 +63,13 @@ If you need background or custom modifier for quantity text and all view
QuantityPicker(
textStyle = Typography.body2,
quantityData = quantityData,
addIconResId = R.drawable.ic_plus,
subtractIconResId = R.drawable.ic_minus,
removeIconResId = R.drawable.ic_remove,
iconTintColor = Color.White, // QuantityPickerDefaults.defaultColor
icons: QuantityIcons = QuantityIcons( // QuantityIcons.default
addIconResId = R.drawable.ic_plus,
subtractIconResId = R.drawable.ic_subtract,
removeIconResId = R.drawable.ic_trash,
iconColor = QuantityPickerDefaults.defaultColor,
disabledColor = QuantityPickerDefaults.disabledColor
),
quantityPickerShape = QuantityPickerShape( // QuantityPickerDefaults.quantityShape,
shape = RoundedCornerShape(50),
borderColor = MyQuantityPickerPrimaryColor,
Expand Down Expand Up @@ -97,4 +98,3 @@ Copyright 2023 Trendyol.com Licensed under the Apache License, Version 2.0 (t
http://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.
```

Original file line number Diff line number Diff line change
@@ -1,34 +1,31 @@
package com.trendyol.uicomponents.quantitypicker

import androidx.annotation.DrawableRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
internal fun QuantityAddIcon(
@DrawableRes addIconResId: Int,
iconTintColor: Color,
showLoading: Boolean,
icons: QuantityIcons,
quantityData: QuantityPickerViewData,
onAddClick: (() -> Unit)?
) {
Icon(
painter = painterResource(id = addIconResId),
painter = painterResource(id = icons.addIconResId),
tint = quantityData.getAddIconColor(icons.iconColor, icons.disabledColor),
contentDescription = null,
modifier = Modifier
.clickable(
enabled = showLoading.not(),
enabled = quantityData.isAddButtonEnabled(),
onClick = { onAddClick?.invoke() },
interactionSource = MutableInteractionSource(),
indication = null,
)
.padding(8.dp),
tint = iconTintColor
.padding(8.dp)
)
}

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
package com.trendyol.uicomponents.quantitypicker

import androidx.annotation.DrawableRes
import androidx.compose.ui.graphics.Color
import com.trendyol.quantitypickercompose.R

data class QuantityIcons(
@DrawableRes val addIconResId: Int = R.drawable.ic_plus,
@DrawableRes val subtractIconResId: Int = R.drawable.ic_subtract,
@DrawableRes val removeIconResId: Int? = R.drawable.ic_trash,
val iconColor: Color,
val disabledColor: Color,
) {
companion object {
val default = QuantityIcons(
addIconResId = R.drawable.ic_plus,
subtractIconResId = R.drawable.ic_subtract,
removeIconResId = R.drawable.ic_trash,
iconColor = QuantityPickerDefaults.defaultColor,
disabledColor = QuantityPickerDefaults.disabledColor
)
}
}


Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
package com.trendyol.uicomponents.quantitypicker

import androidx.annotation.DrawableRes
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.background
import androidx.compose.foundation.border
Expand All @@ -12,19 +11,15 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import com.trendyol.quantitypickercompose.R

@Composable
fun QuantityPicker(
modifier: Modifier = Modifier,
quantityData: QuantityData,
quantityData: QuantityPickerViewData,
showLoading: Boolean = false,
direction: QuantityPickerDirection = QuantityPickerDirection.VERTICAL,
textStyle: TextStyle = QuantityPickerDefaults.quantityTextStyle,
@DrawableRes addIconResId: Int = R.drawable.ic_plus,
@DrawableRes subtractIconResId: Int = R.drawable.ic_subtract,
@DrawableRes removeIconResId: Int? = R.drawable.ic_trash,
iconTintColor: Color = QuantityPickerDefaults.defaultColor,
icons: QuantityIcons = QuantityIcons.default,
quantityPickerShape: QuantityShape = QuantityPickerDefaults.quantityPickerShape,
quantityTextShape: QuantityShape = QuantityPickerDefaults.quantityTextShape,
progressColor: Color = QuantityPickerDefaults.defaultColor,
Expand All @@ -35,32 +30,27 @@ fun QuantityPicker(
QuantityPickerDirection.VERTICAL -> VerticalQuantityPicker(
modifier = modifier,
textStyle = textStyle,
addIconResId = addIconResId,
subtractIconResId = subtractIconResId,
removeIconResId = removeIconResId,
icons = icons,
quantityShape = quantityPickerShape,
quantityTextShape = quantityTextShape,
quantityData = quantityData,
showLoading = showLoading,
progressColor = progressColor,
onAddClick = onAddClick,
onSubtractClick = onSubtractClick,
onSubtractClick = onSubtractClick
)

QuantityPickerDirection.HORIZONTAL -> HorizontalQuantityPicker(
modifier = modifier,
icons = icons,
textStyle = textStyle,
addIconResId = addIconResId,
subtractIconResId = subtractIconResId,
removeIconResId = removeIconResId,
quantityShape = quantityPickerShape,
quantityTextShape = quantityTextShape,
quantityData = quantityData,
showLoading = showLoading,
progressColor = progressColor,
onAddClick = onAddClick,
onSubtractClick = onSubtractClick,
iconTintColor = iconTintColor,
)
}
}
Expand All @@ -69,13 +59,10 @@ fun QuantityPicker(
internal fun VerticalQuantityPicker(
modifier: Modifier,
textStyle: TextStyle,
@DrawableRes addIconResId: Int,
@DrawableRes subtractIconResId: Int,
@DrawableRes removeIconResId: Int?,
iconTintColor: Color = QuantityPickerDefaults.defaultColor,
icons: QuantityIcons,
quantityShape: QuantityShape,
quantityTextShape: QuantityShape,
quantityData: QuantityData,
quantityData: QuantityPickerViewData,
showLoading: Boolean,
progressColor: Color,
onAddClick: (() -> Unit)?,
Expand All @@ -97,9 +84,8 @@ internal fun VerticalQuantityPicker(
) {

QuantityAddIcon(
addIconResId = addIconResId,
iconTintColor = iconTintColor,
showLoading = showLoading,
icons = icons,
quantityData = quantityData,
onAddClick = onAddClick
)

Expand All @@ -113,12 +99,10 @@ internal fun VerticalQuantityPicker(
progressColor = progressColor
)
QuantitySubtractIcon(
subtractIconResId = subtractIconResId,
showLoading = showLoading,
quantityData = quantityData,
onSubtractClick = onSubtractClick,
removeIconResId = removeIconResId,
currentQuantity = quantityData.currentQuantity,
iconTintColor = iconTintColor
icons = icons
)
}
}
Expand All @@ -129,13 +113,10 @@ internal fun VerticalQuantityPicker(
internal fun HorizontalQuantityPicker(
modifier: Modifier = Modifier,
textStyle: TextStyle,
@DrawableRes addIconResId: Int,
@DrawableRes subtractIconResId: Int,
@DrawableRes removeIconResId: Int?,
iconTintColor: Color,
icons: QuantityIcons,
quantityShape: QuantityShape,
quantityTextShape: QuantityShape,
quantityData: QuantityData,
quantityData: QuantityPickerViewData,
showLoading: Boolean,
progressColor: Color,
onAddClick: (() -> Unit)?,
Expand All @@ -159,12 +140,10 @@ internal fun HorizontalQuantityPicker(
AnimatedVisibility(visible = quantityData.currentQuantity > 0 || showLoading) {
Row(verticalAlignment = Alignment.CenterVertically) {
QuantitySubtractIcon(
subtractIconResId = subtractIconResId,
showLoading = showLoading,
icons = icons,
quantityData = quantityData,
onSubtractClick = onSubtractClick,
removeIconResId = removeIconResId,
currentQuantity = quantityData.currentQuantity,
iconTintColor = iconTintColor
currentQuantity = quantityData.currentQuantity
)
QuantityText(
quantityData = quantityData,
Expand All @@ -176,10 +155,9 @@ internal fun HorizontalQuantityPicker(
}
}
QuantityAddIcon(
addIconResId = addIconResId,
showLoading = showLoading,
icons = icons,
quantityData = quantityData,
onAddClick = onAddClick,
iconTintColor = iconTintColor
)
}
}
Expand All @@ -189,22 +167,38 @@ internal fun HorizontalQuantityPicker(
private fun PreviewHorizontalQuantityPicker() {
QuantityPicker(
direction = QuantityPickerDirection.HORIZONTAL,
quantityData = QuantityData(currentQuantity = 2)
quantityData = QuantityPickerViewData(currentQuantity = 2)
)
}

@Preview
@Composable
private fun PreviewVerticalQuantityPicker() {
QuantityPicker(quantityData = QuantityData(currentQuantity = 1))
QuantityPicker(quantityData = QuantityPickerViewData(currentQuantity = 1))
}

@Preview
@Composable
private fun PreviewLoadingQuantityPicker() {
QuantityPicker(
quantityData = QuantityData(currentQuantity = 2),
quantityData = QuantityPickerViewData(currentQuantity = 2),
showLoading = true

)
}

@Preview
@Composable
private fun PreviewAddButtonDisabledQuantityPicker() {
QuantityPicker(
quantityData = QuantityPickerViewData(currentQuantity = 2, maxQuantity = 2),
)
}

@Preview
@Composable
private fun PreviewSubtractButtonDisabledQuantityPicker() {
QuantityPicker(
quantityData = QuantityPickerViewData(currentQuantity = 2, minQuantity = 3),
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import androidx.compose.ui.unit.sp

object QuantityPickerDefaults {
val defaultColor = Color(0xFF42AF2A)
val disabledColor = Color(0xFF999999)
private val textBackGroundColor = Color(0xFFE1F6DD)

val quantityPickerShape = QuantityShapeDefaults.circle(defaultColor)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
package com.trendyol.uicomponents.quantitypicker

import androidx.compose.ui.graphics.Color

data class QuantityPickerViewData(
val minQuantity: Int = -1,
val maxQuantity: Int = -1,
val currentQuantity: Int = 0
) {
fun isAddButtonEnabled(): Boolean {
return (isMaxQuantitySet() && currentQuantity >= maxQuantity).not()
}

private fun isMaxQuantitySet(): Boolean {
return maxQuantity != -1
}

fun getAddIconColor(iconTintColor: Color, disableTintColor: Color): Color {
return if (isAddButtonEnabled()) iconTintColor else disableTintColor
}

fun isSubtractButtonEnabled(): Boolean {
return (currentQuantity > minQuantity)
}

fun getSubtractButtonColor(iconTintColor: Color, disableTintColor: Color): Color {
return if (isSubtractButtonEnabled()) iconTintColor else disableTintColor
}
}
Loading

0 comments on commit 2092918

Please sign in to comment.