@a-type/ui 0.6.22 → 0.6.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/hooks/useLongPress.d.ts +10 -2
- package/dist/cjs/hooks/useLongPress.js +19 -2
- package/dist/cjs/hooks/useLongPress.js.map +1 -1
- package/dist/esm/hooks/useLongPress.d.ts +10 -2
- package/dist/esm/hooks/useLongPress.js +20 -3
- package/dist/esm/hooks/useLongPress.js.map +1 -1
- package/package.json +1 -1
- package/src/hooks/useLongPress.ts +26 -5
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
/// <reference types="react" resolution-mode="require"/>
|
|
2
2
|
/// <reference types="node" resolution-mode="require"/>
|
|
3
|
-
|
|
3
|
+
import { preventDefault } from '@a-type/utils';
|
|
4
|
+
export declare function useLongPress({ onActivate, onDurationReached, duration, delay, }: {
|
|
4
5
|
onActivate: () => void;
|
|
6
|
+
onDurationReached: () => void;
|
|
5
7
|
duration?: number;
|
|
6
8
|
delay?: number;
|
|
7
9
|
}): {
|
|
8
10
|
ref: import("react").MutableRefObject<any>;
|
|
9
11
|
timeoutRef: import("react").MutableRefObject<NodeJS.Timeout | null>;
|
|
10
|
-
state: "holding" | "idle" | "failed" | "pending";
|
|
12
|
+
state: "holding" | "candidate" | "idle" | "failed" | "pending";
|
|
13
|
+
props: {
|
|
14
|
+
onContextMenu: typeof preventDefault;
|
|
15
|
+
style: {
|
|
16
|
+
touchAction: string;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
11
19
|
};
|
|
@@ -5,6 +5,8 @@ exports.useLongPress = void 0;
|
|
|
5
5
|
const react_1 = require("@use-gesture/react");
|
|
6
6
|
const react_2 = require("react");
|
|
7
7
|
const useAnimationFrame_js_1 = require("./useAnimationFrame.js");
|
|
8
|
+
const useStableCallback_js_1 = require("./useStableCallback.js");
|
|
9
|
+
const utils_1 = require("@a-type/utils");
|
|
8
10
|
/**
|
|
9
11
|
* The press gesture must remain within THRESHOLD_DISTANCE until delay time has passed
|
|
10
12
|
* to be considered a press.
|
|
@@ -13,7 +15,7 @@ const useAnimationFrame_js_1 = require("./useAnimationFrame.js");
|
|
|
13
15
|
*/
|
|
14
16
|
const THRESHOLD_DISTANCE = 10;
|
|
15
17
|
const CANCEL_DISTANCE = 30;
|
|
16
|
-
function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
18
|
+
function useLongPress({ onActivate, onDurationReached, duration = 2000, delay = 200, }) {
|
|
17
19
|
const [gestureState, setGestureState] = (0, react_2.useState)('released');
|
|
18
20
|
const [state, setState] = (0, react_2.useState)('idle');
|
|
19
21
|
const timeoutRef = (0, react_2.useRef)(null);
|
|
@@ -95,8 +97,13 @@ function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
|
95
97
|
// cancel if moved too far
|
|
96
98
|
setState('idle');
|
|
97
99
|
}
|
|
100
|
+
else if (gestureDuration >= duration + delay) {
|
|
101
|
+
// not yet confirmed, but meets criteria
|
|
102
|
+
setState('candidate');
|
|
103
|
+
}
|
|
98
104
|
}
|
|
99
105
|
});
|
|
106
|
+
const onDurationReachedStable = (0, useStableCallback_js_1.useStableCallback)(onDurationReached);
|
|
100
107
|
(0, react_2.useEffect)(() => {
|
|
101
108
|
if (state === 'failed') {
|
|
102
109
|
const timeout = setTimeout(() => {
|
|
@@ -106,11 +113,21 @@ function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
|
106
113
|
clearTimeout(timeout);
|
|
107
114
|
};
|
|
108
115
|
}
|
|
109
|
-
|
|
116
|
+
else if (state === 'candidate') {
|
|
117
|
+
onDurationReachedStable();
|
|
118
|
+
}
|
|
119
|
+
}, [state, onDurationReachedStable]);
|
|
120
|
+
const props = (0, react_2.useMemo)(() => ({
|
|
121
|
+
onContextMenu: utils_1.preventDefault,
|
|
122
|
+
style: {
|
|
123
|
+
touchAction: 'none',
|
|
124
|
+
},
|
|
125
|
+
}), []);
|
|
110
126
|
return {
|
|
111
127
|
ref,
|
|
112
128
|
timeoutRef,
|
|
113
129
|
state,
|
|
130
|
+
props,
|
|
114
131
|
};
|
|
115
132
|
}
|
|
116
133
|
exports.useLongPress = useLongPress;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../../src/hooks/useLongPress.ts"],"names":[],"mappings":";;;AAAA,8CAA6C;AAC7C,
|
|
1
|
+
{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../../src/hooks/useLongPress.ts"],"names":[],"mappings":";;;AAAA,8CAA6C;AAC7C,iCAA6D;AAC7D,iEAA2D;AAC3D,iEAA2D;AAC3D,yCAA+C;AAE/C;;;;;GAKG;AAEH,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,MAAM,eAAe,GAAG,EAAE,CAAC;AAE3B,SAAgB,YAAY,CAAC,EAC5B,UAAU,EACV,iBAAiB,EACjB,QAAQ,GAAG,IAAI,EACf,KAAK,GAAG,GAAG,GAMX;IACA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAC/C,UAAU,CACV,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAEhC,MAAM,CAAC,CAAC;IACV,MAAM,UAAU,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAM,IAAI,CAAC,CAAC;IAE9B,MAAM,eAAe,GAAG,IAAA,cAAM,EAA0C;QACvE,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,CAAC;KACZ,CAAC,CAAC;IACH,IAAA,eAAO,EACN,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;;QAClD,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAC9B,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CACnD,CAAC;QACF,eAAe,CAAC,OAAO,CAAC,QAAQ,GAAG,aAAa,CAAC;QAEjD,IAAI,WAAW,GAAG,KAAK,IAAI,aAAa,GAAG,kBAAkB,EAAE;YAC9D,MAAM,EAAE,CAAC;YACT,eAAe,CAAC,UAAU,CAAC,CAAC;YAC5B,OAAO;SACP;QAED,IAAI,aAAa,GAAG,eAAe,EAAE;YACpC,MAAM,EAAE,CAAC;YACT,eAAe,CAAC,UAAU,CAAC,CAAC;YAC5B,OAAO;SACP;QAED,IAAI,KAAK,EAAE;YACV,eAAe,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAC/C,IAAI;gBACH,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0DAAG,GAAG,CAAC,CAAC;aAC1B;YAAC,OAAO,GAAG,EAAE;gBACb,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;aACjB;SACD;QAED,IAAI,IAAI,EAAE;YACT,eAAe,CAAC,SAAS,CAAC,CAAC;SAC3B;aAAM;YACN,eAAe,CAAC,UAAU,CAAC,CAAC;SAC5B;IACF,CAAC,EACD;QACC,0BAA0B;QAC1B,wBAAwB;QACxB,MAAM,EAAE,GAAG;KACX,CACD,CAAC;IAEF,IAAA,wCAAiB,EAAC,GAAG,EAAE;QACtB,MAAM,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,SAAS;YACxD,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,eAAe,CAAC,OAAO,CAAC,SAAS;YAChD,CAAC,CAAC,CAAC,CAAC;QACL,MAAM,QAAQ,GAAG,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC;QAElD,6BAA6B;QAC7B,IACC,YAAY,KAAK,UAAU;YAC3B,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,EACvC;YACD,OAAO;SACP;QAED,IAAI,YAAY,KAAK,UAAU,EAAE;YAChC,IAAI,KAAK,KAAK,SAAS,EAAE;gBACxB,8CAA8C;gBAC9C,IAAI,eAAe,IAAI,QAAQ,GAAG,KAAK,IAAI,QAAQ,GAAG,eAAe,EAAE;oBACtE,UAAU,EAAE,CAAC;oBACb,QAAQ,CAAC,MAAM,CAAC,CAAC;iBACjB;qBAAM;oBACN,0CAA0C;oBAC1C,QAAQ,CAAC,MAAM,CAAC,CAAC;iBACjB;aACD;iBAAM,IAAI,KAAK,KAAK,SAAS,IAAI,QAAQ,GAAG,kBAAkB,EAAE;gBAChE,QAAQ,CAAC,QAAQ,CAAC,CAAC;aACnB;SACD;aAAM,IAAI,YAAY,KAAK,SAAS,EAAE;YACtC,oBAAoB;YACpB,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,EAAE;gBAC3C,QAAQ,CAAC,SAAS,CAAC,CAAC;aACpB;iBAAM,IAAI,KAAK,KAAK,SAAS,IAAI,eAAe,IAAI,KAAK,EAAE;gBAC3D,uCAAuC;gBACvC,QAAQ,CAAC,SAAS,CAAC,CAAC;aACpB;iBAAM,IAAI,QAAQ,GAAG,eAAe,EAAE;gBACtC,0BAA0B;gBAC1B,QAAQ,CAAC,MAAM,CAAC,CAAC;aACjB;iBAAM,IAAI,eAAe,IAAI,QAAQ,GAAG,KAAK,EAAE;gBAC/C,wCAAwC;gBACxC,QAAQ,CAAC,WAAW,CAAC,CAAC;aACtB;SACD;IACF,CAAC,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAAG,IAAA,wCAAiB,EAAC,iBAAiB,CAAC,CAAC;IACrE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,KAAK,KAAK,QAAQ,EAAE;YACvB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC/B,QAAQ,CAAC,MAAM,CAAC,CAAC;YAClB,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,OAAO,GAAG,EAAE;gBACX,YAAY,CAAC,OAAO,CAAC,CAAC;YACvB,CAAC,CAAC;SACF;aAAM,IAAI,KAAK,KAAK,WAAW,EAAE;YACjC,uBAAuB,EAAE,CAAC;SAC1B;IACF,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAErC,MAAM,KAAK,GAAG,IAAA,eAAO,EACpB,GAAG,EAAE,CAAC,CAAC;QACN,aAAa,EAAE,sBAAc;QAC7B,KAAK,EAAE;YACN,WAAW,EAAE,MAAM;SACnB;KACD,CAAC,EACF,EAAE,CACF,CAAC;IAEF,OAAO;QACN,GAAG;QACH,UAAU;QACV,KAAK;QACL,KAAK;KACL,CAAC;AACH,CAAC;AA3ID,oCA2IC"}
|
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
/// <reference types="react" resolution-mode="require"/>
|
|
2
2
|
/// <reference types="node" resolution-mode="require"/>
|
|
3
|
-
|
|
3
|
+
import { preventDefault } from '@a-type/utils';
|
|
4
|
+
export declare function useLongPress({ onActivate, onDurationReached, duration, delay, }: {
|
|
4
5
|
onActivate: () => void;
|
|
6
|
+
onDurationReached: () => void;
|
|
5
7
|
duration?: number;
|
|
6
8
|
delay?: number;
|
|
7
9
|
}): {
|
|
8
10
|
ref: import("react").MutableRefObject<any>;
|
|
9
11
|
timeoutRef: import("react").MutableRefObject<NodeJS.Timeout | null>;
|
|
10
|
-
state: "holding" | "idle" | "failed" | "pending";
|
|
12
|
+
state: "holding" | "candidate" | "idle" | "failed" | "pending";
|
|
13
|
+
props: {
|
|
14
|
+
onContextMenu: typeof preventDefault;
|
|
15
|
+
style: {
|
|
16
|
+
touchAction: string;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
11
19
|
};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { useDrag } from '@use-gesture/react';
|
|
3
|
-
import { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
4
4
|
import { useAnimationFrame } from './useAnimationFrame.js';
|
|
5
|
+
import { useStableCallback } from './useStableCallback.js';
|
|
6
|
+
import { preventDefault } from '@a-type/utils';
|
|
5
7
|
/**
|
|
6
8
|
* The press gesture must remain within THRESHOLD_DISTANCE until delay time has passed
|
|
7
9
|
* to be considered a press.
|
|
@@ -10,7 +12,7 @@ import { useAnimationFrame } from './useAnimationFrame.js';
|
|
|
10
12
|
*/
|
|
11
13
|
const THRESHOLD_DISTANCE = 10;
|
|
12
14
|
const CANCEL_DISTANCE = 30;
|
|
13
|
-
export function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
15
|
+
export function useLongPress({ onActivate, onDurationReached, duration = 2000, delay = 200, }) {
|
|
14
16
|
const [gestureState, setGestureState] = useState('released');
|
|
15
17
|
const [state, setState] = useState('idle');
|
|
16
18
|
const timeoutRef = useRef(null);
|
|
@@ -92,8 +94,13 @@ export function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
|
92
94
|
// cancel if moved too far
|
|
93
95
|
setState('idle');
|
|
94
96
|
}
|
|
97
|
+
else if (gestureDuration >= duration + delay) {
|
|
98
|
+
// not yet confirmed, but meets criteria
|
|
99
|
+
setState('candidate');
|
|
100
|
+
}
|
|
95
101
|
}
|
|
96
102
|
});
|
|
103
|
+
const onDurationReachedStable = useStableCallback(onDurationReached);
|
|
97
104
|
useEffect(() => {
|
|
98
105
|
if (state === 'failed') {
|
|
99
106
|
const timeout = setTimeout(() => {
|
|
@@ -103,11 +110,21 @@ export function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
|
103
110
|
clearTimeout(timeout);
|
|
104
111
|
};
|
|
105
112
|
}
|
|
106
|
-
|
|
113
|
+
else if (state === 'candidate') {
|
|
114
|
+
onDurationReachedStable();
|
|
115
|
+
}
|
|
116
|
+
}, [state, onDurationReachedStable]);
|
|
117
|
+
const props = useMemo(() => ({
|
|
118
|
+
onContextMenu: preventDefault,
|
|
119
|
+
style: {
|
|
120
|
+
touchAction: 'none',
|
|
121
|
+
},
|
|
122
|
+
}), []);
|
|
107
123
|
return {
|
|
108
124
|
ref,
|
|
109
125
|
timeoutRef,
|
|
110
126
|
state,
|
|
127
|
+
props,
|
|
111
128
|
};
|
|
112
129
|
}
|
|
113
130
|
//# sourceMappingURL=useLongPress.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../../src/hooks/useLongPress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../../src/hooks/useLongPress.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { useDrag } from '@use-gesture/react';
|
|
2
|
-
import { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { useAnimationFrame } from './useAnimationFrame.js';
|
|
4
|
+
import { useStableCallback } from './useStableCallback.js';
|
|
5
|
+
import { preventDefault } from '@a-type/utils';
|
|
4
6
|
|
|
5
7
|
/**
|
|
6
8
|
* The press gesture must remain within THRESHOLD_DISTANCE until delay time has passed
|
|
@@ -14,19 +16,21 @@ const CANCEL_DISTANCE = 30;
|
|
|
14
16
|
|
|
15
17
|
export function useLongPress({
|
|
16
18
|
onActivate,
|
|
19
|
+
onDurationReached,
|
|
17
20
|
duration = 2000,
|
|
18
21
|
delay = 200,
|
|
19
22
|
}: {
|
|
20
23
|
onActivate: () => void;
|
|
24
|
+
onDurationReached: () => void;
|
|
21
25
|
duration?: number;
|
|
22
26
|
delay?: number;
|
|
23
27
|
}) {
|
|
24
28
|
const [gestureState, setGestureState] = useState<'released' | 'pressed'>(
|
|
25
29
|
'released',
|
|
26
30
|
);
|
|
27
|
-
const [state, setState] = useState<
|
|
28
|
-
'idle'
|
|
29
|
-
);
|
|
31
|
+
const [state, setState] = useState<
|
|
32
|
+
'holding' | 'candidate' | 'idle' | 'failed' | 'pending'
|
|
33
|
+
>('idle');
|
|
30
34
|
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
31
35
|
const ref = useRef<any>(null);
|
|
32
36
|
|
|
@@ -112,10 +116,14 @@ export function useLongPress({
|
|
|
112
116
|
} else if (distance > CANCEL_DISTANCE) {
|
|
113
117
|
// cancel if moved too far
|
|
114
118
|
setState('idle');
|
|
119
|
+
} else if (gestureDuration >= duration + delay) {
|
|
120
|
+
// not yet confirmed, but meets criteria
|
|
121
|
+
setState('candidate');
|
|
115
122
|
}
|
|
116
123
|
}
|
|
117
124
|
});
|
|
118
125
|
|
|
126
|
+
const onDurationReachedStable = useStableCallback(onDurationReached);
|
|
119
127
|
useEffect(() => {
|
|
120
128
|
if (state === 'failed') {
|
|
121
129
|
const timeout = setTimeout(() => {
|
|
@@ -124,12 +132,25 @@ export function useLongPress({
|
|
|
124
132
|
return () => {
|
|
125
133
|
clearTimeout(timeout);
|
|
126
134
|
};
|
|
135
|
+
} else if (state === 'candidate') {
|
|
136
|
+
onDurationReachedStable();
|
|
127
137
|
}
|
|
128
|
-
}, [state]);
|
|
138
|
+
}, [state, onDurationReachedStable]);
|
|
139
|
+
|
|
140
|
+
const props = useMemo(
|
|
141
|
+
() => ({
|
|
142
|
+
onContextMenu: preventDefault,
|
|
143
|
+
style: {
|
|
144
|
+
touchAction: 'none',
|
|
145
|
+
},
|
|
146
|
+
}),
|
|
147
|
+
[],
|
|
148
|
+
);
|
|
129
149
|
|
|
130
150
|
return {
|
|
131
151
|
ref,
|
|
132
152
|
timeoutRef,
|
|
133
153
|
state,
|
|
154
|
+
props,
|
|
134
155
|
};
|
|
135
156
|
}
|