Merge pull request #19 from kez-lab/feature/picker_click_animation

feat: Add clickable functionality to Picker items and set visibleItem…

Author: kez-lab

datetimepicker/src/commonMain/kotlin/com/kez/picker/Picker.kt

@@ -1,7 +1,9 @@
 package com.kez.picker
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -20,10 +22,12 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.graphics.BlendMode
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
@@ -42,6 +46,7 @@ import androidx.compose.ui.unit.lerp
 import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.mapNotNull
+import kotlinx.coroutines.launch
 import kotlin.math.abs
 
 /**
@@ -93,6 +98,7 @@ fun <T> Picker(
 ) {
     val density = LocalDensity.current
     val visibleItemsMiddle = remember { visibleItemsCount / 2 }
+    val scope = rememberCoroutineScope()
 
     val adjustedItems = if (!isInfinity) {
         listOf(null) + items + listOf(null)
@@ -205,6 +211,22 @@ fun <T> Picker(
                     modifier = Modifier
                         .height(itemHeight)
                         .fillMaxWidth()
+                        .clickable(
+                            enabled = getItem(index) != null,
+                            role = Role.Button,
+                            indication = null,
+                            interactionSource = remember { MutableInteractionSource() },
+                            onClick = {
+                                val currentCenterIndex = listState.firstVisibleItemIndex + visibleItemsMiddle
+                                if (index != currentCenterIndex) {
+                                    scope.launch {
+                                        val targetIndex = (index - visibleItemsMiddle)
+                                            .coerceIn(0, listScrollCount - 1)
+                                        listState.animateScrollToItem(targetIndex)
+                                    }
+                                }
+                            }
+                        )
                         .padding(itemPadding),
                     contentAlignment = Alignment.Center
                 ) {

sample/src/commonMain/kotlin/com/kez/picker/sample/ui/screen/TimePickerSampleScreen.kt

@@ -34,8 +34,6 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.navigation.NavController
-import androidx.navigation.compose.rememberNavController
 import com.kez.picker.rememberPickerState
 import com.kez.picker.time.TimePicker
 import com.kez.picker.util.TimeFormat
@@ -170,6 +168,7 @@ internal fun TimePickerSampleScreen(
                 TimePicker(
                     hourPickerState = hour24State,
                     minutePickerState = minuteState,
+                    visibleItemsCount = 5,
                     timeFormat = TimeFormat.HOUR_24
                 )
             }