[Web] Fix handling of enabled prop (#3726)

## Description

Right now, if one changes `enabled` property of handlers to `false`,
they can never activate again. In the following example:

```ts
const [enabled, setEnabled] = useState(false);
const pan = Gesture.Pan().enabled(enabled)
```

gesture will never become active, even if `enabled` changes to `true`.
Same happens when `enabled` is set to `true` and then changed to `false`
and `true` again.

This happens because we set `enabled` to `true` by default in
`setGestureConfig`, thus the following check:

```ts
if (config.enabled !== undefined && this.enabled !== config.enabled) { ... }
```
 passes only when `config.enabled` is `false`.

I've set `enabled` to `null` by default, and then if `config.enabled` is
defined, it is assigned given value. Else default will be `true`. To fix
the issue, I've removed reset of `enabled` in `resetConfig` method.

Alternative approach would be to follow Android implementation and
always react to changes in `enabled` even in cases like `false`
$\rightarrow$ `false` and `true` $\rightarrow$ `true`.

## Test plan

<details>
<summary>Tested on the following code:</summary>

```tsx
import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
  NativeDetector,
  usePan,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

export default function EmptyExample() {
  const [showDetector, setShowDetector] = React.useState(true);

  const [enablePan1, setEnablePan1] = React.useState(true);
  const enablePan2 = useSharedValue(true);

  const pan1 = Gesture.Pan().enabled(enablePan1);

  const pan2 = usePan({
    enabled: enablePan2,
  });

  const as = useAnimatedStyle(() => {
    return {
      backgroundColor: enablePan2.value ? 'lightgreen' : 'crimson',
    };
  });

  return (
    <GestureHandlerRootView style={styles.container}>
      <Button
        title="Toggle old API enabled!"
        onPress={() => {
          setEnablePan1((prev) => !prev);
        }}
      />

      <GestureDetector gesture={pan1}>
        <View
          style={[
            styles.box,
            { backgroundColor: enablePan1 ? 'lightgreen' : 'crimson' },
          ]}
        />
      </GestureDetector>

      <Button
        title="Toggle new API enabled!"
        onPress={() => {
          enablePan2.value = !enablePan2.value;
        }}
      />

      <Button
        title="Toggle NativeDetetor"
        onPress={() => {
          setShowDetector((prev) => !prev);
        }}
      />

      {showDetector && (
        <NativeDetector gesture={pan2}>
          <Animated.View style={[styles.box, as]} />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  box: {
    width: 200,
    height: 200,
    borderRadius: 20,
  },
});
```

</details>

Author: m-bert

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -40,7 +40,7 @@ export default abstract class GestureHandler implements IGestureHandler {
   private _state: State = State.UNDETERMINED;
 
   private _shouldCancelWhenOutside = false;
-  private _enabled = false;
+  private _enabled: boolean | null = null;
 
   private viewRef: number | null = null;
   private propsRef: React.RefObject<PropsRef> | null = null;
@@ -712,16 +712,28 @@ export default abstract class GestureHandler implements IGestureHandler {
   // Handling config
   //
 
+  // Helper function to correctly set enabled property
+  private updateEnabled(enabled: boolean | undefined) {
+    if (enabled === undefined) {
+      if (this._enabled) {
+        return;
+      }
+
+      this._enabled = true;
+      this.delegate.onEnabledChange();
+    } else if (this._enabled !== enabled) {
+      this._enabled = enabled;
+      this.delegate.onEnabledChange();
+    }
+  }
+
   public setGestureConfig(config: Config) {
     this.resetConfig();
     this.updateGestureConfig(config);
   }
 
   public updateGestureConfig(config: Config): void {
-    if (config.enabled !== undefined && this.enabled !== config.enabled) {
-      this._enabled = config.enabled;
-      this.delegate.onEnabledChange();
-    }
+    this.updateEnabled(config.enabled);
 
     if (config.hitSlop !== undefined) {
       this.hitSlop = config.hitSlop;
@@ -911,7 +923,6 @@ export default abstract class GestureHandler implements IGestureHandler {
   }
 
   protected resetConfig(): void {
-    this._enabled = true;
     this.manualActivation = false;
     this.shouldCancelWhenOutside = false;
     this.mouseButton = undefined;

packages/react-native-gesture-handler/src/web/handlers/IGestureHandler.ts

@@ -23,7 +23,7 @@ export default interface IGestureHandler {
   state: State;
   shouldCancelWhenOutside: boolean;
   shouldResetProgress: boolean;
-  readonly enabled: boolean;
+  readonly enabled: boolean | null;
   readonly pointerType: PointerType;
   enableContextMenu: boolean;
   readonly activeCursor?: ActiveCursor;

packages/react-native-gesture-handler/src/web/tools/EventManager.ts

@@ -94,6 +94,15 @@ export default abstract class EventManager<T> {
     this.pointersInBounds.splice(index, 1);
   }
 
+  public setEnabled(value: boolean | null) {
+    if (value) {
+      this.registerListeners();
+    } else {
+      this.resetManager();
+      this.unregisterListeners();
+    }
+  }
+
   public resetManager(): void {
     // Reseting activePointersCounter is necessary to make gestures such as pinch work properly
     // There are gestures that end when there is still one active pointer (like pinch/rotation)

packages/react-native-gesture-handler/src/web/tools/GestureHandlerWebDelegate.ts

@@ -39,8 +39,6 @@ export class GestureHandlerWebDelegate
       );
     }
 
-    this.isInitialized = true;
-
     this.gestureHandler = handler;
     this.view = findNodeHandle(viewRef) as unknown as HTMLElement;
 
@@ -49,10 +47,6 @@ export class GestureHandlerWebDelegate
       touchAction: this.view.style.touchAction,
     };
 
-    this.setUserSelect();
-    this.setTouchAction();
-    this.setContextMenu();
-
     const shouldSendHoverEvents = handler.name === SingleGestureName.Hover;
 
     this.eventManagers.push(
@@ -64,6 +58,8 @@ export class GestureHandlerWebDelegate
     this.eventManagers.forEach((manager) =>
       this.gestureHandler.attachEventManager(manager)
     );
+
+    this.isInitialized = true;
   }
 
   detach(): void {
@@ -73,11 +69,14 @@ export class GestureHandlerWebDelegate
     };
 
     this.eventManagers.forEach((manager) => {
-      manager.unregisterListeners();
+      manager.setEnabled(false);
     });
+
     this.removeContextMenuListeners();
     this._view = null;
     this.eventManagers = [];
+
+    this.isInitialized = false;
   }
 
   isPointerInBounds({ x, y }: { x: number; y: number }): boolean {
@@ -203,15 +202,9 @@ export class GestureHandlerWebDelegate
     this.setTouchAction();
     this.setContextMenu();
 
-    if (this.gestureHandler.enabled) {
-      this.eventManagers.forEach((manager) => {
-        manager.registerListeners();
-      });
-    } else {
-      this.eventManagers.forEach((manager) => {
-        manager.unregisterListeners();
-      });
-    }
+    this.eventManagers.forEach((manager) => {
+      manager.setEnabled(this.gestureHandler.enabled);
+    });
   }
 
   onBegin(): void {
@@ -246,6 +239,8 @@ export class GestureHandlerWebDelegate
     this.eventManagers.forEach((manager) => {
       manager.unregisterListeners();
     });
+
+    this.isInitialized = false;
   }
 
   private ensureView(view: any): asserts view is HTMLElement {