update README.md

README.md

@@ -5,12 +5,8 @@
 Animated infinite and finite LazyRow and LazyColumn with scale and color animations on scroll change
 based on how far they are to selector items
 
-
-
-
 https://user-images.githubusercontent.com/35650605/190077938-89d9f79a-06df-4052-b1fa-eee5651bd861.mp4
 
-
 ## Gradle Setup
 
 To get a Git project into your build:
@@ -35,73 +31,78 @@ dependencies {
 }
 ```
 
-
-
-
 ## AnimatedInfiniteLazyRow/Column
 
 ### Declaration
 
 ```kotlin
 @Composable
 fun <T> AnimatedInfiniteLazyColumn(
-  modifier: Modifier = Modifier,
-  items: List<T>,
-  initialFistVisibleIndex: Int = 0,
-  visibleItemCount: Int = 5,
-  inactiveItemPercent: Int = 85,
-  spaceBetweenItems: Dp = 4.dp,
-  selectorIndex: Int = -1,
-  itemScaleRange: Int = 1,
-  showPartialItem: Boolean = false,
-  activeColor: Color = Color.Cyan,
-  inactiveColor: Color = Color.Gray,
-  key: ((index: Int) -> Any)? = null,
-  contentType: (index: Int) -> Any? = { null },
-  itemContent: @Composable LazyItemScope.(
-    animationProgress: AnimationProgress, index: Int, item: T, height: Dp
-  ) -> Unit
+    modifier: Modifier = Modifier,
+    items: List<T>,
+    initialFistVisibleIndex: Int = 0,
+    visibleItemCount: Int = 5,
+    inactiveItemPercent: Int = 85,
+    spaceBetweenItems: Dp = 4.dp,
+    selectorIndex: Int = -1,
+    itemScaleRange: Int = 1,
+    showPartialItem: Boolean = false,
+    activeColor: Color = Color.Cyan,
+    inactiveColor: Color = Color.Gray,
+    key: ((index: Int) -> Any)? = null,
+    contentType: (index: Int) -> Any? = { null },
+    itemContent: @Composable LazyItemScope.(
+        animationProgress: AnimationProgress,
+        index: Int,
+        item: T,
+        size: Dp,
+        lazyListState: LazyListState
+    ) -> Unit
 ) {
-  AnimatedInfiniteList(
-    modifier = modifier,
-    items = items,
-    initialFirstVisibleIndex = initialFistVisibleIndex,
-    visibleItemCount = visibleItemCount,
-    inactiveItemPercent = inactiveItemPercent,
-    spaceBetweenItems = spaceBetweenItems,
-    selectorIndex = selectorIndex,
-    itemScaleRange = itemScaleRange,
-    showPartialItem = showPartialItem,
-    activeColor = activeColor,
-    inactiveColor = inactiveColor,
-    orientation = Orientation.Vertical,
-    key = key,
-    contentType = contentType,
-    itemContent = itemContent
-  )
+    AnimatedInfiniteList(
+        modifier = modifier,
+        items = items,
+        initialFirstVisibleIndex = initialFistVisibleIndex,
+        visibleItemCount = visibleItemCount,
+        inactiveItemPercent = inactiveItemPercent,
+        spaceBetweenItems = spaceBetweenItems,
+        selectorIndex = selectorIndex,
+        itemScaleRange = itemScaleRange,
+        showPartialItem = showPartialItem,
+        activeColor = activeColor,
+        inactiveColor = inactiveColor,
+        orientation = Orientation.Vertical,
+        key = key,
+        contentType = contentType,
+        itemContent = itemContent
+    )
 }
 ```
 
 ```kotlin
 @Composable
 fun <T> AnimatedInfiniteLazyRow(
-  modifier: Modifier = Modifier,
-  items: List<T>,
-  initialFistVisibleIndex: Int = 0,
-  activeItemWidth: Dp,
-  inactiveItemWidth: Dp,
-  visibleItemCount: Int = 5,
-  spaceBetweenItems: Dp = 4.dp,
-  selectorIndex: Int = -1,
-  itemScaleRange: Int = 1,
-  showPartialItem: Boolean = false,
-  activeColor: Color = ActiveColor,
-  inactiveColor: Color = InactiveColor,
-  key: ((index: Int) -> Any)? = null,
-  contentType: (index: Int) -> Any? = { null },
-  itemContent: @Composable LazyItemScope.(
-    animationProgress: AnimationProgress, index: Int, item: T, width: Dp
-  ) -> Unit
+    modifier: Modifier = Modifier,
+    items: List<T>,
+    initialFistVisibleIndex: Int = 0,
+    activeItemWidth: Dp,
+    inactiveItemWidth: Dp,
+    visibleItemCount: Int = 5,
+    spaceBetweenItems: Dp = 4.dp,
+    selectorIndex: Int = -1,
+    itemScaleRange: Int = 1,
+    showPartialItem: Boolean = false,
+    activeColor: Color = ActiveColor,
+    inactiveColor: Color = InactiveColor,
+    key: ((index: Int) -> Any)? = null,
+    contentType: (index: Int) -> Any? = { null },
+    itemContent: @Composable LazyItemScope.(
+        animationProgress: AnimationProgress,
+        index: Int,
+        item: T,
+        size: Dp,
+        lazyListState: LazyListState
+    ) -> Unit
 ) 
 ```
 
@@ -122,11 +123,61 @@ fun <T> AnimatedInfiniteLazyRow(
 * **activeColor** color of selected item
 * **inactiveColor** color of items are not selected
 * **key** a factory of stable and unique keys representing the item. Using the same key for multiple
-  items in the list is not allowed. Type of the key should be saveable via Bundle on Android. If
+  items in the list is not allowed. Type of the key should be savable via Bundle on Android. If
   null is passed the position in the list will represent the key. When you specify the key the
   scroll position will be maintained based on the key, which means if you add/remove items before
   the current visible item the item with the given key will be kept as the first visible one.
 * **contentType** a factory of the content types for the item. The item compositions of the same
   type could be reused more efficiently. Note that null is a valid type and items of such type will
   be considered compatible.
 * **itemContent** the content displayed by a single item
+
+### Usage
+
+itemContent returns `AnimationProgress` which contains `LazyListState` and
+distance of each item to selector. By attaching a click modifier
+
+```kotlin
+AnimatedInfiniteLazyRow(
+    modifier = Modifier
+        .width(listWidth)
+        .padding(10.dp),
+    items = aspectRatios,
+    visibleItemCount = 5,
+    activeItemWidth = 40.dp,
+    inactiveItemWidth = 30.dp,
+    selectorIndex = 1,
+    spaceBetweenItems = 0.dp,
+    inactiveColor = InactiveColor,
+    activeColor = ActiveColor,
+    itemContent = { animationProgress, index, item, width, lazyListState ->
+        val color = animationProgress.color
+        val scale = animationProgress.scale
+        Box(
+            modifier = Modifier
+                .scale(scale)
+                .background(color, CircleShape)
+                .size(width)
+                .clickable(
+                    interactionSource = remember {
+                        MutableInteractionSource()
+                    },
+                    indication = null
+                ) {
+                    coroutineScope.launch {
+                        lazyListState.animateScrollBy(-animationProgress.distanceToSelector)
+                    }
+                },
+            contentAlignment = Alignment.Center
+        ) {
+
+            Text(
+                "$index",
+                color = Color.White,
+                fontSize = 20.sp,
+                fontWeight = FontWeight.Bold
+            )
+        }
+    }
+)
+```