react-native-gesture-handler 2.23.0 → 2.24.0

package/lib/commonjs/handlers/createHandler.js

@@ -4,28 +4,47 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createHandler;
+
 var React = _interopRequireWildcard(require("react"));
+
 var _reactNative = require("react-native");
+
 var _customDirectEventTypes = require("./customDirectEventTypes");
+
 var _RNGestureHandlerModule = _interopRequireDefault(require("../RNGestureHandlerModule"));
+
 var _State = require("../State");
+
 var _handlersRegistry = require("./handlersRegistry");
+
 var _getNextHandlerTag = require("./getNextHandlerTag");
+
 var _utils = require("./utils");
+
 var _findNodeHandle = _interopRequireDefault(require("../findNodeHandle"));
+
 var _utils2 = require("../utils");
+
 var _ActionType = require("../ActionType");
+
 var _PressabilityDebugView = require("./PressabilityDebugView");
+
 var _GestureHandlerRootViewContext = _interopRequireDefault(require("../GestureHandlerRootViewContext"));
+
 var _ghQueueMicrotask = require("../ghQueueMicrotask");
+
 var _mountRegistry = require("../mountRegistry");
+
 var _UIManagerAny$getView, _UIManagerAny$getView2, _UIManagerAny$getCons;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 const UIManagerAny = _reactNative.UIManager;
 _customDirectEventTypes.customDirectEventTypes.topGestureHandlerEvent = {
   registrationName: 'onGestureHandlerEvent'
@@ -54,63 +73,68 @@ const customGHEventsConfig = {
   // Without this piece of code below, you'll get the following JS error:
   // Unsupported top level event type "topOnGestureHandlerEvent" dispatched
   ...((0, _utils2.isFabric)() && _reactNative.Platform.OS === 'android' && customGHEventsConfigFabricAndroid)
-};
-
-// Add gesture specific events to genericDirectEventTypes object exported from UIManager
+}; // Add gesture specific events to genericDirectEventTypes object exported from UIManager
 // native module.
 // Once new event types are registered with react it is possible to dispatch these
 // events to all kind of native views.
-UIManagerAny.genericDirectEventTypes = {
-  ...UIManagerAny.genericDirectEventTypes,
+
+UIManagerAny.genericDirectEventTypes = { ...UIManagerAny.genericDirectEventTypes,
   ...customGHEventsConfig
-};
-// In newer versions of RN the `genericDirectEventTypes` is located in the object
+}; // In newer versions of RN the `genericDirectEventTypes` is located in the object
 // returned by UIManager.getViewManagerConfig('getConstants') or in older RN UIManager.getConstants(), we need to add it there as well to make
 // it compatible with RN 61+
+
 const UIManagerConstants = (_UIManagerAny$getView = (_UIManagerAny$getView2 = UIManagerAny.getViewManagerConfig) === null || _UIManagerAny$getView2 === void 0 ? void 0 : _UIManagerAny$getView2.call(UIManagerAny, 'getConstants')) !== null && _UIManagerAny$getView !== void 0 ? _UIManagerAny$getView : (_UIManagerAny$getCons = UIManagerAny.getConstants) === null || _UIManagerAny$getCons === void 0 ? void 0 : _UIManagerAny$getCons.call(UIManagerAny);
+
 if (UIManagerConstants) {
-  UIManagerConstants.genericDirectEventTypes = {
-    ...UIManagerConstants.genericDirectEventTypes,
+  UIManagerConstants.genericDirectEventTypes = { ...UIManagerConstants.genericDirectEventTypes,
     ...customGHEventsConfig
   };
-}
+} // Wrap JS responder calls and notify gesture handler manager
+
 
