Add API JetLimeExtendedEvent composable

README.md

@@ -18,25 +18,25 @@
 
 Made with ❤ using Compose
 
-|                 Basic                 |                 Dynamic                 |                 Custom                 |
-|:-------------------------------------:|:---------------------------------------:|:--------------------------------------:|
-| <img src="art/basic.gif" width=200 /> | <img src="art/dynamic.gif" width=200 /> | <img src="art/custom.png" width=200 /> |
+|                 Basic                 |                 Dynamic                 |                 Custom                 | Extended                                 |
+|:-------------------------------------:|:---------------------------------------:|:--------------------------------------:|------------------------------------------|
+| <img src="art/basic.gif" width=200 /> | <img src="art/dynamic.gif" width=200 /> | <img src="art/custom.png" width=200 /> | <img src="art/extended.png" width=200 /> |
 
 ## 🚀 Implementation
 
 In `build.gradle` of app module, include the following dependency
 
 ```gradle
 dependencies {
-  implementation("io.github.pushpalroy:jetlime:2.0.1")
+  implementation("io.github.pushpalroy:jetlime:2.1.0")
 }
 ```
 
 ## ✍️ Usage
 
 ### 👇 Add items in a Vertical Timeline
 
-Use the [JetLimeColumn](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-column.html).
+Use the [JetLimeColumn](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-column.html)
 
 ```kotlin
 val items = remember { mutableListOf(Item1, Item2, Item3) } // Any type of items
@@ -57,7 +57,7 @@ JetLimeColumn(
 ```
 ### 👉 Add items in a Horizontal Timeline
 
