From 4f0ad3677ac8b22ca1b427abab33fe4a90201c97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Melih=20Alt=C4=B1nta=C5=9F?= <melihaltintas@hotmail.com>
Date: Tue, 8 Feb 2022 12:55:43 +0300
Subject: [PATCH] feat(useInfiniteScroll): new function (#1219)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/core/index.ts                   |  1 +
 packages/core/useInfiniteScroll/demo.vue | 24 +++++++++++++
 packages/core/useInfiniteScroll/index.md | 36 +++++++++++++++++++
 packages/core/useInfiniteScroll/index.ts | 44 ++++++++++++++++++++++++
 4 files changed, 105 insertions(+)
 create mode 100644 packages/core/useInfiniteScroll/demo.vue
 create mode 100644 packages/core/useInfiniteScroll/index.md
 create mode 100644 packages/core/useInfiniteScroll/index.ts

diff --git a/packages/core/index.ts b/packages/core/index.ts
index 2471ee261956..1657a7b6c78c 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -49,6 +49,7 @@ export * from './useFps'
 export * from './useFullscreen'
 export * from './useGeolocation'
 export * from './useIdle'
+export * from './useInfiniteScroll'
 export * from './useIntersectionObserver'
 export * from './useKeyModifier'
 export * from './useLocalStorage'
diff --git a/packages/core/useInfiniteScroll/demo.vue b/packages/core/useInfiniteScroll/demo.vue
new file mode 100644
index 000000000000..0be91dd14c5b
--- /dev/null
+++ b/packages/core/useInfiniteScroll/demo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue-demi'
+import { useInfiniteScroll } from '.'
+
+const el = ref<HTMLElement | null>(null)
+const data = ref([1, 2, 3, 4, 5, 6])
+
+useInfiniteScroll(
+  el,
+  () => {
+    const length = data.value.length + 1
+    data.value.push(...Array.from({ length: 5 }, (_, i) => length + i))
+  },
+  { distance: 10 },
+)
+</script>
+
+<template>
+  <div ref="el" class="flex flex-col gap-2 p-4 w-300px h-300px m-auto overflow-scroll bg-gray-500/5 rounded">
+    <div v-for="item in data" :key="item" class="h-30 bg-gray-500/5 rounded p-3">
+      {{ item }}
+    </div>
+  </div>
+</template>
diff --git a/packages/core/useInfiniteScroll/index.md b/packages/core/useInfiniteScroll/index.md
new file mode 100644
index 000000000000..f06178b21031
--- /dev/null
+++ b/packages/core/useInfiniteScroll/index.md
@@ -0,0 +1,36 @@
+---
+category: Sensors
+---
+
+# useInfiniteScroll
+
+Infinite scrolling of the element. 
+
+## Usage
+
+```html
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { useInfiniteScroll } from '@vueuse/core'
+
+const el = ref<HTMLElement>(null)
+const data = ref([1,2,3,4,5,6])
+
+useInfiniteScroll(
+  el,
+  () => {
+    // load more
+    data.value.push(...moreData)
+  },
+  { distance: 10 }
+)
+</script>
+
+<template>
+  <div ref="el">
+    <div v-for="item in data">
+      {{ item }}
+    </div>
+  </div>
+</template>
+```
diff --git a/packages/core/useInfiniteScroll/index.ts b/packages/core/useInfiniteScroll/index.ts
new file mode 100644
index 000000000000..deeefb2bafda
--- /dev/null
+++ b/packages/core/useInfiniteScroll/index.ts
@@ -0,0 +1,44 @@
+import type { UnwrapNestedRefs } from 'vue-demi'
+import { reactive, watch } from 'vue-demi'
+import type { MaybeRef } from '@vueuse/shared'
+import type { UseScrollOptions } from '../useScroll'
+import { useScroll } from '../useScroll'
+
+export interface UseInfiniteScrollOptions extends UseScrollOptions {
+  /**
+   * The minimum distance between the bottom of the element and the bottom of the viewport
+   *
+   * @default 0
+   */
+  distance?: number
+}
+
+/**
+ * Reactive infinite scroll.
+ *
+ * @see https://vueuse.org/useInfiniteScroll
+ */
+export function useInfiniteScroll(
+  element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>,
+  onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void,
+  options: UseInfiniteScrollOptions = {},
+) {
+  const state = reactive(useScroll(
+    element,
+    {
+      ...options,
+      offset: {
+        bottom: options.distance ?? 0,
+        ...options.offset,
+      },
+    },
+  ))
+
+  watch(
+    () => state.arrivedState.bottom,
+    (v) => {
+      if (v)
+        onLoadMore(state)
+    },
+  )
+}