refactor(Slider): Add another Slider fucntion that accepts SliderState

Author: levinzonr

demo/src/main/java/io/monstarlab/mosaic/features/SliderDemo.kt

@@ -21,6 +21,7 @@ import androidx.compose.ui.unit.dp
 import io.monstarlab.mosaic.slider.Slider
 import io.monstarlab.mosaic.slider.SliderColors
 import io.monstarlab.mosaic.slider.SliderValueDistribution
+import io.monstarlab.mosaic.slider.rememberSliderState
 import kotlin.math.roundToInt
 import androidx.compose.material3.Slider as MaterialSlider
 
@@ -57,6 +58,17 @@ fun SliderDemo() = Scaffold(modifier = Modifier) {
                 c = 1f,
             ),
         )
+
+        Slider(
+            state = rememberSliderState(value = 0.5f),
+            colors = SliderColors(Color.Yellow),
+        ) {
+            Box(
+                modifier = Modifier
+                    .size(32.dp)
+                    .background(Color.Black),
+            )
+        }
     }
 }
 

slider/src/main/java/io/monstarlab/mosaic/slider/Slider.kt

@@ -40,15 +40,31 @@ public fun Slider(
     range: ClosedFloatingPointRange<Float> = 0f..1f,
     disabledRange: ClosedFloatingPointRange<Float> = EmptyRange,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    thumb: @Composable () -> Unit = { DefaultSliderThumb(colors = colors) },
+    thumb: @Composable (SliderState) -> Unit = { DefaultSliderThumb(colors = colors) },
 ) {
-    val state = rememberSliderState(value, valueDistribution, disabledRange)
-    val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
+    val state = rememberSliderState(value, range, valueDistribution, disabledRange)
 
     state.onValueChange = onValueChange
     state.value = value
-    state.range = range
-    state.disabledRange = disabledRange
+
+    Slider(
+        state = state,
+        interactionSource = interactionSource,
+        modifier = modifier,
+        thumb = thumb,
+        colors = colors,
+    )
+}
+
+@Composable
+public fun Slider(
+    state: SliderState,
+    colors: SliderColors,
+    modifier: Modifier = Modifier,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    thumb: @Composable (SliderState) -> Unit,
+) {
+    val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
 
     val tap = Modifier.pointerInput(state, interactionSource) {
         detectTapGestures(
@@ -79,8 +95,7 @@ public fun Slider(
                 disabledRange = state.disabledRangeAsFractions,
             )
         },
-        onDimensionsResolved = state::updateDimensions,
-        value = state.valueAsFraction,
+        state = state,
     )
 }
 

slider/src/main/java/io/monstarlab/mosaic/slider/SliderLayout.kt

@@ -1,30 +1,21 @@
 package io.monstarlab.mosaic.slider
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.requiredSizeIn
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.layout.layoutId
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.offset
 import kotlin.math.max
 import kotlin.math.roundToInt
 
 @Composable
 public fun SliderLayout(
-    value: Float,
-    onDimensionsResolved: (Float, Float) -> Unit,
+    state: SliderState,
     modifier: Modifier = Modifier,
     track: @Composable () -> Unit,
-    thumb: @Composable () -> Unit,
+    thumb: @Composable (SliderState) -> Unit,
 ) {
     Layout(
         modifier = modifier.requiredSizeIn(SliderDefaults.HandleWidth, SliderDefaults.HandleHeight),
@@ -33,7 +24,7 @@ public fun SliderLayout(
                 track()
             }
             Box(modifier = Modifier.layoutId(SliderLayoutElements.Thumb)) {
-                thumb()
+                thumb(state)
             }
         },
     ) { mesuarables, constraints ->
@@ -52,10 +43,10 @@ public fun SliderLayout(
 
         val sliderHeight = max(thumbPlaceable.height, trackPlaceable.height)
         val sliderWidth = trackPlaceable.width + thumbPlaceable.width
-        onDimensionsResolved(sliderWidth.toFloat(), thumbPlaceable.width.toFloat())
+        state.updateDimensions(sliderWidth.toFloat(), thumbPlaceable.width.toFloat())
 
         val trackOffsetX = thumbPlaceable.width / 2
-        val thumbOffsetX = ((trackPlaceable.width) * value).roundToInt()
+        val thumbOffsetX = ((trackPlaceable.width) * state.valueAsFraction).roundToInt()
         val trackOffsetY = (sliderHeight - trackPlaceable.height) / 2
         val thumbOffsetY = (sliderHeight - thumbPlaceable.height) / 2
 
@@ -76,30 +67,3 @@ internal enum class SliderLayoutElements {
     Track,
     Thumb,
 }
-
-@Preview
-@Composable
-private fun PreviewSliderLayout() {
-    Box(modifier = Modifier.background(Color.Red)) {
-        SliderLayout(
-            onDimensionsResolved = { _, _ -> },
-            modifier = Modifier.fillMaxWidth(0.5f),
-            value = 1f,
-            track = {
-                Box(
-                    modifier = Modifier
-                        .background(Color.Yellow)
-                        .height(12.dp)
-                        .fillMaxWidth(),
-                )
-            },
-            thumb = {
-                Box(
-                    modifier = Modifier
-                        .size(32.dp)
-                        .background(Color.Black, shape = CircleShape),
-                )
-            },
-        )
-    }
-}

slider/src/main/java/io/monstarlab/mosaic/slider/SliderState.kt

@@ -19,12 +19,11 @@ import kotlinx.coroutines.coroutineScope
  */
 public class SliderState(
     value: Float,
-    disabledRange: ClosedFloatingPointRange<Float>,
+    private val range: ClosedFloatingPointRange<Float>,
+    private val disabledRange: ClosedFloatingPointRange<Float>,
     private val valueDistribution: SliderValueDistribution,
 ) : DraggableState {
 
-    internal var range: ClosedFloatingPointRange<Float> = 0f..1f
-    internal var disabledRange by mutableStateOf(disabledRange)
     internal var onValueChange: ((Float) -> Unit)? = null
     internal var isDragging by mutableStateOf(false)
         private set
@@ -141,8 +140,16 @@ public class SliderState(
 @Composable
 public fun rememberSliderState(
     value: Float,
+    range: ClosedFloatingPointRange<Float> = 0f..1f,
     valueDistribution: SliderValueDistribution = SliderValueDistribution.Linear,
     disabledRange: ClosedFloatingPointRange<Float> = EmptyRange,
 ): SliderState {
-    return remember { SliderState(value, disabledRange, valueDistribution) }
+    return remember(range, valueDistribution, disabledRange) {
+        SliderState(
+            value = value,
+            range = range,
+            disabledRange = disabledRange,
+            valueDistribution = valueDistribution,
+        )
+    }
 }