chore: upgrade react-use-gesture to @use-gesture/react

client/web/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@loadable/component": "^5.15.2",
+    "@use-gesture/react": "^10.2.21",
     "ahooks": "^3.7.1",
     "antd": "^4.19.5",
     "axios": "^0.21.1",
@@ -54,7 +55,6 @@
     "react-router-dom": "^6.4.0",
     "react-split": "^2.0.14",
     "react-transition-group": "^4.4.2",
-    "react-use-gesture": "^9.1.3",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-virtuoso": "^3.1.1",
     "socket.io-client": "^4.1.2",

client/web/src/routes/Main/Content/PageContent.tsx

@@ -1,17 +1,27 @@
 import React, { PropsWithChildren, useCallback, useEffect } from 'react';
 import { useSidebarContext } from '../SidebarContext';
 import _isNil from 'lodash/isNil';
-import { useDrag } from 'react-use-gesture';
+import { EventTypes, useDrag, UserDragConfig } from '@use-gesture/react';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import clsx from 'clsx';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
-import type { ReactEventHandlers } from 'react-use-gesture/dist/types';
+import type { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';
 
-const PageContentRoot: React.FC<PropsWithChildren<ReactEventHandlers>> = ({
+interface PageContentRootProps extends PropsWithChildren<ReactDOMAttributes> {
+  className?: string;
+  style?: React.CSSProperties;
+}
+const PageContentRoot: React.FC<PageContentRootProps> = ({
+  className,
+  style,
   children,
   ...others
 }) => (
-  <div className="flex flex-row flex-1 overflow-hidden" {...others}>
+  <div
+    {...others}
+    style={style}
+    className={clsx('flex flex-row flex-1 overflow-hidden', className)}
+  >
     {children}
   </div>
 );
@@ -19,7 +29,7 @@ const PageContentRoot: React.FC<PropsWithChildren<ReactEventHandlers>> = ({
 const PageGestureWrapper: React.FC<PropsWithChildren> = React.memo((props) => {
   const { setShowSidebar } = useSidebarContext();
 
-  const bind = useDrag(
+  const bind = useDrag<EventTypes['drag'], UserDragConfig>(
     (state) => {
       const { swipe } = state;
       const swipeX = swipe[0];
@@ -31,11 +41,22 @@ const PageGestureWrapper: React.FC<PropsWithChildren> = React.memo((props) => {
     },
     {
       axis: 'x',
-      swipeDistance: 5,
+      swipe: {
+        distance: 5,
+      },
     }
   );
 
-  return <PageContentRoot {...bind()}>{props.children}</PageContentRoot>;
+  return (
+    <PageContentRoot
+      style={{
+        touchAction: 'pan-x',
+      }}
+      {...bind()}
+    >
+      {props.children}
+    </PageContentRoot>
+  );
 });
 PageGestureWrapper.displayName = 'PageGestureWrapper';
 

pnpm-lock.yaml

@@ -345,6 +345,7 @@ importers:
       '@types/webpack': ^5.28.0
       '@types/webpack-bundle-analyzer': ^4.4.1
       '@types/webpack-dev-server': ^4.3.1
+      '@use-gesture/react': ^10.2.21
       ahooks: ^3.7.1
       antd: ^4.19.5
       autoprefixer: ^10.2.6
@@ -396,7 +397,6 @@ importers:
       react-router-dom: ^6.4.0
       react-split: ^2.0.14
       react-transition-group: ^4.4.2
-      react-use-gesture: ^9.1.3
       react-virtualized-auto-sizer: ^1.0.6
       react-virtuoso: ^3.1.1
       rimraf: ^3.0.2
@@ -430,6 +430,7 @@ importers:
       zustand: ^4.1.2
     dependencies:
       '@loadable/component': 5.15.2_react@18.2.0
+      '@use-gesture/react': 10.2.21_react@18.2.0
       ahooks: 3.7.1_react@18.2.0
       antd: 4.22.8_biqbaboplfbrettd7655fr4n2y
       axios: 0.21.4
@@ -459,7 +460,6 @@ importers:
       react-router-dom: 6.4.0_biqbaboplfbrettd7655fr4n2y
       react-split: 2.0.14_react@18.2.0
       react-transition-group: 4.4.5_biqbaboplfbrettd7655fr4n2y
-      react-use-gesture: 9.1.3_react@18.2.0
       react-virtualized-auto-sizer: 1.0.6_biqbaboplfbrettd7655fr4n2y
       react-virtuoso: 3.1.1_biqbaboplfbrettd7655fr4n2y
       socket.io-client: 4.5.1
@@ -10254,6 +10254,19 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
+  /@use-gesture/core/10.2.21:
+    resolution: {integrity: sha512-EpqNIZ/diwbpjzjRqk+deMg+WOfW9GCYDZCZ6LHS2WPo6ea1flxC/0ncpsY7oUbMqJeKSsW6E7IOk0I6jji69g==}
+    dev: false
+
+  /@use-gesture/react/10.2.21_react@18.2.0:
+    resolution: {integrity: sha512-R8F6dnYWycpFPKi4ljvh1F+ItcBv8xFYFw7KIhUCJ3HWGndDKzqhahHshsM5XkuLL13PblNOf8oVgmSnRbB3Gg==}
+    peerDependencies:
+      react: '>= 16.8.0'
+    dependencies:
+      '@use-gesture/core': 10.2.21
+      react: 18.2.0
+    dev: false
+
   /@virtuoso.dev/react-urx/0.2.13_react@18.2.0:
     resolution: {integrity: sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==}
     engines: {node: '>=10'}
@@ -26603,15 +26616,6 @@ packages:
       tslib: 2.4.0
     dev: false
 
-  /react-use-gesture/9.1.3_react@18.2.0:
-    resolution: {integrity: sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==}
-    deprecated: This package is no longer maintained. Please use @use-gesture/react instead
-    peerDependencies:
-      react: '>= 16.8.0'
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /react-use/17.4.0:
     resolution: {integrity: sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==}
     peerDependencies: