feat: Add disabled state to the Slider, also refactor the state management

levinzonr · levinzonr · commit 5b96b5d1514a · 2024-03-18T13:11:33.000+01:00
diff --git a/demo/src/main/java/io/monstarlab/mosaic/features/SliderDemo.kt b/demo/src/main/java/io/monstarlab/mosaic/features/SliderDemo.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -61,14 +62,32 @@ fun SliderDemo() = Scaffold(modifier = Modifier) {
 
         Slider(
             state = rememberSliderState(value = 0.5f),
-            colors = SliderColors(Color.Yellow),
+            colors = SliderColors(Color.Magenta, Color.Red),
         ) {
             Box(
                 modifier = Modifier
                     .size(32.dp)
                     .background(Color.Black),
             )
         }
+
+        Slider(
+            state = rememberSliderState(value = 0.5f),
+            colors = SliderColors(Color.Black),
+            enabled = true,
+        ) {
+            Box(modifier = Modifier.background(Color.Red, shape = CircleShape).size(32.dp))
+        }
+
+        var v by remember { mutableFloatStateOf(0.5f) }
+        Slider(
+            value = v,
+            onValueChange = { v = it },
+            colors = SliderColors(Color.Black),
+            enabled = false,
+        ) {
+            Box(modifier = Modifier.background(Color.Red, shape = CircleShape).size(32.dp))
+        }
     }
 }
 
