From 4afcb86d48d50d43527f3f6025c1d03a5068f541 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Levi=20=28Nguy=E1=BB=85n=20L=C6=B0=C6=A1ng=20Huy=29?=
 <nguyen.luong.huy@moneyforward.vn>
Date: Thu, 14 Jul 2022 22:41:51 +0700
Subject: [PATCH] feat(useArrayMap): new function (#1908)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/shared/index.ts                  |  1 +
 packages/shared/useArrayMap/index.md      | 36 +++++++++++++++++++++++
 packages/shared/useArrayMap/index.test.ts | 29 ++++++++++++++++++
 packages/shared/useArrayMap/index.ts      | 11 +++++++
 4 files changed, 77 insertions(+)
 create mode 100644 packages/shared/useArrayMap/index.md
 create mode 100644 packages/shared/useArrayMap/index.test.ts
 create mode 100644 packages/shared/useArrayMap/index.ts

diff --git a/packages/shared/index.ts b/packages/shared/index.ts
index e10d7b1b9b7..9543cf7d1f2 100644
--- a/packages/shared/index.ts
+++ b/packages/shared/index.ts
@@ -31,6 +31,7 @@ export * from './tryOnMounted'
 export * from './tryOnScopeDispose'
 export * from './tryOnUnmounted'
 export * from './until'
+export * from './useArrayMap'
 export * from './useArrayFilter'
 export * from './useCounter'
 export * from './useDateFormat'
diff --git a/packages/shared/useArrayMap/index.md b/packages/shared/useArrayMap/index.md
new file mode 100644
index 00000000000..9d90b8c5533
--- /dev/null
+++ b/packages/shared/useArrayMap/index.md
@@ -0,0 +1,36 @@
+---
+category: Utilities
+---
+
+# useArrayMap
+
+Reactive `Array.map`
+
+## Usage
+
+### Use with array of multiple refs
+
+```js
+import { useArrayMap } from '@vueuse/core'
+const item1 = ref(0)
+const item2 = ref(2)
+const item3 = ref(4)
+const item4 = ref(6)
+const item5 = ref(8)
+const list = [item1, item2, item3, item4, item5]
+const result = useArrayMap(list, i => i * 2)
+// result.value: [0, 4, 8, 12, 16]
+item2.value = 1
+// result.value: [2, 4, 8, 12, 16]
+```
+
+### Use with reactive array
+
+```js
+import { useArrayMap } from '@vueuse/core'
+const list = ref([0, 1, 2, 3, 4])
+const result = useArrayMap(list, i => i * 2)
+// result.value: [0, 2, 4, 6, 8]
+list.value.pop()
+// result.value: [0, 2, 4, 6]
+```
diff --git a/packages/shared/useArrayMap/index.test.ts b/packages/shared/useArrayMap/index.test.ts
new file mode 100644
index 00000000000..1e10eca3111
--- /dev/null
+++ b/packages/shared/useArrayMap/index.test.ts
@@ -0,0 +1,29 @@
+import { ref } from 'vue-demi'
+import { useArrayMap } from '../useArrayMap'
+
+describe('useArrayMap', () => {
+  it('should be defined', () => {
+    expect(useArrayMap).toBeDefined()
+  })
+
+  it('should work with array of refs', () => {
+    const item1 = ref(0)
+    const item2 = ref(2)
+    const item3 = ref(4)
+    const item4 = ref(6)
+    const item5 = ref(8)
+    const list = [item1, item2, item3, item4, item5]
+    const result = useArrayMap(list, i => i * 2)
+    expect(result.value).toStrictEqual([0, 4, 8, 12, 16])
+    item1.value = 1
+    expect(result.value).toStrictEqual([2, 4, 8, 12, 16])
+  })
+
+  it('should work with reactive array', () => {
+    const list = ref([0, 1, 2, 3, 4])
+    const result = useArrayMap(list, i => i * 2)
+    expect(result.value).toStrictEqual([0, 2, 4, 6, 8])
+    list.value.pop()
+    expect(result.value).toStrictEqual([0, 2, 4, 6])
+  })
+})
diff --git a/packages/shared/useArrayMap/index.ts b/packages/shared/useArrayMap/index.ts
new file mode 100644
index 00000000000..d50fbb9e020
--- /dev/null
+++ b/packages/shared/useArrayMap/index.ts
@@ -0,0 +1,11 @@
+import type { MaybeComputedRef } from '@vueuse/shared'
+import { resolveUnref } from '@vueuse/shared'
+import type { ComputedRef } from 'vue-demi'
+import { computed } from 'vue-demi'
+
+export function useArrayMap<T>(
+  list: MaybeComputedRef<MaybeComputedRef<T>[]>,
+  fn: (element: T, index: number, array: T[]) => T,
+): ComputedRef<T[]> {
+  return computed(() => resolveUnref(list).map(i => resolveUnref(i)).map(fn))
+}