-// Wrap JS responder calls and notify gesture handler manager
 const {
-  setJSResponder: oldSetJSResponder = () => {
-    // no-op
+  setJSResponder: oldSetJSResponder = () => {// no-op
   },
-  clearJSResponder: oldClearJSResponder = () => {
-    // no-op
+  clearJSResponder: oldClearJSResponder = () => {// no-op
   }
 } = UIManagerAny;
+
 UIManagerAny.setJSResponder = (tag, blockNativeResponder) => {
   _RNGestureHandlerModule.default.handleSetJSResponder(tag, blockNativeResponder);
+
   oldSetJSResponder(tag, blockNativeResponder);
 };
+
 UIManagerAny.clearJSResponder = () => {
   _RNGestureHandlerModule.default.handleClearJSResponder();
+
   oldClearJSResponder();
 };
+
 let allowTouches = true;
-const DEV_ON_ANDROID = __DEV__ && _reactNative.Platform.OS === 'android';
-// Toggled inspector blocks touch events in order to allow inspecting on Android
+const DEV_ON_ANDROID = __DEV__ && _reactNative.Platform.OS === 'android'; // Toggled inspector blocks touch events in order to allow inspecting on Android
 // This needs to be a global variable in order to set initial state for `allowTouches` property in Handler component
+
 if (DEV_ON_ANDROID) {
   _reactNative.DeviceEventEmitter.addListener('toggleElementInspector', () => {
     allowTouches = !allowTouches;
   });
 }
+
 function hasUnresolvedRefs(props) {
   // TODO(TS) - add type for extract arg
   const extract = refs => {
     if (!Array.isArray(refs)) {
       return refs && refs.current === null;
     }
+
     return refs.some(r => r && r.current === null);
   };
+
   return extract(props['simultaneousHandlers']) || extract(props['waitFor']);
 }
+
 const stateToPropMappings = {
   [_State.State.UNDETERMINED]: undefined,
   [_State.State.BEGAN]: 'onBegan',
@@ -119,12 +143,8 @@ const stateToPropMappings = {
   [_State.State.ACTIVE]: 'onActivated',
   [_State.State.END]: 'onEnded'
 };
+const UNRESOLVED_REFS_RETRY_LIMIT = 1; // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
 
-// TODO(TS) fix event types
-
-const UNRESOLVED_REFS_RETRY_LIMIT = 1;
-
-// TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
 function createHandler({
   name,
   allowedProps = [],
@@ -135,79 +155,105 @@ function createHandler({
   class Handler extends React.Component {
     constructor(props) {
       super(props);
+
       _defineProperty(this, "handlerTag", void 0);
+
       _defineProperty(this, "config", void 0);
+
       _defineProperty(this, "propsRef", void 0);
+
       _defineProperty(this, "isMountedRef", void 0);
+
       _defineProperty(this, "viewNode", void 0);
+
       _defineProperty(this, "viewTag", void 0);
+
       _defineProperty(this, "inspectorToggleListener", void 0);
+
       _defineProperty(this, "onGestureHandlerEvent", event => {
         if (event.nativeEvent.handlerTag === this.handlerTag) {
           if (typeof this.props.onGestureEvent === 'function') {
             var _this$props$onGesture, _this$props;
-            (_this$props$onGesture = (_this$props = this.props).onGestureEvent) === null || _this$props$onGesture === void 0 || _this$props$onGesture.call(_this$props, event);
+
+            (_this$props$onGesture = (_this$props = this.props).onGestureEvent) === null || _this$props$onGesture === void 0 ? void 0 : _this$props$onGesture.call(_this$props, event);
           }
         } else {
           var _this$props$onGesture2, _this$props2;
-          (_this$props$onGesture2 = (_this$props2 = this.props).onGestureHandlerEvent) === null || _this$props$onGesture2 === void 0 || _this$props$onGesture2.call(_this$props2, event);
+
+          (_this$props$onGesture2 = (_this$props2 = this.props).onGestureHandlerEvent) === null || _this$props$onGesture2 === void 0 ? void 0 : _this$props$onGesture2.call(_this$props2, event);
         }
       });
-      // TODO(TS) - make sure this is right type for event
+
       _defineProperty(this, "onGestureHandlerStateChange", event => {
         if (event.nativeEvent.handlerTag === this.handlerTag) {
           if (typeof this.props.onHandlerStateChange === 'function') {
             var _this$props$onHandler, _this$props3;
-            (_this$props$onHandler = (_this$props3 = this.props).onHandlerStateChange) === null || _this$props$onHandler === void 0 || _this$props$onHandler.call(_this$props3, event);
+
+            (_this$props$onHandler = (_this$props3 = this.props).onHandlerStateChange) === null || _this$props$onHandler === void 0 ? void 0 : _this$props$onHandler.call(_this$props3, event);
           }
+
           const state = event.nativeEvent.state;
           const stateEventName = stateToPropMappings[state];
           const eventHandler = stateEventName && this.props[stateEventName];
+
           if (eventHandler && typeof eventHandler === 'function') {
             eventHandler(event);
           }
         } else {
           var _this$props$onGesture3, _this$props4;
-          (_this$props$onGesture3 = (_this$props4 = this.props).onGestureHandlerStateChange) === null || _this$props$onGesture3 === void 0 || _this$props$onGesture3.call(_this$props4, event);
+
+          (_this$props$onGesture3 = (_this$props4 = this.props).onGestureHandlerStateChange) === null || _this$props$onGesture3 === void 0 ? void 0 : _this$props$onGesture3.call(_this$props4, event);
         }
       });
+
       _defineProperty(this, "refHandler", node => {
+        var _props;
+
         this.viewNode = node;
-        const child = React.Children.only(this.props.children);
-        // TODO(TS) fix ref type
-        const {
-          ref
-        } = child;
-        if (ref !== null) {
-          if (typeof ref === 'function') {
-            ref(node);
-          } else {
-            ref.current = node;
-          }
+        const child = React.Children.only(this.props.children); // @ts-ignore Since React 19 ref is accessible as standard prop
+        // https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-element-ref
+
+        const ref = (0, _utils2.isReact19)() ? (_props = child.props) === null || _props === void 0 ? void 0 : _props.ref : child === null || child === void 0 ? void 0 : child.ref;
+
+        if (!ref) {
+          return;
+        }
+
+        if (typeof ref === 'function') {
+          ref(node);
+        } else {
+          ref.current = node;
         }
       });
+
       _defineProperty(this, "createGestureHandler", newConfig => {
         this.config = newConfig;
+
         _RNGestureHandlerModule.default.createGestureHandler(name, this.handlerTag, newConfig);
       });
+
       _defineProperty(this, "attachGestureHandler", newViewTag => {
         this.viewTag = newViewTag;
+
         if (_reactNative.Platform.OS === 'web') {
           // Typecast due to dynamic resolution, attachGestureHandler should have web version signature in this branch
-          _RNGestureHandlerModule.default.attachGestureHandler(this.handlerTag, newViewTag, _ActionType.ActionType.JS_FUNCTION_OLD_API,
-          // ignored on web
+          _RNGestureHandlerModule.default.attachGestureHandler(this.handlerTag, newViewTag, _ActionType.ActionType.JS_FUNCTION_OLD_API, // ignored on web
           this.propsRef);
         } else {
           (0, _handlersRegistry.registerOldGestureHandler)(this.handlerTag, {
             onGestureEvent: this.onGestureHandlerEvent,
             onGestureStateChange: this.onGestureHandlerStateChange
           });
-          const actionType = ((_this$props5, _this$props6) => {
+
+          const actionType = (() => {
+            var _this$props5, _this$props6;
+
             const onGestureEvent = (_this$props5 = this.props) === null || _this$props5 === void 0 ? void 0 : _this$props5.onGestureEvent;
             const isGestureHandlerWorklet = onGestureEvent && ('current' in onGestureEvent || 'workletEventHandler' in onGestureEvent);
             const onHandlerStateChange = (_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : _this$props6.onHandlerStateChange;
             const isStateChangeHandlerWorklet = onHandlerStateChange && ('current' in onHandlerStateChange || 'workletEventHandler' in onHandlerStateChange);
             const isReanimatedHandler = isGestureHandlerWorklet || isStateChangeHandlerWorklet;
+
             if (isReanimatedHandler) {
               // Reanimated worklet
               return _ActionType.ActionType.REANIMATED_WORKLET;
@@ -219,18 +265,24 @@ function createHandler({
               return _ActionType.ActionType.JS_FUNCTION_OLD_API;
             }
           })();
+
           _RNGestureHandlerModule.default.attachGestureHandler(this.handlerTag, newViewTag, actionType);
         }
+
         (0, _utils.scheduleFlushOperations)();
         (0, _ghQueueMicrotask.ghQueueMicrotask)(() => {
           _mountRegistry.MountRegistry.gestureHandlerWillMount(this);
         });
       });
+
       _defineProperty(this, "updateGestureHandler", newConfig => {
         this.config = newConfig;
+
         _RNGestureHandlerModule.default.updateGestureHandler(this.handlerTag, newConfig);
+
         (0, _utils.scheduleFlushOperations)();
       });
+
       this.handlerTag = (0, _getNextHandlerTag.getNextHandlerTag)();
       this.config = {};
       this.propsRef = /*#__PURE__*/React.createRef();
@@ -238,16 +290,20 @@ function createHandler({
       this.state = {
         allowTouches
       };
+
       if (props.id) {
         if (_handlersRegistry.handlerIDToTag[props.id] !== undefined) {
           throw new Error(`Handler with ID "${props.id}" already registered`);
         }
+
         _handlersRegistry.handlerIDToTag[props.id] = this.handlerTag;
       }
     }
+
     componentDidMount() {
       const props = this.props;
       this.isMountedRef.current = true;
+
       if (DEV_ON_ANDROID) {
         this.inspectorToggleListener = _reactNative.DeviceEventEmitter.addListener('toggleElementInspector', () => {
           this.setState(_ => ({
@@ -256,6 +312,7 @@ function createHandler({
           this.update(UNRESOLVED_REFS_RETRY_LIMIT);
         });
       }
+
       if (hasUnresolvedRefs(props)) {
         // If there are unresolved refs (e.g. ".current" has not yet been set)
         // passed as `simultaneousHandlers` or `waitFor`, we enqueue a call to
@@ -267,76 +324,94 @@ function createHandler({
           this.update(UNRESOLVED_REFS_RETRY_LIMIT);
         });
       }
+
       this.createGestureHandler((0, _utils.filterConfig)(transformProps ? transformProps(this.props) : this.props, [...allowedProps, ...customNativeProps], config));
+
       if (!this.viewNode) {
         throw new Error(`[Gesture Handler] Failed to obtain view for ${Handler.displayName}. Note that old API doesn't support functional components.`);
       }
+
       this.attachGestureHandler((0, _findNodeHandle.default)(this.viewNode)); // TODO(TS) - check if this can be null
     }
+
     componentDidUpdate() {
       const viewTag = (0, _findNodeHandle.default)(this.viewNode);
+
       if (this.viewTag !== viewTag) {
         this.attachGestureHandler(viewTag); // TODO(TS) - check interaction between _viewTag & findNodeHandle
       }
+
       this.update(UNRESOLVED_REFS_RETRY_LIMIT);
     }
+
     componentWillUnmount() {
       var _this$inspectorToggle;
-      (_this$inspectorToggle = this.inspectorToggleListener) === null || _this$inspectorToggle === void 0 || _this$inspectorToggle.remove();
+
+      (_this$inspectorToggle = this.inspectorToggleListener) === null || _this$inspectorToggle === void 0 ? void 0 : _this$inspectorToggle.remove();
       this.isMountedRef.current = false;
+
       if (_reactNative.Platform.OS !== 'web') {
         (0, _handlersRegistry.unregisterOldGestureHandler)(this.handlerTag);
       }
+
       _RNGestureHandlerModule.default.dropGestureHandler(this.handlerTag);
-      (0, _utils.scheduleFlushOperations)();
-      // We can't use this.props.id directly due to TS generic type narrowing bug, see https://github.com/microsoft/TypeScript/issues/13995 for more context
+
+      (0, _utils.scheduleFlushOperations)(); // We can't use this.props.id directly due to TS generic type narrowing bug, see https://github.com/microsoft/TypeScript/issues/13995 for more context
+
       const handlerID = this.props.id;
+
       if (handlerID) {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete _handlersRegistry.handlerIDToTag[handlerID];
       }
+
       _mountRegistry.MountRegistry.gestureHandlerWillUnmount(this);
     }
+
     update(remainingTries) {
       if (!this.isMountedRef.current) {
         return;
       }
-      const props = this.props;
 
-      // When ref is set via a function i.e. `ref={(r) => refObject.current = r}` instead of
+      const props = this.props; // When ref is set via a function i.e. `ref={(r) => refObject.current = r}` instead of
       // `ref={refObject}` it's possible that it won't be resolved in time. Seems like trying
       // again is easy enough fix.
+
       if (hasUnresolvedRefs(props) && remainingTries > 0) {
         (0, _ghQueueMicrotask.ghQueueMicrotask)(() => {
           this.update(remainingTries - 1);
         });
       } else {
         const newConfig = (0, _utils.filterConfig)(transformProps ? transformProps(this.props) : this.props, [...allowedProps, ...customNativeProps], config);
+
         if (!(0, _utils2.deepEqual)(this.config, newConfig)) {
           this.updateGestureHandler(newConfig);
         }
       }
     }
+
     setNativeProps(updates) {
-      const mergedProps = {
-        ...this.props,
+      const mergedProps = { ...this.props,
         ...updates
       };
       const newConfig = (0, _utils.filterConfig)(transformProps ? transformProps(mergedProps) : mergedProps, [...allowedProps, ...customNativeProps], config);
       this.updateGestureHandler(newConfig);
     }
+
     render() {
       var _this$props$testID;
+
       if (__DEV__ && !this.context && !(0, _utils2.isTestEnv)() && _reactNative.Platform.OS !== 'web') {
         throw new Error(name + ' must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.');
       }
-      let gestureEventHandler = this.onGestureHandlerEvent;
-      // Another instance of https://github.com/microsoft/TypeScript/issues/13995
+
+      let gestureEventHandler = this.onGestureHandlerEvent; // Another instance of https://github.com/microsoft/TypeScript/issues/13995
 
       const {
         onGestureEvent,
         onGestureHandlerEvent
       } = this.props;
+
       if (onGestureEvent && typeof onGestureEvent !== 'function') {
         // If it's not a method it should be an native Animated.event
         // object. We set it directly as the handler for the view
@@ -344,19 +419,21 @@ function createHandler({
         if (onGestureHandlerEvent) {
           throw new Error('Nesting touch handlers with native animated driver is not supported yet');
         }
+
         gestureEventHandler = onGestureEvent;
       } else {
         if (onGestureHandlerEvent && typeof onGestureHandlerEvent !== 'function') {
           throw new Error('Nesting touch handlers with native animated driver is not supported yet');
         }
       }
-      let gestureStateEventHandler = this.onGestureHandlerStateChange;
-      // Another instance of https://github.com/microsoft/TypeScript/issues/13995
+
+      let gestureStateEventHandler = this.onGestureHandlerStateChange; // Another instance of https://github.com/microsoft/TypeScript/issues/13995
 
       const {
         onHandlerStateChange,
         onGestureHandlerStateChange
       } = this.props;
+
       if (onHandlerStateChange && typeof onHandlerStateChange !== 'function') {
         // If it's not a method it should be an native Animated.event
         // object. We set it directly as the handler for the view
@@ -364,32 +441,38 @@ function createHandler({
         if (onGestureHandlerStateChange) {
           throw new Error('Nesting touch handlers with native animated driver is not supported yet');
         }
+
         gestureStateEventHandler = onHandlerStateChange;
       } else {
         if (onGestureHandlerStateChange && typeof onGestureHandlerStateChange !== 'function') {
           throw new Error('Nesting touch handlers with native animated driver is not supported yet');
         }
       }
+
       const events = {
         onGestureHandlerEvent: this.state.allowTouches ? gestureEventHandler : undefined,
         onGestureHandlerStateChange: this.state.allowTouches ? gestureStateEventHandler : undefined
       };
       this.propsRef.current = events;
       let child = null;
+
       try {
         child = React.Children.only(this.props.children);
       } catch (e) {
         throw new Error((0, _utils2.tagMessage)(`${name} got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`));
       }
+
       let grandChildren = child.props.children;
+
       if (__DEV__ && child.type && (child.type === 'RNGestureHandlerButton' || child.type.name === 'View' || child.type.displayName === 'View')) {
         grandChildren = React.Children.toArray(grandChildren);
-        grandChildren.push(/*#__PURE__*/React.createElement(_PressabilityDebugView.PressabilityDebugView, {
+        grandChildren.push( /*#__PURE__*/React.createElement(_PressabilityDebugView.PressabilityDebugView, {
           key: "pressabilityDebugView",
           color: "mediumspringgreen",
           hitSlop: child.props.hitSlop
         }));
       }
+
       return /*#__PURE__*/React.cloneElement(child, {
         ref: this.refHandler,
         collapsable: false,
@@ -402,9 +485,13 @@ function createHandler({
         ...events
       }, grandChildren);
     }
+
   }
+
   _defineProperty(Handler, "displayName", name);
+
   _defineProperty(Handler, "contextType", _GestureHandlerRootViewContext.default);
+
   return Handler;
 }
 //# sourceMappingURL=createHandler.js.map