From 9a522f285657aa23a4e666f176a294eff94ea016 Mon Sep 17 00:00:00 2001 From: XLor Date: Tue, 12 Jul 2022 15:50:11 +0000 Subject: [PATCH 1/3] feat: useArrayFind --- packages/shared/useArrayFind/index.md | 26 ++++++++++++++++ packages/shared/useArrayFind/index.test.ts | 35 ++++++++++++++++++++++ packages/shared/useArrayFind/index.ts | 17 +++++++++++ 3 files changed, 78 insertions(+) create mode 100644 packages/shared/useArrayFind/index.md create mode 100644 packages/shared/useArrayFind/index.test.ts create mode 100644 packages/shared/useArrayFind/index.ts diff --git a/packages/shared/useArrayFind/index.md b/packages/shared/useArrayFind/index.md new file mode 100644 index 00000000000..762e5f0d198 --- /dev/null +++ b/packages/shared/useArrayFind/index.md @@ -0,0 +1,26 @@ +--- +category: Utilities +--- + +# useArrayFind + +Reactively array find. + +## Usage + +```js +import { useArrayFind } from '@vueuse/core' +const positive = useArrayFind([ref(1), ref(-1), ref(2)], val => val > 0) +// positive.value: 1 +``` + +### Use with reactive array + +```js +import { useArrayFind } from '@vueuse/core' +const list = reactive([-1, -2]) +const positive = useArrayFind(list, val => val > 0) +// positive.value: undefined +list.push(1) +// positive.value: 1 +``` diff --git a/packages/shared/useArrayFind/index.test.ts b/packages/shared/useArrayFind/index.test.ts new file mode 100644 index 00000000000..0dc72dbea9a --- /dev/null +++ b/packages/shared/useArrayFind/index.test.ts @@ -0,0 +1,35 @@ +import { reactive, ref } from 'vue-demi' +import { useSetup } from '../../.test' +import { useArrayFind } from '../useArrayFind' + +describe('useArrayFind', () => { + it('should be defined', () => { + expect(useArrayFind).toBeDefined() + }) + + it('should find postive', () => { + useSetup(() => { + const item1 = ref(1) + const item2 = ref(2) + const item3 = ref(3) + const positive = useArrayFind([item1, item2, item3], val => val > 0) + expect(positive.value).toBe(1) + item1.value = -1 + expect(positive.value).toBe(2) + item2.value = -1 + expect(positive.value).toBe(3) + item3.value = -1 + expect(positive.value).toBe(undefined) + }) + }) + + it('should work with reactive array', () => { + useSetup(() => { + const list = reactive([-1, -2]) + const positive = useArrayFind(list, val => val > 0) + expect(positive.value).toBe(undefined) + list.push(1) + expect(positive.value).toBe(1) + }) + }) +}) diff --git a/packages/shared/useArrayFind/index.ts b/packages/shared/useArrayFind/index.ts new file mode 100644 index 00000000000..e73b1b95384 --- /dev/null +++ b/packages/shared/useArrayFind/index.ts @@ -0,0 +1,17 @@ +import type { MaybeComputedRef } from '@vueuse/shared' +import type { ComputedRef } from 'vue-demi' +import { resolveUnref } from '@vueuse/shared' +import { computed } from 'vue-demi' + +export function useArrayFind( + list: MaybeComputedRef[]>, + fn: (element: T, index: number, array: MaybeComputedRef[]) => boolean, +): ComputedRef { + return computed(() => { + const find = Array.prototype.find.bind(resolveUnref(list)) + + const findCallback = (element: MaybeComputedRef, index: number, array: MaybeComputedRef[]) => fn(resolveUnref(element), index, array) + + return resolveUnref(find(findCallback)) + }) +} From 688d548f8bf4f5f5e3cb0172ee658b4504ffb246 Mon Sep 17 00:00:00 2001 From: XLor Date: Tue, 12 Jul 2022 17:05:47 +0000 Subject: [PATCH 2/3] chore: remove bind --- packages/shared/useArrayFind/index.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/shared/useArrayFind/index.ts b/packages/shared/useArrayFind/index.ts index e73b1b95384..7e14be20045 100644 --- a/packages/shared/useArrayFind/index.ts +++ b/packages/shared/useArrayFind/index.ts @@ -8,10 +8,8 @@ export function useArrayFind( fn: (element: T, index: number, array: MaybeComputedRef[]) => boolean, ): ComputedRef { return computed(() => { - const find = Array.prototype.find.bind(resolveUnref(list)) - const findCallback = (element: MaybeComputedRef, index: number, array: MaybeComputedRef[]) => fn(resolveUnref(element), index, array) - - return resolveUnref(find(findCallback)) + const found = resolveUnref(list).find(findCallback) + return found !== undefined ? resolveUnref(found) : undefined }) } From 5b12d5df9ccfc1084ed86cb572cd742e432e19d6 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 17 Jul 2022 14:40:48 +0800 Subject: [PATCH 3/3] chore: update --- packages/shared/useArrayFind/index.md | 9 ++++++--- packages/shared/useArrayFind/index.ts | 11 ++++++----- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/shared/useArrayFind/index.md b/packages/shared/useArrayFind/index.md index 762e5f0d198..9f6092f688c 100644 --- a/packages/shared/useArrayFind/index.md +++ b/packages/shared/useArrayFind/index.md @@ -1,16 +1,18 @@ --- -category: Utilities +category: Array --- # useArrayFind -Reactively array find. +Reactive `Array.find`. ## Usage ```js import { useArrayFind } from '@vueuse/core' -const positive = useArrayFind([ref(1), ref(-1), ref(2)], val => val > 0) + +const list = [ref(1), ref(-1), ref(2)] +const positive = useArrayFind(list, val => val > 0) // positive.value: 1 ``` @@ -18,6 +20,7 @@ const positive = useArrayFind([ref(1), ref(-1), ref(2)], val => val > 0) ```js import { useArrayFind } from '@vueuse/core' + const list = reactive([-1, -2]) const positive = useArrayFind(list, val => val > 0) // positive.value: undefined diff --git a/packages/shared/useArrayFind/index.ts b/packages/shared/useArrayFind/index.ts index 7e14be20045..8cf0fc24def 100644 --- a/packages/shared/useArrayFind/index.ts +++ b/packages/shared/useArrayFind/index.ts @@ -7,9 +7,10 @@ export function useArrayFind( list: MaybeComputedRef[]>, fn: (element: T, index: number, array: MaybeComputedRef[]) => boolean, ): ComputedRef { - return computed(() => { - const findCallback = (element: MaybeComputedRef, index: number, array: MaybeComputedRef[]) => fn(resolveUnref(element), index, array) - const found = resolveUnref(list).find(findCallback) - return found !== undefined ? resolveUnref(found) : undefined - }) + return computed(() => + resolveUnref( + resolveUnref(list) + .find((element, index, array) => fn(resolveUnref(element), index, array)), + ), + ) }