-
Notifications
You must be signed in to change notification settings - Fork 149
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ac19de3
commit 5b7ef06
Showing
10 changed files
with
269 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { toRefs, watch, nextTick, onMounted, ref, computed } from 'composition-api' | ||
|
|
||
| export default function useScroll (props, context, dep) | ||
| { | ||
| const { | ||
| limit, infinite, | ||
| } = toRefs(props) | ||
|
|
||
| // ============ DEPENDENCIES ============ | ||
|
|
||
| const isOpen = dep.isOpen | ||
| const offset = dep.offset | ||
| const search = dep.search | ||
| const pfo = dep.pfo | ||
|
|
||
| // ================ DATA ================ | ||
|
|
||
| // no export | ||
| const observer = ref(null) | ||
|
|
||
| const infiniteLoader = ref(null) | ||
|
|
||
| // ============== COMPUTED ============== | ||
|
|
||
| const hasMore = computed(() => { | ||
| return offset.value < pfo.value.length | ||
| }) | ||
|
|
||
| // =============== METHODS ============== | ||
|
|
||
| // no export | ||
| /* istanbul ignore next */ | ||
| const handleIntersectionObserver = async (entries) => { | ||
| const { isIntersecting, target } = entries[0] | ||
|
|
||
| if (isIntersecting) { | ||
| const parent = target.offsetParent | ||
| const scrollTop = parent.scrollTop | ||
|
|
||
| offset.value += limit.value == -1 ? 10 : limit.value | ||
|
|
||
| await nextTick() | ||
|
|
||
| parent.scrollTop = scrollTop | ||
| } | ||
| } | ||
|
|
||
| const observe = () => { | ||
| /* istanbul ignore else */ | ||
| if (isOpen.value && offset.value < pfo.value.length) { | ||
| observer.value.observe(infiniteLoader.value) | ||
| } else if (!isOpen.value && observer.value) { | ||
| observer.value.disconnect() | ||
| } | ||
| } | ||
|
|
||
| watch(isOpen, () => { | ||
| if (!infinite.value) { | ||
| return | ||
| } | ||
|
|
||
| observe() | ||
| }) | ||
|
|
||
| watch(search, () => { | ||
| if (!infinite.value) { | ||
| return | ||
| } | ||
|
|
||
| offset.value = limit.value | ||
|
|
||
| observe() | ||
| }, { flush: 'post' }) | ||
|
|
||
| onMounted(() => { | ||
| /* istanbul ignore else */ | ||
| if (window && window.IntersectionObserver) { | ||
| observer.value = new IntersectionObserver(handleIntersectionObserver) | ||
| } | ||
| }) | ||
|
|
||
| return { | ||
| hasMore, | ||
| infiniteLoader, | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { nextTick } from 'vue' | ||
| import { createSelect } from 'unit-test-helpers' | ||
| import flushPromises from 'flush-promises' | ||
|
|
||
| jest.useFakeTimers() | ||
|
|
||
| describe('useScroll', () => { | ||
| const observe = jest.fn() | ||
| const disconnect = jest.fn() | ||
|
|
||
| beforeEach(() => { | ||
| window.IntersectionObserver = jest.fn(() => ({ | ||
| observe, | ||
| disconnect, | ||
| })) | ||
| }) | ||
|
|
||
| afterEach(() => { | ||
| observe.mockRestore() | ||
| disconnect.mockRestore() | ||
| }) | ||
|
|
||
| describe('observer', () => { | ||
| it('should be null by default', () => { | ||
| const mock = jest.fn() | ||
|
|
||
| window.IntersectionObserver = jest.fn(() => { | ||
| mock() | ||
| }) | ||
|
|
||
| let select = createSelect({ | ||
| value: null, | ||
| options: [1,2,3] | ||
| }) | ||
|
|
||
| expect(mock).toHaveBeenCalled() | ||
| }) | ||
| }) | ||
|
|
||
| describe('observe', () => { | ||
| it('should observe if has infinite, opens && options is longer then limit', async () => { | ||
| let select = createSelect({ | ||
| value: null, | ||
| options: [1,2,3], | ||
| infinite: true, | ||
| limit: 1, | ||
| }) | ||
|
|
||
| select.vm.open() | ||
|
|
||
| await nextTick() | ||
|
|
||
| expect(observe).toHaveBeenCalledTimes(1) | ||
| }) | ||
|
|
||
| it('should disconnect if has infinite && closes', async () => { | ||
| let select = createSelect({ | ||
| value: null, | ||
| options: [1,2,3], | ||
| infinite: true, | ||
| limit: 1, | ||
| }) | ||
|
|
||
| select.vm.open() | ||
|
|
||
| await nextTick() | ||
|
|
||
| select.vm.close() | ||
|
|
||
| await nextTick() | ||
|
|
||
| expect(disconnect).toHaveBeenCalledTimes(1) | ||
| }) | ||
|
|
||
| it('should observe if has infinite, search changes && options is longer then limit', async () => { | ||
| let select = createSelect({ | ||
| value: null, | ||
| options: [1,11,111], | ||
| infinite: true, | ||
| limit: 1, | ||
| searchable: true, | ||
| }) | ||
|
|
||
| select.vm.open() | ||
| await nextTick() | ||
|
|
||
| expect(observe).toHaveBeenCalledTimes(1) | ||
|
|
||
| select.vm.search = '1' | ||
| await nextTick() | ||
|
|
||
| expect(observe).toHaveBeenCalledTimes(2) | ||
| }) | ||
| }) | ||
| }) |
Oops, something went wrong.