Kotlin/infinitescroll views

src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt

@@ -0,0 +1,65 @@
+package com.webforj.samples.views.ininitescroll
+
+import com.webforj.annotation.StyleSheet
+import com.webforj.component.Composite
+import com.webforj.component.html.elements.Div
+import com.webforj.component.icons.FeatherIcon
+import com.webforj.kotlin.dsl.component.html.elements.div
+import com.webforj.kotlin.dsl.component.html.elements.span
+import com.webforj.kotlin.dsl.component.icons.featherIcon
+import com.webforj.kotlin.dsl.component.infiniitescroll.infiniteScroll
+import com.webforj.kotlin.extension.classNames
+import com.webforj.kotlin.extension.percent
+import com.webforj.kotlin.extension.plus
+import com.webforj.kotlin.extension.px
+import com.webforj.kotlin.extension.set
+import com.webforj.kotlin.extension.size
+import com.webforj.kotlin.extension.styles
+import com.webforj.kotlin.extension.vh
+import com.webforj.router.annotation.FrameTitle
+import com.webforj.router.annotation.Route
+
+@Route
+@FrameTitle("Fully Customized Loading")
+@StyleSheet("ws://css/infinitescroll/infinitescrollcustom.css")
+class InfiniteScrollCustomLoadingKotlinView: Composite<Div>() {
+  private val self = boundComponent
+
+  init {
+      self.apply {
+        height = 100.vh
+        styles["overflow"] = "auto"
+        infiniteScroll {
+          classNames + "is"
+          height = 100.percent
+          val canvas = div {
+            maxWidth = 600.px
+            classNames + "is-canvas"
+          }
+          div {
+            addClassName("custom-loading")
+            featherIcon(FeatherIcon.CLOUD) {
+              size = 32.px to 32.px
+              classNames + "loading-icon"
+            }
+            span("Loading awesome content...")
+          }
+          var index = 0
+          onScroll {
+            if (index > 40) {
+              isCompleted = true
+              update()
+              return@onScroll
+            }
+
+            for (i in 0..<8) {
+              canvas.add(Item())
+            }
+
+            index += 8
+            update()
+          }
+        }
+      }
+  }
+}

src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt

@@ -0,0 +1,58 @@
+package com.webforj.samples.views.ininitescroll
+
+import com.webforj.annotation.StyleSheet
+import com.webforj.component.Composite
+import com.webforj.component.html.elements.Div
+import com.webforj.component.icons.FeatherIcon
+import com.webforj.component.layout.flexlayout.FlexAlignment
+import com.webforj.component.layout.flexlayout.FlexJustifyContent
+import com.webforj.kotlin.dsl.component.html.elements.div
+import com.webforj.kotlin.dsl.component.icons.featherIcon
+import com.webforj.kotlin.dsl.component.infiniitescroll.infiniteScroll
+import com.webforj.kotlin.dsl.component.layout.flexlayout.flexLayout
+import com.webforj.kotlin.dsl.component.layout.flexlayout.horizontal
+import com.webforj.kotlin.dsl.component.layout.flexlayout.vertical
+import com.webforj.kotlin.extension.classNames
+import com.webforj.kotlin.extension.percent
+import com.webforj.kotlin.extension.plus
+import com.webforj.kotlin.extension.px
+import com.webforj.kotlin.extension.set
+import com.webforj.kotlin.extension.styles
+import com.webforj.kotlin.extension.vh
+import com.webforj.router.annotation.Route
+import kotlin.random.Random
+
+@Route
+@StyleSheet("ws://css/infinitescroll/infinitescroll.css")
+class InfiniteScrollKotlinView: Composite<Div>() {
+  private val self = boundComponent
+
+  init {
+      self.apply {
+        height = 100.vh
+        styles["overflow"] = "auto"
+        infiniteScroll {
+          height = 100.percent
+          val canvas = div {
+            maxWidth = 600.px
+            classNames + "is-canvas"
+          }
+          var index = 0
+          onScroll {
+            if (index > 40) {
+              isCompleted = true
+              update()
+              return@onScroll
+            }
+            for (i in 0..<8) {
+              canvas.add(Item())
+            }
+            index += 8
+            update()
+          }
+        }
+      }
+  }
+
+}
+

