Page index

( +function useLockFn

( fn: (...args: P) => Promise ): fn: (...args: P) => Promise; ``` diff --git a/packages/hooks/src/useLockFn/index.ts b/packages/hooks/src/useLockFn/index.ts index 5ce96fba40..07de338273 100644 --- a/packages/hooks/src/useLockFn/index.ts +++ b/packages/hooks/src/useLockFn/index.ts @@ -1,19 +1,21 @@ import { useRef, useCallback } from 'react'; -function useLockFn

(fn: (...args: P) => Promise) { +function useLockFn

(fn: (...args: P) => Promise) { const lockRef = useRef(false); return useCallback( async (...args: P) => { - if (lockRef.current) return; + if (lockRef.current) { + return; + } lockRef.current = true; try { const ret = await fn(...args); - lockRef.current = false; return ret; } catch (e) { - lockRef.current = false; throw e; + } finally { + lockRef.current = false; } }, [fn], diff --git a/packages/hooks/src/useLockFn/index.zh-CN.md b/packages/hooks/src/useLockFn/index.zh-CN.md index 61ace21a64..60c48f2759 100644 --- a/packages/hooks/src/useLockFn/index.zh-CN.md +++ b/packages/hooks/src/useLockFn/index.zh-CN.md @@ -16,7 +16,7 @@ nav: ## API ```typescript -function useLockFn

( +function useLockFn

( fn: (...args: P) => Promise ): fn: (...args: P) => Promise; ``` diff --git a/packages/hooks/src/useLongPress/__tests__/index.test.ts b/packages/hooks/src/useLongPress/__tests__/index.spec.ts similarity index 71% rename from packages/hooks/src/useLongPress/__tests__/index.test.ts rename to packages/hooks/src/useLongPress/__tests__/index.spec.ts index 52d88e5aef..1232a051ec 100644 --- a/packages/hooks/src/useLongPress/__tests__/index.test.ts +++ b/packages/hooks/src/useLongPress/__tests__/index.spec.ts @@ -1,49 +1,52 @@ -import { renderHook } from '@testing-library/react-hooks'; -import useLongPress from '../index'; +import { renderHook } from '@testing-library/react'; +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'; import type { Options } from '../index'; +import useLongPress from '../index'; -const mockCallback = jest.fn(); -const mockClickCallback = jest.fn(); -const mockLongPressEndCallback = jest.fn(); +const mockCallback = vi.fn(); +const mockClickCallback = vi.fn(); +const mockLongPressEndCallback = vi.fn(); -let events = {}; +let events: Record = {}; const mockTarget = { - addEventListener: jest.fn((event, callback) => { + addEventListener: vi.fn((event, callback) => { events[event] = callback; }), - removeEventListener: jest.fn((event) => { + removeEventListener: vi.fn((event) => { Reflect.deleteProperty(events, event); }), }; -const setup = (onLongPress: any, target, options?: Options) => +const setup = (onLongPress: any, target: any, options?: Options) => renderHook(() => useLongPress(onLongPress, target, options)); describe('useLongPress', () => { beforeEach(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); + vi.clearAllMocks(); }); afterEach(() => { events = {}; - jest.useRealTimers(); + vi.useRealTimers(); + vi.clearAllMocks(); }); - it('longPress callback correct', () => { + test('longPress callback correct', () => { setup(mockCallback, mockTarget, { onClick: mockClickCallback, onLongPressEnd: mockLongPressEndCallback, }); expect(mockTarget.addEventListener).toBeCalled(); events['mousedown'](); - jest.advanceTimersByTime(350); + vi.advanceTimersByTime(350); events['mouseleave'](); expect(mockCallback).toBeCalledTimes(1); expect(mockLongPressEndCallback).toBeCalledTimes(1); expect(mockClickCallback).toBeCalledTimes(0); }); - it('click callback correct', () => { + test('click callback correct', () => { setup(mockCallback, mockTarget, { onClick: mockClickCallback, onLongPressEnd: mockLongPressEndCallback, @@ -58,14 +61,14 @@ describe('useLongPress', () => { expect(mockClickCallback).toBeCalledTimes(2); }); - it('longPress and click callback correct', () => { + test('longPress and click callback correct', () => { setup(mockCallback, mockTarget, { onClick: mockClickCallback, onLongPressEnd: mockLongPressEndCallback, }); expect(mockTarget.addEventListener).toBeCalled(); events['mousedown'](); - jest.advanceTimersByTime(350); + vi.advanceTimersByTime(350); events['mouseup'](); events['mousedown'](); events['mouseup'](); @@ -74,7 +77,7 @@ describe('useLongPress', () => { expect(mockClickCallback).toBeCalledTimes(1); }); - it('onLongPress should not be called when over the threshold', () => { + test('onLongPress should not be called when over the threshold', () => { const { unmount } = setup(mockCallback, mockTarget, { moveThreshold: { x: 30, @@ -89,14 +92,14 @@ describe('useLongPress', () => { clientY: 10, }), ); - jest.advanceTimersByTime(320); + vi.advanceTimersByTime(320); expect(mockCallback).not.toBeCalled(); unmount(); expect(events['mousemove']).toBeUndefined(); }); - it(`should not work when target don't support addEventListener method`, () => { + test(`should not work when target don't support addEventListener method`, () => { Object.defineProperty(mockTarget, 'addEventListener', { get() { return false; diff --git a/packages/hooks/src/useLongPress/demo/demo1.tsx b/packages/hooks/src/useLongPress/demo/demo1.tsx index 9a83291b4d..dacc982640 100644 --- a/packages/hooks/src/useLongPress/demo/demo1.tsx +++ b/packages/hooks/src/useLongPress/demo/demo1.tsx @@ -6,7 +6,7 @@ * desc.zh-CN: 请长按按钮查看效果。 */ -import React, { useState, useRef } from 'react'; +import { useState, useRef } from 'react'; import { useLongPress } from 'ahooks'; export default () => { diff --git a/packages/hooks/src/useLongPress/demo/demo2.tsx b/packages/hooks/src/useLongPress/demo/demo2.tsx index dadee3a1e6..260d47898d 100644 --- a/packages/hooks/src/useLongPress/demo/demo2.tsx +++ b/packages/hooks/src/useLongPress/demo/demo2.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { useLongPress } from 'ahooks'; export default () => { diff --git a/packages/hooks/src/useLongPress/demo/demo3.tsx b/packages/hooks/src/useLongPress/demo/demo3.tsx index 9a68bc37c4..6b155e7d53 100644 --- a/packages/hooks/src/useLongPress/demo/demo3.tsx +++ b/packages/hooks/src/useLongPress/demo/demo3.tsx @@ -5,7 +5,7 @@ * title.zh-CN: 超出移动阈值 * desc.zh-CN: 超出移动阈值之后，长按事件将不会触发 */ -import React, { useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { useLongPress } from 'ahooks'; export default () => { diff --git a/packages/hooks/src/useLongPress/index.en-US.md b/packages/hooks/src/useLongPress/index.en-US.md index ea1163581f..fc7e6aa2a3 100644 --- a/packages/hooks/src/useLongPress/index.en-US.md +++ b/packages/hooks/src/useLongPress/index.en-US.md @@ -27,7 +27,7 @@ Listen for the long press event of the target element. useLongPress( onLongPress: (event: MouseEvent | TouchEvent) => void, target: Target, - options?: { + options: { delay?: number; moveThreshold?: { x?: number; y?: number }; onClick?: (event: MouseEvent | TouchEvent) => void; @@ -42,7 +42,7 @@ useLongPress( | ----------- | ---------------------------- | ----------------------------------------------------------- | ------- | | onLongPress | Trigger function | `(event: MouseEvent \| TouchEvent) => void` | - | | target | DOM node or Ref | `Element` \| `() => Element` \| `MutableRefObject` | - | -| options | Optional configuration items | `Options` | - | +| options | Optional configuration items | `Options` | `{}` | ### Options diff --git a/packages/hooks/src/useLongPress/index.ts b/packages/hooks/src/useLongPress/index.ts index df3f8be751..1edcda784c 100644 --- a/packages/hooks/src/useLongPress/index.ts +++ b/packages/hooks/src/useLongPress/index.ts @@ -2,7 +2,6 @@ import { useRef } from 'react'; import useLatest from '../useLatest'; import type { BasicTarget } from '../utils/domTarget'; import { getTargetElement } from '../utils/domTarget'; -import isBrowser from '../utils/isBrowser'; import useEffectWithTarget from '../utils/useEffectWithTarget'; type EventType = MouseEvent | TouchEvent; @@ -13,11 +12,6 @@ export interface Options { onLongPressEnd?: (event: EventType) => void; } -const touchSupported = - isBrowser && - // @ts-ignore - ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)); - function useLongPress( onLongPress: (event: EventType) => void, target: BasicTarget, @@ -27,9 +21,12 @@ function useLongPress( const onClickRef = useLatest(onClick); const onLongPressEndRef = useLatest(onLongPressEnd); - const timerRef = useRef>(); + const timerRef = useRef>(undefined); + const isTriggeredRef = useRef(false); const pervPositionRef = useRef({ x: 0, y: 0 }); + const mousePressed = useRef(false); + const touchPressed = useRef(false); const hasMoveThreshold = !!( (moveThreshold?.x && moveThreshold.x > 0) || (moveThreshold?.y && moveThreshold.y > 0) @@ -54,13 +51,12 @@ function useLongPress( }; function getClientPosition(event: EventType) { - if (event instanceof TouchEvent) { + if ('TouchEvent' in window && event instanceof TouchEvent) { return { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY, }; } - if (event instanceof MouseEvent) { return { clientX: event.clientX, @@ -68,69 +64,134 @@ function useLongPress( }; } - console.warn('Unsupported event type'); - return { clientX: 0, clientY: 0 }; } - const onStart = (event: EventType) => { + const createTimer = (event: EventType) => { + timerRef.current = setTimeout(() => { + onLongPressRef.current(event); + isTriggeredRef.current = true; + }, delay); + }; + + const onTouchStart = (event: TouchEvent) => { + if (touchPressed.current) { + return; + } + touchPressed.current = true; + if (hasMoveThreshold) { const { clientX, clientY } = getClientPosition(event); pervPositionRef.current.x = clientX; pervPositionRef.current.y = clientY; } - timerRef.current = setTimeout(() => { - onLongPressRef.current(event); - isTriggeredRef.current = true; - }, delay); + createTimer(event); + }; + + const onMouseDown = (event: MouseEvent) => { + if ((event as any)?.sourceCapabilities?.firesTouchEvents) { + return; + } + + mousePressed.current = true; + + if (hasMoveThreshold) { + pervPositionRef.current.x = event.clientX; + pervPositionRef.current.y = event.clientY; + } + createTimer(event); }; - const onMove = (event: TouchEvent) => { + const onMove = (event: EventType) => { if (timerRef.current && overThreshold(event)) { - clearInterval(timerRef.current); + clearTimeout(timerRef.current); timerRef.current = undefined; } }; - const onEnd = (event: EventType, shouldTriggerClick: boolean = false) => { + const onTouchEnd = (event: TouchEvent) => { + if (!touchPressed.current) { + return; + } + touchPressed.current = false; + if (timerRef.current) { clearTimeout(timerRef.current); + timerRef.current = undefined; } + if (isTriggeredRef.current) { onLongPressEndRef.current?.(event); + } else if (onClickRef.current) { + onClickRef.current(event); } - if (shouldTriggerClick && !isTriggeredRef.current && onClickRef.current) { + isTriggeredRef.current = false; + }; + + const onMouseUp = (event: MouseEvent) => { + if ((event as any)?.sourceCapabilities?.firesTouchEvents) { + return; + } + if (!mousePressed.current) { + return; + } + mousePressed.current = false; + + if (timerRef.current) { + clearTimeout(timerRef.current); + timerRef.current = undefined; + } + + if (isTriggeredRef.current) { + onLongPressEndRef.current?.(event); + } else if (onClickRef.current) { onClickRef.current(event); } isTriggeredRef.current = false; }; - const onEndWithClick = (event: EventType) => onEnd(event, true); - - if (!touchSupported) { - targetElement.addEventListener('mousedown', onStart); - targetElement.addEventListener('mouseup', onEndWithClick); - targetElement.addEventListener('mouseleave', onEnd); - if (hasMoveThreshold) targetElement.addEventListener('mousemove', onMove); - } else { - targetElement.addEventListener('touchstart', onStart); - targetElement.addEventListener('touchend', onEndWithClick); - if (hasMoveThreshold) targetElement.addEventListener('touchmove', onMove); + const onMouseLeave = (event: MouseEvent) => { + if (!mousePressed.current) { + return; + } + mousePressed.current = false; + + if (timerRef.current) { + clearTimeout(timerRef.current); + timerRef.current = undefined; + } + if (isTriggeredRef.current) { + onLongPressEndRef.current?.(event); + isTriggeredRef.current = false; + } + }; + + targetElement.addEventListener('mousedown', onMouseDown as EventListener); + targetElement.addEventListener('mouseup', onMouseUp as EventListener); + targetElement.addEventListener('mouseleave', onMouseLeave as EventListener); + targetElement.addEventListener('touchstart', onTouchStart as EventListener); + targetElement.addEventListener('touchend', onTouchEnd as EventListener); + + if (hasMoveThreshold) { + targetElement.addEventListener('mousemove', onMove as EventListener); + targetElement.addEventListener('touchmove', onMove as EventListener); } + return () => { if (timerRef.current) { clearTimeout(timerRef.current); isTriggeredRef.current = false; } - if (!touchSupported) { - targetElement.removeEventListener('mousedown', onStart); - targetElement.removeEventListener('mouseup', onEndWithClick); - targetElement.removeEventListener('mouseleave', onEnd); - if (hasMoveThreshold) targetElement.removeEventListener('mousemove', onMove); - } else { - targetElement.removeEventListener('touchstart', onStart); - targetElement.removeEventListener('touchend', onEndWithClick); - if (hasMoveThreshold) targetElement.removeEventListener('touchmove', onMove); + + targetElement.removeEventListener('mousedown', onMouseDown as EventListener); + targetElement.removeEventListener('mouseup', onMouseUp as EventListener); + targetElement.removeEventListener('mouseleave', onMouseLeave as EventListener); + targetElement.removeEventListener('touchstart', onTouchStart as EventListener); + targetElement.removeEventListener('touchend', onTouchEnd as EventListener); + + if (hasMoveThreshold) { + targetElement.removeEventListener('mousemove', onMove as EventListener); + targetElement.removeEventListener('touchmove', onMove as EventListener); } }; }, diff --git a/packages/hooks/src/useLongPress/index.zh-CN.md b/packages/hooks/src/useLongPress/index.zh-CN.md index d1cedd91c3..a3683ca2cf 100644 --- a/packages/hooks/src/useLongPress/index.zh-CN.md +++ b/packages/hooks/src/useLongPress/index.zh-CN.md @@ -27,7 +27,7 @@ nav: useLongPress( onLongPress: (event: MouseEvent | TouchEvent) => void, target: Target, - options?: { + options: { delay?: number; moveThreshold?: { x?: number; y?: number }; onClick?: (event: MouseEvent | TouchEvent) => void; @@ -42,7 +42,7 @@ useLongPress( | ----------- | ---------------- | ----------------------------------------------------------- | ------ | | onLongPress | 触发函数 | `(event: MouseEvent \| TouchEvent) => void` | - | | target | DOM 节点或者 Ref | `Element` \| `() => Element` \| `MutableRefObject` | - | -| options | 可选配置项 | `Options` | - | +| options | 可选配置项 | `Options` | `{}` | ### Options diff --git a/packages/hooks/src/useMap/__tests__/index.test.ts b/packages/hooks/src/useMap/__tests__/index.spec.ts similarity index 70% rename from packages/hooks/src/useMap/__tests__/index.test.ts rename to packages/hooks/src/useMap/__tests__/index.spec.ts index 11a5a10d11..5996b7ac79 100644 --- a/packages/hooks/src/useMap/__tests__/index.test.ts +++ b/packages/hooks/src/useMap/__tests__/index.spec.ts @@ -1,10 +1,11 @@ -import { act, renderHook } from '@testing-library/react-hooks'; +import { act, renderHook } from '@testing-library/react'; +import { describe, expect, test } from 'vitest'; import useMap from '../index'; const setup = (initialMap?: Iterable<[any, any]>) => renderHook(() => useMap(initialMap)); describe('useMap', () => { - it('should init map and utils', () => { + test('should init map and utils', () => { const { result } = setup([ ['foo', 'bar'], ['a', 1], @@ -24,13 +25,15 @@ describe('useMap', () => { }); }); - it('should init empty map if not initial object provided', () => { + test('should init empty map if not initial object provided', () => { const { result } = setup(); - expect([...result.current[0]]).toEqual([]); + + const { result: result2 } = setup(undefined); + expect([...result2.current[0]]).toEqual([]); }); - it('should get corresponding value for initial provided key', () => { + test('should get corresponding value for initial provided key', () => { const { result } = setup([ ['foo', 'bar'], ['a', 1], @@ -45,7 +48,7 @@ describe('useMap', () => { expect(value).toBe(1); }); - it('should get corresponding value for existing provided key', () => { + test('should get corresponding value for existing provided key', () => { const { result } = setup([ ['foo', 'bar'], ['a', 1], @@ -63,7 +66,7 @@ describe('useMap', () => { expect(value).toBe(99); }); - it('should get undefined for non-existing provided key', () => { + test('should get undefined for non-existing provided key', () => { const { result } = setup([ ['foo', 'bar'], ['a', 1], @@ -78,7 +81,7 @@ describe('useMap', () => { expect(value).toBeUndefined(); }); - it('should set new key-value pair', () => { + test('should set new key-value pair', () => { const { result } = setup([ ['foo', 'bar'], ['a', 1], @@ -96,7 +99,7 @@ describe('useMap', () => { ]); }); - it('should override current value if setting existing key', () => { + test('should override current value if setting existing key', () => { const { result } = setup([ ['foo', 'bar'], ['a', 1], @@ -113,7 +116,7 @@ describe('useMap', () => { ]); }); - it('should set new map', () => { + test('should set new map', () => { const { result } = setup([ ['foo', 'bar'], ['a', 1], @@ -131,9 +134,15 @@ describe('useMap', () => { ['foo', 'foo'], ['a', 2], ]); + + act(() => { + // @ts-ignore + utils.setAll(); + }); + expect([...result.current[0]]).toEqual([]); }); - it('remove should be work', () => { + test('remove should be work', () => { const { result } = setup([['msg', 'hello']]); const { remove } = result.current[1]; expect(result.current[0].size).toBe(1); @@ -141,9 +150,27 @@ describe('useMap', () => { remove('msg'); }); expect(result.current[0].size).toBe(0); + + const { result: result2 } = setup([ + ['foo', 'bar'], + ['a', 1], + ['b', 2], + ['c', 3], + ]); + const [, utils] = result2.current; + + act(() => { + utils.remove('a'); + }); + + expect([...result2.current[0]]).toEqual([ + ['foo', 'bar'], + ['b', 2], + ['c', 3], + ]); }); - it('reset should be work', () => { + test('reset should be work', () => { const { result } = setup([['msg', 'hello']]); const { set, reset } = result.current[1]; act(() => { diff --git a/packages/hooks/src/useMap/demo/demo1.tsx b/packages/hooks/src/useMap/demo/demo1.tsx index 828e714e65..58cd02f812 100644 --- a/packages/hooks/src/useMap/demo/demo1.tsx +++ b/packages/hooks/src/useMap/demo/demo1.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useMap } from 'ahooks'; export default () => { diff --git a/packages/hooks/src/useMap/index.en-US.md b/packages/hooks/src/useMap/index.en-US.md index 6bac03088e..2ee1a6b7e7 100644 --- a/packages/hooks/src/useMap/index.en-US.md +++ b/packages/hooks/src/useMap/index.en-US.md @@ -25,22 +25,22 @@ const [ reset, get } -] = useMap(initialValue?: Iterable<[any, any]>); +] = useMap(initialValue); ``` ### Result -| Property | Description | Type | -| -------- | ---------------- | ---------------------------------------- | -| map | Map object | `Map` | -| set | Add item | `(key: any, value: any) => void` | -| get | Get item | `(key: any) => MapItem` | -| setAll | Set a new Map | `(newMap: Iterable<[any, any]>) => void` | -| remove | Remove key | `(key: any) => void` | -| reset | Reset to default | `() => void` | +| Property | Description | Type | +| -------- | ---------------- | ------------------------------------ | +| map | Map object | `Map` | +| set | Add item | `(key: K, value: V) => void` | +| get | Get item | `(key: K) => V \| undefined` | +| setAll | Set a new Map | `(newMap: Iterable<[K, V]>) => void` | +| remove | Remove key | `(key: K) => void` | +| reset | Reset to default | `() => void` | ### Params -| Property | Description | Type | Default | -| ------------ | --------------------------- | ---------------------- | ------- | -| initialValue | Optional, set default value | `Iterable<[any, any]>` | - | +| Property | Description | Type | Default | +| ------------ | --------------------------- | ------------------ | ------- | +| initialValue | Optional, set default value | `Iterable<[K, V]>` | - | diff --git a/packages/hooks/src/useMap/index.ts b/packages/hooks/src/useMap/index.ts index 464ff3e4e9..4f0407fb57 100644 --- a/packages/hooks/src/useMap/index.ts +++ b/packages/hooks/src/useMap/index.ts @@ -2,11 +2,8 @@ import { useState } from 'react'; import useMemoizedFn from '../useMemoizedFn'; function useMap(initialValue?: Iterable) { - const getInitValue = () => { - return initialValue === undefined ? new Map() : new Map(initialValue); - }; - - const [map, setMap] = useState