-Use the [JetLimeRow](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-row.html).
+Use the [JetLimeRow](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-row.html)
 
 ```kotlin
 val items = remember { mutableListOf(Item1, Item2, Item3) } // Any type of items
@@ -85,9 +85,36 @@ If we want to add items dynamically from a data source, we should use `mutableSt
 val items = remember { mutableStateListOf<MyItem>() }
 ```
 
+### ✨ Add Extended events to a Vertical Timeline
+
+Use the `JetLimeExtendedEvent` with a [JetLimeColumn](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-column.html)
+Using this we can pass an additional content to draw on the left side of the timeline.
+
+```kotlin
+val items = remember { mutableListOf(Item1, Item2, Item3) } // Any type of items
+
+JetLimeColumn(
+  modifier = Modifier.padding(16.dp),
+  itemsList = ItemsList(items),
+  key = { _, item -> item.id },
+  style = JetLimeDefaults.columnStyle(contentDistance = 24.dp),
+) { index, item, position ->
+  JetLimeExtendedEvent(
+    style = JetLimeEventDefaults.eventStyle(
+      position = position
+    ),
+    additionalContent = {
+      // Additional content here
+    }
+  ) {
+    // Content here
+  }
+}
+```
+
 ### ⚡ Modify `JetLimeColumn` Style
 
-Use the [JetLimeDefaults.columnStyle()](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-defaults/column-style.html).
+Use the [JetLimeDefaults.columnStyle()](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-defaults/column-style.html)
 
 ```kotlin
 JetLimeColumn(
@@ -104,7 +131,7 @@ JetLimeColumn(
 ```
 ### ⚡ Modify `JetLimeRow` Style
 
-Use the [JetLimeDefaults.rowStyle()](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-defaults/row-style.html).
+Use the [JetLimeDefaults.rowStyle()](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-defaults/row-style.html)
 
 ```kotlin
 JetLimeRow(
@@ -122,7 +149,7 @@ JetLimeRow(
 
 ### ⚡ Modify `JetLimeEvent` Style
 
-Use the [JetLimeEventDefaults.eventStyle()](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-event-defaults/event-style.html).
+Use the [JetLimeEventDefaults.eventStyle()](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-jet-lime-event-defaults/event-style.html)
 
 ```kotlin
 JetLimeEvent(
@@ -148,13 +175,13 @@ JetLimeEvent(
 
 The timeline line and point circles can be set to either side.
 
-For a `JetLimeColumn` the alignment can be set to [LEFT](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-vertical-alignment/index.html#825393495%2FClasslikes%2F-1761194290) or [RIGHT](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-vertical-alignment/index.html#861885460%2FClasslikes%2F-1761194290).
+For a `JetLimeColumn` the alignment can be set to [LEFT](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-vertical-alignment/index.html#825393495%2FClasslikes%2F-1761194290) or [RIGHT](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-vertical-alignment/index.html#861885460%2FClasslikes%2F-1761194290)
 
 ```kotlin
 lineVerticalAlignment = LEFT or RIGHT // Default is LEFT
 ```
 
-For a `JetLimeRow` the alignment can be set to [TOP](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-horizontal-alignment/index.html#769734623%2FClasslikes%2F-1761194290) or [BOTTOM](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-horizontal-alignment/index.html#-1737811223%2FClasslikes%2F-1761194290).
+For a `JetLimeRow` the alignment can be set to [TOP](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-horizontal-alignment/index.html#769734623%2FClasslikes%2F-1761194290) or [BOTTOM](https://pushpalroy.github.io/jetlime/jetlime/com.pushpal.jetlime/-horizontal-alignment/index.html#-1737811223%2FClasslikes%2F-1761194290)
 
 ```kotlin
 lineHorizontalAlignment = TOP or BOTTOM // Default is TOP

app/src/main/java/com/pushpal/jetlime/ui/Home.kt

@@ -49,6 +49,7 @@ import com.pushpal.jetlime.ui.timelines.BasicHorizontalTimeLine
 import com.pushpal.jetlime.ui.timelines.BasicVerticalTimeLine
 import com.pushpal.jetlime.ui.timelines.CustomizedHorizontalTimeLine
 import com.pushpal.jetlime.ui.timelines.CustomizedVerticalTimeLine
+import com.pushpal.jetlime.ui.timelines.ExtendedVerticalTimeLine
 import com.pushpal.jetlime.ui.timelines.VerticalDynamicTimeLine
 
 @Composable
@@ -77,7 +78,7 @@ fun HomeScreen(
 @OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun HomeContent(modifier: Modifier = Modifier) {
-  val tabs = remember { listOf("Basic", "Dynamic", "Custom") }
+  val tabs = remember { listOf("Basic", "Dynamic", "Custom", "Extended") }
   var selectedIndex by remember { mutableIntStateOf(0) }
   Column(modifier = modifier) {
     ScrollableTabRow(
@@ -115,6 +116,8 @@ fun HomeContent(modifier: Modifier = Modifier) {
             CustomizedVerticalTimeLine()
           }
         }
+
+        3 -> ExtendedVerticalTimeLine()
       }
     }
   }

app/src/main/java/com/pushpal/jetlime/ui/data/Item.kt

@@ -24,10 +24,15 @@
 */
 package com.pushpal.jetlime.ui.data
 
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
+
 data class Item(
   val id: Int = 0,
   var name: String,
-  var date: String = "",
+  var info: String = "",
+  var images: ImmutableList<Int> = persistentListOf(),
+  var showActions: Boolean = false,
   val description: String? = null,
 )
 
@@ -90,3 +95,17 @@ fun getPlanets(): MutableList<Item> {
     Item(id = 14, name = "Nidavellir", description = "Dwarven realm, creators of Mjolnir"),
   )
 }
+
+val placeNames = listOf(
+  "Central Park", "Harbor View", "Visited Oak Street?", "Maple Avenue", "River Road",
+  "Sunset Boulevard", "Pine Lane", "Elm Street", "Cedar Drive", "Willow Way",
+)
+val activityNames = listOf(
+  "Walking", "Running", "Cycling", "Hiking", "Swimming",
+  "Reading", "Drawing", "Cooking", "Gardening", "Fishing",
+)
+
+fun String.extractFirstTime(): String? {
+  val timePattern = "\\d{1,2}:\\d{2} [APM]{2}".toRegex()
+  return timePattern.find(this)?.value
+}

app/src/main/java/com/pushpal/jetlime/ui/timelines/ExtendedVerticalTimeLine.kt

@@ -0,0 +1,144 @@
+/*
+* MIT License
+*
+* Copyright (c) 2024 Pushpal Roy
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+*/
+package com.pushpal.jetlime.ui.timelines
+
+import android.widget.Toast
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ExperimentalComposeApi
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.snapshots.SnapshotStateList
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.pushpal.jetlime.ItemsList
+import com.pushpal.jetlime.JetLimeColumn
+import com.pushpal.jetlime.JetLimeDefaults
+import com.pushpal.jetlime.JetLimeEventDefaults
+import com.pushpal.jetlime.JetLimeExtendedEvent
+import com.pushpal.jetlime.ui.data.Item
+import com.pushpal.jetlime.ui.data.activityNames
+import com.pushpal.jetlime.ui.data.placeNames
+import com.pushpal.jetlime.ui.timelines.event.ExtendedEventAdditionalContent
+import com.pushpal.jetlime.ui.timelines.event.ExtendedEventContent
+import com.pushpal.jetlime.ui.timelines.event.activityDescription
+import com.pushpal.jetlime.ui.timelines.event.activityInfo
+import com.pushpal.jetlime.ui.timelines.event.decidePointAnimation
+import com.pushpal.jetlime.ui.timelines.event.decidePointType
+import com.pushpal.jetlime.ui.timelines.event.placeDescription
+import com.pushpal.jetlime.ui.timelines.event.placeImages
+import com.pushpal.jetlime.ui.timelines.event.placeInfo
+
+@OptIn(ExperimentalComposeApi::class)
+@ExperimentalAnimationApi
+@Composable
+fun ExtendedVerticalTimeLine(modifier: Modifier = Modifier) {
+  val items = remember { mutableStateListOf<Item>() }
+  val context = LocalContext.current
+
+  // Generate sample data to populate in the list
+  GenerateDataEffect(items)
+
+  Surface(
+    modifier = modifier.fillMaxSize(),
+  ) {
+    JetLimeColumn(
+      modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp),
+      itemsList = ItemsList(items),
+      key = { _, item -> item.id },
+      style = JetLimeDefaults.columnStyle(contentDistance = 24.dp),
+    ) { index, item, position ->
+      JetLimeExtendedEvent(
+        style = JetLimeEventDefaults.eventStyle(
+          position = position,
+          pointAnimation = index.decidePointAnimation(),
+          pointType = index.decidePointType(),
+        ),
+        additionalContentMaxWidth = 88.dp,
+        additionalContent = {
+          ExtendedEventAdditionalContent(
+            modifier = Modifier
+              .fillMaxWidth()
+              .clickable {
+                Toast
+                  .makeText(context, "Clicked on additional content: $index", Toast.LENGTH_SHORT)
+                  .show()
+              },
+            item = item,
+          )
+        },
+      ) {
+        ExtendedEventContent(
+          modifier = Modifier
+            .clickable {
+              Toast.makeText(context, "Clicked on content: $index", Toast.LENGTH_SHORT).show()
+            },
+          item = item,
+        )
+      }
+    }
+  }
+}
+
+@Composable
+private fun GenerateDataEffect(items: SnapshotStateList<Item>) {
+  LaunchedEffect(Unit) {
+    for (i in 0 until 15) {
+      items.add(
+        Item(
+          id = i,
+          name = placeNames[i % placeNames.size],
+          info = placeInfo(i),
+          description = placeDescription(i),
+          images = placeImages(i),
+          showActions = i == 2,
+        ),
+      )
+      items.add(
+        Item(
+          id = i + 15,
+          name = activityNames[i % activityNames.size],
+          info = activityInfo(i),
+          description = activityDescription(i),
+        ),
+      )
+    }
+  }
+}
+
+@ExperimentalAnimationApi
+@Preview("Preview ExtendedVerticalTimeLine")
+@Composable
+private fun PreviewExtendedVerticalTimeLine() {
+  ExtendedVerticalTimeLine()
+}