@tamagui/react-native-use-pressable 1.116.1 → 1.116.2
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.
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var PressResponder_exports = {};
|
|
16
|
+
__export(PressResponder_exports, {
|
|
17
|
+
default: () => PressResponder
|
|
18
|
+
});
|
|
19
|
+
module.exports = __toCommonJS(PressResponder_exports);
|
|
20
|
+
const DELAY = "DELAY", ERROR = "ERROR", LONG_PRESS_DETECTED = "LONG_PRESS_DETECTED", NOT_RESPONDER = "NOT_RESPONDER", RESPONDER_ACTIVE_LONG_PRESS_START = "RESPONDER_ACTIVE_LONG_PRESS_START", RESPONDER_ACTIVE_PRESS_START = "RESPONDER_ACTIVE_PRESS_START", RESPONDER_INACTIVE_PRESS_START = "RESPONDER_INACTIVE_PRESS_START", RESPONDER_GRANT = "RESPONDER_GRANT", RESPONDER_RELEASE = "RESPONDER_RELEASE", RESPONDER_TERMINATED = "RESPONDER_TERMINATED", Transitions = Object.freeze({
|
|
21
|
+
NOT_RESPONDER: {
|
|
22
|
+
DELAY: ERROR,
|
|
23
|
+
RESPONDER_GRANT: RESPONDER_INACTIVE_PRESS_START,
|
|
24
|
+
RESPONDER_RELEASE: ERROR,
|
|
25
|
+
RESPONDER_TERMINATED: ERROR,
|
|
26
|
+
LONG_PRESS_DETECTED: ERROR
|
|
27
|
+
},
|
|
28
|
+
RESPONDER_INACTIVE_PRESS_START: {
|
|
29
|
+
DELAY: RESPONDER_ACTIVE_PRESS_START,
|
|
30
|
+
RESPONDER_GRANT: ERROR,
|
|
31
|
+
RESPONDER_RELEASE: NOT_RESPONDER,
|
|
32
|
+
RESPONDER_TERMINATED: NOT_RESPONDER,
|
|
33
|
+
LONG_PRESS_DETECTED: ERROR
|
|
34
|
+
},
|
|
35
|
+
RESPONDER_ACTIVE_PRESS_START: {
|
|
36
|
+
DELAY: ERROR,
|
|
37
|
+
RESPONDER_GRANT: ERROR,
|
|
38
|
+
RESPONDER_RELEASE: NOT_RESPONDER,
|
|
39
|
+
RESPONDER_TERMINATED: NOT_RESPONDER,
|
|
40
|
+
LONG_PRESS_DETECTED: RESPONDER_ACTIVE_LONG_PRESS_START
|
|
41
|
+
},
|
|
42
|
+
RESPONDER_ACTIVE_LONG_PRESS_START: {
|
|
43
|
+
DELAY: ERROR,
|
|
44
|
+
RESPONDER_GRANT: ERROR,
|
|
45
|
+
RESPONDER_RELEASE: NOT_RESPONDER,
|
|
46
|
+
RESPONDER_TERMINATED: NOT_RESPONDER,
|
|
47
|
+
LONG_PRESS_DETECTED: RESPONDER_ACTIVE_LONG_PRESS_START
|
|
48
|
+
},
|
|
49
|
+
ERROR: {
|
|
50
|
+
DELAY: NOT_RESPONDER,
|
|
51
|
+
RESPONDER_GRANT: RESPONDER_INACTIVE_PRESS_START,
|
|
52
|
+
RESPONDER_RELEASE: NOT_RESPONDER,
|
|
53
|
+
RESPONDER_TERMINATED: NOT_RESPONDER,
|
|
54
|
+
LONG_PRESS_DETECTED: NOT_RESPONDER
|
|
55
|
+
}
|
|
56
|
+
}), isActiveSignal = (signal) => signal === RESPONDER_ACTIVE_PRESS_START || signal === RESPONDER_ACTIVE_LONG_PRESS_START, isButtonRole = (element) => element.getAttribute("role") === "button", isPressStartSignal = (signal) => signal === RESPONDER_INACTIVE_PRESS_START || signal === RESPONDER_ACTIVE_PRESS_START || signal === RESPONDER_ACTIVE_LONG_PRESS_START, isTerminalSignal = (signal) => signal === RESPONDER_TERMINATED || signal === RESPONDER_RELEASE, isValidKeyPress = (event) => {
|
|
57
|
+
const key = event.key, role = event.target.getAttribute("role");
|
|
58
|
+
return key === "Enter" || (key === " " || key === "Spacebar") && role === "button";
|
|
59
|
+
}, DEFAULT_LONG_PRESS_DELAY_MS = 450, DEFAULT_PRESS_DELAY_MS = 50;
|
|
60
|
+
class PressResponder {
|
|
61
|
+
_touchActivatePosition = null;
|
|
62
|
+
_pressDelayTimeout = 0;
|
|
63
|
+
_selectionTerminated = !1;
|
|
64
|
+
_isPointerTouch = !1;
|
|
65
|
+
_longPressDelayTimeout = 0;
|
|
66
|
+
_longPressDispatched = !1;
|
|
67
|
+
_pressOutDelayTimeout = 0;
|
|
68
|
+
_touchState = NOT_RESPONDER;
|
|
69
|
+
_config = null;
|
|
70
|
+
_eventHandlers = null;
|
|
71
|
+
constructor(config) {
|
|
72
|
+
this.configure(config);
|
|
73
|
+
}
|
|
74
|
+
configure(config) {
|
|
75
|
+
this._config = config;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Resets any pending timers. This should be called on unmount.
|
|
79
|
+
*/
|
|
80
|
+
reset() {
|
|
81
|
+
this._cancelLongPressDelayTimeout(), this._cancelPressDelayTimeout(), this._cancelPressOutDelayTimeout();
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Returns a set of props to spread into the interactive element.
|
|
85
|
+
*/
|
|
86
|
+
getEventHandlers() {
|
|
87
|
+
return this._eventHandlers == null && (this._eventHandlers = this._createEventHandlers()), this._eventHandlers;
|
|
88
|
+
}
|
|
89
|
+
_createEventHandlers() {
|
|
90
|
+
const start = (event, shouldDelay) => {
|
|
91
|
+
event.persist(), this._cancelPressOutDelayTimeout(), this._longPressDispatched = !1, this._selectionTerminated = !1, this._touchState = NOT_RESPONDER, this._isPointerTouch = event.nativeEvent.type === "touchstart", this._receiveSignal(RESPONDER_GRANT, event);
|
|
92
|
+
const delayPressStart = normalizeDelay(
|
|
93
|
+
this._config.delayPressStart,
|
|
94
|
+
0,
|
|
95
|
+
DEFAULT_PRESS_DELAY_MS
|
|
96
|
+
);
|
|
97
|
+
shouldDelay !== !1 && delayPressStart > 0 ? this._pressDelayTimeout = setTimeout(() => {
|
|
98
|
+
this._receiveSignal(DELAY, event);
|
|
99
|
+
}, delayPressStart) : this._receiveSignal(DELAY, event);
|
|
100
|
+
const delayLongPress = normalizeDelay(
|
|
101
|
+
this._config.delayLongPress,
|
|
102
|
+
10,
|
|
103
|
+
DEFAULT_LONG_PRESS_DELAY_MS
|
|
104
|
+
);
|
|
105
|
+
this._longPressDelayTimeout = setTimeout(() => {
|
|
106
|
+
this._handleLongPress(event);
|
|
107
|
+
}, delayLongPress + delayPressStart);
|
|
108
|
+
}, end = (event) => {
|
|
109
|
+
this._receiveSignal(RESPONDER_RELEASE, event);
|
|
110
|
+
}, keyupHandler = (event) => {
|
|
111
|
+
const onPress = this._config.onPress, target = event.target;
|
|
112
|
+
if (this._touchState !== NOT_RESPONDER && isValidKeyPress(event)) {
|
|
113
|
+
end(event), document.removeEventListener("keyup", keyupHandler);
|
|
114
|
+
const role = target.getAttribute("role"), elementType = target.tagName.toLowerCase(), isNativeInteractiveElement = role === "link" || elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea";
|
|
115
|
+
onPress != null && !isNativeInteractiveElement && onPress(event);
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
return {
|
|
119
|
+
onStartShouldSetResponder: (event) => {
|
|
120
|
+
const disabled = this._config.disabled;
|
|
121
|
+
return disabled && isButtonRole(event.currentTarget) && event.stopPropagation(), disabled == null ? !0 : !disabled;
|
|
122
|
+
},
|
|
123
|
+
onKeyDown: (event) => {
|
|
124
|
+
const disabled = this._config.disabled, key = event.key, target = event.target;
|
|
125
|
+
if (!disabled && isValidKeyPress(event)) {
|
|
126
|
+
this._touchState === NOT_RESPONDER && (start(event, !1), document.addEventListener("keyup", keyupHandler));
|
|
127
|
+
const role = target.getAttribute("role");
|
|
128
|
+
(key === " " || key === "Spacebar") && (role === "button" || role === "menuitem") && event.preventDefault(), event.stopPropagation();
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
onResponderGrant: (event) => start(event),
|
|
132
|
+
onResponderMove: (event) => {
|
|
133
|
+
this._config.onPressMove != null && this._config.onPressMove(event);
|
|
134
|
+
const touch = getTouchFromResponderEvent(event);
|
|
135
|
+
if (this._touchActivatePosition != null) {
|
|
136
|
+
const deltaX = this._touchActivatePosition.pageX - touch.pageX, deltaY = this._touchActivatePosition.pageY - touch.pageY;
|
|
137
|
+
Math.hypot(deltaX, deltaY) > 10 && this._cancelLongPressDelayTimeout();
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
onResponderRelease: (event) => end(event),
|
|
141
|
+
onResponderTerminate: (event) => {
|
|
142
|
+
event.nativeEvent.type === "selectionchange" && (this._selectionTerminated = !0), this._receiveSignal(RESPONDER_TERMINATED, event);
|
|
143
|
+
},
|
|
144
|
+
onResponderTerminationRequest: (event) => {
|
|
145
|
+
const _this$_config = this._config, cancelable = _this$_config.cancelable, disabled = _this$_config.disabled, onLongPress = _this$_config.onLongPress;
|
|
146
|
+
return !disabled && onLongPress != null && this._isPointerTouch && event.nativeEvent.type === "contextmenu" ? !1 : cancelable ?? !0;
|
|
147
|
+
},
|
|
148
|
+
// NOTE: this diverges from react-native in 3 significant ways:
|
|
149
|
+
// * The `onPress` callback is not connected to the responder system (the native
|
|
150
|
+
// `click` event must be used but is dispatched in many scenarios where no pointers
|
|
151
|
+
// are on the screen.) Therefore, it's possible for `onPress` to be called without
|
|
152
|
+
// `onPress{Start,End}` being called first.
|
|
153
|
+
// * The `onPress` callback is only be called on the first ancestor of the native
|
|
154
|
+
// `click` target that is using the PressResponder.
|
|
155
|
+
// * The event's `nativeEvent` is a `MouseEvent` not a `TouchEvent`.
|
|
156
|
+
onClick: (event) => {
|
|
157
|
+
const _this$_config2 = this._config, disabled = _this$_config2.disabled, onPress = _this$_config2.onPress;
|
|
158
|
+
disabled ? isButtonRole(event.currentTarget) && event.stopPropagation() : (event.stopPropagation(), this._longPressDispatched || this._selectionTerminated ? event.preventDefault() : onPress != null && event.altKey === !1 && onPress(event));
|
|
159
|
+
},
|
|
160
|
+
// If `onLongPress` is provided and a touch pointer is being used, prevent the
|
|
161
|
+
// default context menu from opening.
|
|
162
|
+
onContextMenu: (event) => {
|
|
163
|
+
const _this$_config3 = this._config, disabled = _this$_config3.disabled, onLongPress = _this$_config3.onLongPress;
|
|
164
|
+
disabled ? isButtonRole(event.currentTarget) && event.stopPropagation() : onLongPress != null && this._isPointerTouch && !event.defaultPrevented && (event.preventDefault(), event.stopPropagation());
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* Receives a state machine signal, performs side effects of the transition
|
|
170
|
+
* and stores the new state. Validates the transition as well.
|
|
171
|
+
*/
|
|
172
|
+
_receiveSignal(signal, event) {
|
|
173
|
+
const prevState = this._touchState;
|
|
174
|
+
let nextState = null;
|
|
175
|
+
Transitions[prevState] != null && (nextState = Transitions[prevState][signal]), !(this._touchState === NOT_RESPONDER && signal === RESPONDER_RELEASE) && (nextState == null || nextState === ERROR ? console.error(
|
|
176
|
+
`PressResponder: Invalid signal ${signal} for state ${prevState} on responder`
|
|
177
|
+
) : prevState !== nextState && (this._performTransitionSideEffects(prevState, nextState, signal, event), this._touchState = nextState));
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* Performs a transition between touchable states and identify any activations
|
|
181
|
+
* or deactivations (and callback invocations).
|
|
182
|
+
*/
|
|
183
|
+
_performTransitionSideEffects(prevState, nextState, signal, event) {
|
|
184
|
+
if (isTerminalSignal(signal) && (setTimeout(() => {
|
|
185
|
+
this._isPointerTouch = !1;
|
|
186
|
+
}, 0), this._touchActivatePosition = null, this._cancelLongPressDelayTimeout()), isPressStartSignal(prevState) && signal === LONG_PRESS_DETECTED) {
|
|
187
|
+
const onLongPress = this._config.onLongPress;
|
|
188
|
+
onLongPress != null && event.nativeEvent.key == null && (onLongPress(event), this._longPressDispatched = !0);
|
|
189
|
+
}
|
|
190
|
+
const isPrevActive = isActiveSignal(prevState), isNextActive = isActiveSignal(nextState);
|
|
191
|
+
if (!isPrevActive && isNextActive ? this._activate(event) : isPrevActive && !isNextActive && this._deactivate(event), isPressStartSignal(prevState) && signal === RESPONDER_RELEASE) {
|
|
192
|
+
const _this$_config4 = this._config, _onLongPress = _this$_config4.onLongPress;
|
|
193
|
+
_this$_config4.onPress != null && (_onLongPress != null && prevState === RESPONDER_ACTIVE_LONG_PRESS_START || isNextActive || isPrevActive || (this._activate(event), this._deactivate(event)));
|
|
194
|
+
}
|
|
195
|
+
this._cancelPressDelayTimeout();
|
|
196
|
+
}
|
|
197
|
+
_activate(event) {
|
|
198
|
+
const _this$_config5 = this._config, onPressChange = _this$_config5.onPressChange, onPressStart = _this$_config5.onPressStart, touch = getTouchFromResponderEvent(event);
|
|
199
|
+
this._touchActivatePosition = {
|
|
200
|
+
pageX: touch.pageX,
|
|
201
|
+
pageY: touch.pageY
|
|
202
|
+
}, onPressStart?.(event), onPressChange?.(!0);
|
|
203
|
+
}
|
|
204
|
+
_deactivate(event) {
|
|
205
|
+
const _this$_config6 = this._config, onPressChange = _this$_config6.onPressChange, onPressEnd = _this$_config6.onPressEnd;
|
|
206
|
+
function end() {
|
|
207
|
+
onPressEnd?.(event), onPressChange?.(!1);
|
|
208
|
+
}
|
|
209
|
+
const delayPressEnd = normalizeDelay(this._config.delayPressEnd);
|
|
210
|
+
delayPressEnd > 0 ? this._pressOutDelayTimeout = setTimeout(() => {
|
|
211
|
+
end();
|
|
212
|
+
}, delayPressEnd) : end();
|
|
213
|
+
}
|
|
214
|
+
_handleLongPress(event) {
|
|
215
|
+
(this._touchState === RESPONDER_ACTIVE_PRESS_START || this._touchState === RESPONDER_ACTIVE_LONG_PRESS_START) && this._receiveSignal(LONG_PRESS_DETECTED, event);
|
|
216
|
+
}
|
|
217
|
+
_cancelLongPressDelayTimeout() {
|
|
218
|
+
this._longPressDelayTimeout != null && (clearTimeout(this._longPressDelayTimeout), this._longPressDelayTimeout = null);
|
|
219
|
+
}
|
|
220
|
+
_cancelPressDelayTimeout() {
|
|
221
|
+
this._pressDelayTimeout != null && (clearTimeout(this._pressDelayTimeout), this._pressDelayTimeout = null);
|
|
222
|
+
}
|
|
223
|
+
_cancelPressOutDelayTimeout() {
|
|
224
|
+
this._pressOutDelayTimeout != null && (clearTimeout(this._pressOutDelayTimeout), this._pressOutDelayTimeout = null);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
function normalizeDelay(delay, min, fallback) {
|
|
228
|
+
return min === void 0 && (min = 0), fallback === void 0 && (fallback = 0), Math.max(min, delay ?? fallback);
|
|
229
|
+
}
|
|
230
|
+
function getTouchFromResponderEvent(event) {
|
|
231
|
+
const _event$nativeEvent = event.nativeEvent, changedTouches = _event$nativeEvent.changedTouches, touches = _event$nativeEvent.touches;
|
|
232
|
+
return touches != null && touches.length > 0 ? touches[0] : changedTouches != null && changedTouches.length > 0 ? changedTouches[0] : event.nativeEvent;
|
|
233
|
+
}
|
|
234
|
+
//# sourceMappingURL=PressResponder.js.map
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
9
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
return to;
|
|
14
|
+
};
|
|
15
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
16
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
17
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
18
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
19
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
20
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
21
|
+
mod
|
|
22
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
23
|
+
var src_exports = {};
|
|
24
|
+
__export(src_exports, {
|
|
25
|
+
usePressEvents: () => usePressEvents
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(src_exports);
|
|
28
|
+
var import_react = __toESM(require("react")), import_PressResponder = __toESM(require("./PressResponder"));
|
|
29
|
+
function usePressEvents(_, config) {
|
|
30
|
+
const pressResponderRef = import_react.default.useRef(null);
|
|
31
|
+
pressResponderRef.current == null && (pressResponderRef.current = new import_PressResponder.default(config));
|
|
32
|
+
const pressResponder = pressResponderRef.current;
|
|
33
|
+
return import_react.default.useEffect(() => {
|
|
34
|
+
pressResponder.configure(config);
|
|
35
|
+
}, [config, pressResponder]), import_react.default.useEffect(() => () => {
|
|
36
|
+
pressResponder.reset();
|
|
37
|
+
}, [pressResponder]), import_react.default.useDebugValue(config), pressResponder.getEventHandlers();
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/react-native-use-pressable",
|
|
3
|
-
"version": "1.116.
|
|
3
|
+
"version": "1.116.2",
|
|
4
4
|
"types": "./types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@tamagui/build": "1.116.
|
|
32
|
+
"@tamagui/build": "1.116.2",
|
|
33
33
|
"react": "^18.2.0 || ^19.0.0"
|
|
34
34
|
},
|
|
35
35
|
"publishConfig": {
|
|
File without changes
|
|
File without changes
|