@a-type/ui 0.6.22 → 0.6.23
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 +9 -1
- package/dist/cjs/hooks/useLongPress.js +15 -2
- package/dist/cjs/hooks/useLongPress.js.map +1 -1
- package/dist/esm/hooks/useLongPress.d.ts +9 -1
- package/dist/esm/hooks/useLongPress.js +16 -3
- package/dist/esm/hooks/useLongPress.js.map +1 -1
- package/package.json +1 -1
- package/src/hooks/useLongPress.ts +20 -2
|
@@ -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
12
|
state: "holding" | "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);
|
|
@@ -97,6 +99,7 @@ function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
|
97
99
|
}
|
|
98
100
|
}
|
|
99
101
|
});
|
|
102
|
+
const onDurationReachedStable = (0, useStableCallback_js_1.useStableCallback)(onDurationReached);
|
|
100
103
|
(0, react_2.useEffect)(() => {
|
|
101
104
|
if (state === 'failed') {
|
|
102
105
|
const timeout = setTimeout(() => {
|
|
@@ -106,11 +109,21 @@ function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
|
106
109
|
clearTimeout(timeout);
|
|
107
110
|
};
|
|
108
111
|
}
|
|
109
|
-
|
|
112
|
+
else if (state === 'holding') {
|
|
113
|
+
onDurationReachedStable();
|
|
114
|
+
}
|
|
115
|
+
}, [state, onDurationReachedStable]);
|
|
116
|
+
const props = (0, react_2.useMemo)(() => ({
|
|
117
|
+
onContextMenu: utils_1.preventDefault,
|
|
118
|
+
style: {
|
|
119
|
+
touchAction: 'none',
|
|
120
|
+
},
|
|
121
|
+
}), []);
|
|
110
122
|
return {
|
|
111
123
|
ref,
|
|
112
124
|
timeoutRef,
|
|
113
125
|
state,
|
|
126
|
+
props,
|
|
114
127
|
};
|
|
115
128
|
}
|
|
116
129
|
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":"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"}
|
|
@@ -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
12
|
state: "holding" | "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);
|
|
@@ -94,6 +96,7 @@ export function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
|
94
96
|
}
|
|
95
97
|
}
|
|
96
98
|
});
|
|
99
|
+
const onDurationReachedStable = useStableCallback(onDurationReached);
|
|
97
100
|
useEffect(() => {
|
|
98
101
|
if (state === 'failed') {
|
|
99
102
|
const timeout = setTimeout(() => {
|
|
@@ -103,11 +106,21 @@ export function useLongPress({ onActivate, duration = 2000, delay = 200, }) {
|
|
|
103
106
|
clearTimeout(timeout);
|
|
104
107
|
};
|
|
105
108
|
}
|
|
106
|
-
|
|
109
|
+
else if (state === 'holding') {
|
|
110
|
+
onDurationReachedStable();
|
|
111
|
+
}
|
|
112
|
+
}, [state, onDurationReachedStable]);
|
|
113
|
+
const props = useMemo(() => ({
|
|
114
|
+
onContextMenu: preventDefault,
|
|
115
|
+
style: {
|
|
116
|
+
touchAction: 'none',
|
|
117
|
+
},
|
|
118
|
+
}), []);
|
|
107
119
|
return {
|
|
108
120
|
ref,
|
|
109
121
|
timeoutRef,
|
|
110
122
|
state,
|
|
123
|
+
props,
|
|
111
124
|
};
|
|
112
125
|
}
|
|
113
126
|
//# 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,10 +16,12 @@ 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
|
}) {
|
|
@@ -116,6 +120,7 @@ export function useLongPress({
|
|
|
116
120
|
}
|
|
117
121
|
});
|
|
118
122
|
|
|
123
|
+
const onDurationReachedStable = useStableCallback(onDurationReached);
|
|
119
124
|
useEffect(() => {
|
|
120
125
|
if (state === 'failed') {
|
|
121
126
|
const timeout = setTimeout(() => {
|
|
@@ -124,12 +129,25 @@ export function useLongPress({
|
|
|
124
129
|
return () => {
|
|
125
130
|
clearTimeout(timeout);
|
|
126
131
|
};
|
|
132
|
+
} else if (state === 'holding') {
|
|
133
|
+
onDurationReachedStable();
|
|
127
134
|
}
|
|
128
|
-
}, [state]);
|
|
135
|
+
}, [state, onDurationReachedStable]);
|
|
136
|
+
|
|
137
|
+
const props = useMemo(
|
|
138
|
+
() => ({
|
|
139
|
+
onContextMenu: preventDefault,
|
|
140
|
+
style: {
|
|
141
|
+
touchAction: 'none',
|
|
142
|
+
},
|
|
143
|
+
}),
|
|
144
|
+
[],
|
|
145
|
+
);
|
|
129
146
|
|
|
130
147
|
return {
|
|
131
148
|
ref,
|
|
132
149
|
timeoutRef,
|
|
133
150
|
state,
|
|
151
|
+
props,
|
|
134
152
|
};
|
|
135
153
|
}
|