src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt

@@ -0,0 +1,55 @@
+package com.webforj.samples.views.ininitescroll
+
+import com.webforj.annotation.StyleSheet
+import com.webforj.component.Composite
+import com.webforj.component.html.elements.Div
+import com.webforj.component.icons.TablerIcon
+import com.webforj.kotlin.dsl.component.html.elements.div
+import com.webforj.kotlin.dsl.component.infiniitescroll.infiniteScroll
+import com.webforj.kotlin.extension.classNames
+import com.webforj.kotlin.extension.percent
+import com.webforj.kotlin.extension.plus
+import com.webforj.kotlin.extension.px
+import com.webforj.kotlin.extension.set
+import com.webforj.kotlin.extension.styles
+import com.webforj.kotlin.extension.vh
+import com.webforj.router.annotation.FrameTitle
+import com.webforj.router.annotation.Route
+
+@Route
+@FrameTitle("Custom Loading Indicator")
+@StyleSheet("ws://css/infinitescroll/infinitescroll.css")
+class InfiniteScrollLoadingKotlinView: Composite<Div>() {
+  private val self = boundComponent
+
+  init {
+      self.apply {
+        height = 100.vh
+        styles["overflow"] = "auto"
+        infiniteScroll("Fetching more records...") {
+          classNames + "is"
+          height = 100.percent
+          val canvas = div {
+            maxWidth = 600.px
+            classNames + "is-canvas"
+          }
+          setIcon(TablerIcon.create("cloud-download"))
+          var index = 0
+          onScroll {
+            if (index > 40) {
+              isCompleted = true
+              update()
+              return@onScroll
+            }
+
+            for (i in 0..<8) {
+              canvas.add(Item())
+            }
+
+            index += 8
+            update()
+          }
+        }
+      }
+  }
+}

src/main/kotlin/com/webforj/samples/views/ininitescroll/Item.kt

@@ -0,0 +1,50 @@
+package com.webforj.samples.views.ininitescroll
+
+import com.webforj.component.Composite
+import com.webforj.component.html.elements.Div
+import com.webforj.component.icons.FeatherIcon
+import com.webforj.component.layout.flexlayout.FlexAlignment
+import com.webforj.component.layout.flexlayout.FlexJustifyContent
+import com.webforj.kotlin.dsl.component.html.elements.div
+import com.webforj.kotlin.dsl.component.icons.featherIcon
+import com.webforj.kotlin.dsl.component.layout.flexlayout.flexLayout
+import com.webforj.kotlin.dsl.component.layout.flexlayout.horizontal
+import com.webforj.kotlin.dsl.component.layout.flexlayout.vertical
+import com.webforj.kotlin.extension.classNames
+import com.webforj.kotlin.extension.minSize
+import com.webforj.kotlin.extension.plus
+import com.webforj.kotlin.extension.px
+import kotlin.random.Random
+
+class Item: Composite<Div>() {
+  private val self = boundComponent
+  private val random = Random.Default
+  private val names = arrayOf(
+    "John", "Jane", "Alice", "Bob", "Charlie", "Diana",
+    "Ethan", "Fiona", "George", "Hannah", "Ian", "Jill"
+  );
+
+  init {
+      self.apply {
+        flexLayout {
+          horizontal()
+          justifyContent = FlexJustifyContent.BETWEEN
+          alignment = FlexAlignment.CENTER
+          flexLayout {
+            vertical()
+            div(names.random()) {
+              classNames + "item-name"
+            }
+            div {
+              classNames + "item-excerpt"
+              text = ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                + "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
+            }
+          }
+          featherIcon(FeatherIcon.ARROW_RIGHT) {
+            minSize = 24.px to 24.px
+          }
+        }
+      }
+  }
+}