@@ -96,7 +115,7 @@ fun MosaicSliderDemo(
                 modifier = Modifier.weight(0.8f),
                 value = value,
                 onValueChange = { value = it },
-                colors = SliderColors(Color.Black, disabled = Color.Red),
+                colors = SliderColors(Color.Black, disabledRangeTrackColor = Color.Red),
                 range = range,
                 valueDistribution = valuesDistribution,
                 disabledRange = disabledRange,
diff --git a/slider/src/main/java/io/monstarlab/mosaic/slider/Modifiers.kt b/slider/src/main/java/io/monstarlab/mosaic/slider/Modifiers.kt
@@ -13,12 +13,13 @@ import androidx.compose.ui.semantics.setProgress
 
 internal fun Modifier.sliderDragModifier(
     state: SliderState,
+    enabled: Boolean,
     interactionSource: MutableInteractionSource,
     isRtl: Boolean,
 ): Modifier = this.draggable(
     state = state,
     orientation = Orientation.Horizontal,
-    enabled = true,
+    enabled = enabled,
     interactionSource = interactionSource,
     startDragImmediately = state.isDragging,
     reverseDirection = isRtl,
@@ -27,12 +28,18 @@ internal fun Modifier.sliderDragModifier(
 
 internal fun Modifier.sliderTapModifier(
     state: SliderState,
+    enabled: Boolean,
     interactionSource: MutableInteractionSource,
 ): Modifier {
-    return this.pointerInput(state, interactionSource) {
-        detectTapGestures(
-            onPress = { state.handlePress(it) },
-        )
+    return if (enabled) {
+        this.pointerInput(state, interactionSource) {
+            detectTapGestures(
+                onPress = { state.handlePress(it) },
+                onTap = { state.dispatchRawDelta(0f) },
+            )
+        }
+    } else {
+        this
     }
 }
 
diff --git a/slider/src/main/java/io/monstarlab/mosaic/slider/Slider.kt b/slider/src/main/java/io/monstarlab/mosaic/slider/Slider.kt
@@ -7,6 +7,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -19,6 +21,7 @@ import androidx.compose.ui.unit.LayoutDirection
  *
  * @param value the current value of the slider
  * @param onValueChange a callback function invoked when the slider value changes
+ * @param enabled - determines whether the user can interact with the slide or not
  * @param colors the colors used to customize the appearance of the slider
  * @param modifier the modifier to be applied to the slider
  * @param valueDistribution the strategy for distributing slider values
@@ -32,31 +35,48 @@ public fun Slider(
     onValueChange: (Float) -> Unit,
     colors: SliderColors,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
     valueDistribution: SliderValueDistribution = SliderValueDistribution.Linear,
     range: ClosedFloatingPointRange<Float> = 0f..1f,
     disabledRange: ClosedFloatingPointRange<Float> = EmptyRange,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    thumb: @Composable (SliderState) -> Unit = { DefaultSliderThumb(colors = colors) },
+    thumb: @Composable (
+        SliderState,
+    ) -> Unit = { DefaultSliderThumb(colors = colors, enabled = enabled) },
 ) {
     val state = rememberSliderState(value, range, valueDistribution, disabledRange)
-
     state.onValueChange = onValueChange
     state.value = value
 
+    // Workaround for the initial value that might belong into disabled range
+    // The initial value is remembered
+    val initialValue = remember { mutableFloatStateOf(value) }
+
+    // In case initial value differs from the value inside the state
+    // this means the value has been coerced into it
+    // for this case the change of value must be explicitly notified to the receiver
+    LaunchedEffect(initialValue) {
+        if (initialValue.value != state.value) {
+            onValueChange(state.value)
+        }
+    }
+
     Slider(
         state = state,
         interactionSource = interactionSource,
         modifier = modifier,
         thumb = thumb,
         colors = colors,
+        enabled = enabled,
     )
 }
 
 /**
  * A composable function that creates a slider UI component.
  * @param state of the Slider where the latest slider value is stored
  * @param colors the colors used to customize the appearance of the slider
- * @param modifier the modifier to be applied to the slider
+ * @param modifier the modifier to be applied to the slider,
+ * @param enabled - determines whether the user can interact with the slide or not
  * @param interactionSource the interaction source used to handle user input interactions
  * @param thumb the composable function used to render the slider thumb
  */
@@ -65,17 +85,18 @@ public fun Slider(
     state: SliderState,
     colors: SliderColors,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     thumb: @Composable (SliderState) -> Unit,
 ) {
     val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
-    val tap = Modifier.sliderTapModifier(state, interactionSource)
-    val drag = Modifier.sliderDragModifier(state, interactionSource, isRtl)
+    val tap = Modifier.sliderTapModifier(state, enabled, interactionSource)
+    val drag = Modifier.sliderDragModifier(state, enabled, interactionSource, isRtl)
 
     SliderLayout(
         modifier = modifier
-            .sliderSemantics(state, true)
-            .focusable(true, interactionSource)
+            .sliderSemantics(state, enabled)
+            .focusable(enabled, interactionSource)
             .then(tap)
             .then(drag),
         thumb = thumb,
@@ -84,19 +105,20 @@ public fun Slider(
                 progress = state.valueAsFraction,
                 colors = colors,
                 disabledRange = state.disabledRangeAsFractions,
+                enabled = enabled,
             )
         },
         state = state,
     )
 }
 
 @Composable
-internal fun DefaultSliderThumb(colors: SliderColors) {
+internal fun DefaultSliderThumb(enabled: Boolean, colors: SliderColors) {
     Box(
         modifier = Modifier
             .size(SliderDefaults.ThumbSize)
             .background(
-                color = colors.active,
+                color = colors.thumbColor(enabled),
                 shape = CircleShape,
             ),
     )
@@ -110,7 +132,18 @@ private fun PreviewSlider() {
     Slider(
         value = 0.5f,
         onValueChange = {},
-        colors = SliderColors(Color.Yellow),
+        colors = SliderColors(Color.Yellow, Color.Red),
+        disabledRange = 0.8f..1f,
+    )
+}
+
+@Preview
+@Composable
+private fun PreviewDisabledSlider() {
+    Slider(
+        value = 0.5f,
+        onValueChange = {},
+        colors = SliderColors(Color.Yellow, Color.Red),
         disabledRange = 0.8f..1f,
     )
 }
diff --git a/slider/src/main/java/io/monstarlab/mosaic/slider/SliderColors.kt b/slider/src/main/java/io/monstarlab/mosaic/slider/SliderColors.kt
@@ -1,9 +1,43 @@
 package io.monstarlab.mosaic.slider
 
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.Stable
 import androidx.compose.ui.graphics.Color
 
-public data class SliderColors(
-    val active: Color,
-    val disabled: Color = active.copy(alpha = 0.2f),
-    val inactive: Color = active.copy(alpha = 0.5f),
-)
+@Immutable
+public class SliderColors(
+    public val activeTrackColor: Color,
+    public val disabledRangeTrackColor: Color = activeTrackColor,
+    public val inactiveTrackColor: Color = activeTrackColor.copy(alpha = 0.5f),
+    public val disabledActiveTrackColor: Color = activeTrackColor.copy(alpha = 0.2f),
+    public val disabledInactiveTrackColor: Color = activeTrackColor.copy(alpha = 0.2f),
+    public val thumbColor: Color = activeTrackColor,
+    public val disabledThumbColor: Color = disabledRangeTrackColor,
+) {
+    @Stable
+    public fun activeTrackColor(enabled: Boolean): Color {
+        return if (enabled) {
+            activeTrackColor
+        } else {
+            disabledActiveTrackColor
+        }
+    }
+
+    @Stable
+    public fun thumbColor(enabled: Boolean): Color {
+        return if (enabled) {
+            thumbColor
+        } else {
+            disabledThumbColor
+        }
+    }
+
+    @Stable
+    public fun inactiveTrackColor(enabled: Boolean): Color {
+        return if (enabled) {
+            inactiveTrackColor
+        } else {
+            disabledInactiveTrackColor
+        }
+    }
+}
diff --git a/slider/src/main/java/io/monstarlab/mosaic/slider/SliderState.kt b/slider/src/main/java/io/monstarlab/mosaic/slider/SliderState.kt
@@ -18,39 +18,60 @@ import kotlinx.coroutines.coroutineScope
  * Responsible for managing internal properties such as offset value and drag / click behaviours
  */
 public class SliderState(
-    value: Float,
+    initialValue: Float,
     public val range: ClosedFloatingPointRange<Float>,
     private val disabledRange: ClosedFloatingPointRange<Float>,
     private val valueDistribution: SliderValueDistribution,
 ) : DraggableState {
 
+    /**
+     * Optional callback for notifying the change of value
+     * In case provided, the "value" state is stored outside in another component
+     * And it is the responsibility of a client to manage the value state
+     */
     internal var onValueChange: ((Float) -> Unit)? = null
     internal var isDragging by mutableStateOf(false)
         private set
     private var totalWidth by mutableFloatStateOf(0f)
     private var thumbWidth by mutableFloatStateOf(0f)
 
-    private var rawOffset by mutableFloatStateOf(scaleToOffset(value))
-    private val scrollMutex = MutatorMutex()
-
-    internal val valueAsFraction: Float
-        get() {
-            return calcFraction(0f, totalWidth, rawOffset)
-        }
+    /**
+     * Internal state to hold the User Value (coerced and in range)
+     * Serves as source of truth for the client
+     */
+    private var valueState by mutableFloatStateOf(initialValue)
 
-    internal val disabledRangeAsFractions: ClosedFloatingPointRange<Float>
-        get() = coerceRangeIntoFractions(disabledRange)
+    /**
+     * Internally stored offset, used simply for the drag & click gestures
+     */
+    private var rawOffset by mutableFloatStateOf(scaleToOffset(initialValue))
+    private val scrollMutex = MutatorMutex()
 
     /**
      * Current value of the slider
      * If value of the slider is out of the [range] it will be coerced into it
+     * If the value of the slider is inside the [disabledRange] It will be coerced int closes available range that is not disabled
+     *
      */
     public var value: Float
-        get() = scaleToUserValue(rawOffset)
+        get() = valueState.coerceIntoDisabledRange()
         set(value) {
-            rawOffset = scaleToOffset(value)
+            valueState = value.coerceIntoDisabledRange()
+        }
+
+    /**
+     * Internal value returned as fraction, used for displaying and specifying
+     * the "real" position of the thumb
+     */
+    internal val valueAsFraction: Float
+        get() {
+            val interpolated = valueDistribution.interpolate(value)
+            return calcFraction(range.start, range.endInclusive, interpolated)
         }
 
+    internal val disabledRangeAsFractions: ClosedFloatingPointRange<Float>
+        get() = coerceRangeIntoFractions(disabledRange)
+
     private val dragScope: DragScope = object : DragScope {
         override fun dragBy(pixels: Float): Unit = dispatchRawDelta(pixels)
     }
@@ -81,10 +102,11 @@ public class SliderState(
     }
 
     private fun handleValueUpdate(value: Float, offset: Float) {
+        rawOffset = offset
         if (onValueChange != null) {
             onValueChange?.invoke(value)
         } else {
-            rawOffset = offset
+            valueState = value
         }
     }
 
@@ -150,7 +172,7 @@ public fun rememberSliderState(
 ): SliderState {
     return remember(range, valueDistribution, disabledRange) {
         SliderState(
-            value = value,
+            initialValue = value,
             range = range,
             disabledRange = disabledRange,
             valueDistribution = valueDistribution,
diff --git a/slider/src/main/java/io/monstarlab/mosaic/slider/SliderTrack.kt b/slider/src/main/java/io/monstarlab/mosaic/slider/SliderTrack.kt
