[feat] Replace swipeable row with library

mrurlwin · Nov 1, 2023 · ec8f626 · ec8f626
1 parent e1f4528
commit ec8f626
Show file tree

Hide file tree

Showing 19 changed files with 317 additions and 885 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -647,7 +647,7 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (2.2.0):
     - React-Core
-  - RNReanimated (3.3.0):
+  - RNReanimated (3.5.4):
     - DoubleConversion
     - FBLazyVector
     - glog
@@ -1097,7 +1097,7 @@ SPEC CHECKSUMS:
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 6e46dde1f87e5f018a54fe5d40cd0e0b942b49ee
   RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
-  RNReanimated: 9f7068e43b9358a46a688d94a5a3adb258139457
+  RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
   RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581
   RNShare: 32e97adc8d8c97d4a26bcdd3c45516882184f8b6
   RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396

diff --git a/package.json b/package.json
@@ -58,7 +58,8 @@
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-material-tabs": "^4.2.0",
     "react-native-pager-view": "^7.0.0-rc.0",
-    "react-native-reanimated": "~3.3.0",
+    "react-native-reanimated": "3.5.4",
+    "react-native-reanimated-swipeable": "^1.0.5",
     "react-native-safe-area-context": "^4.7.2",
     "react-native-screens": "^3.25.0",
     "react-native-share": "^9.4.1",

diff --git a/src/components/Comment/components/Comment.tsx b/src/components/Comment/components/Comment.tsx
@@ -3,36 +3,32 @@ import { Separator, View, YStack } from 'tamagui';
 import CommentHeader from '@components/Comment/components/CommentHeader';
 import CommentContent from '@components/Comment/components/CommentContent';
 import { Pressable } from 'react-native';
-import { SwipeableRow } from '@components/Common/SwipeableRow/SwipeableRow';
 import {
   useCommentContent,
   useCommentCreator,
   useCommentDeleted,
-  useCommentGesturesEnabled,
-  useCommentPath,
   useCommentPostId,
   useCommentRemoved,
   useCommentSaved,
   usePostCreatorId,
   useShowCommentButtons,
 } from '@src/state';
-import { LeftOptions } from '@components/Common/SwipeableRow/LeftOptions';
-import { SwipeableActionParams } from '@helpers/swipeableActions';
-import { useNavigation } from '@react-navigation/core';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { RightOptions } from '@components/Common/SwipeableRow/RightOptions';
-import { ISwipeableOptions } from '@components/Common/SwipeableRow/types';
 import CommentEllipsisButton from '@components/Comment/components/CommentEllipsisButton';
 import CommentMetrics from '@components/Comment/components/CommentMetrics';
 import CommentActionBar from '@components/Comment/components/CommentActionBar';
+import {
+  ISwipeableActionGroup,
+  Swipeable,
+} from 'react-native-reanimated-swipeable';
+import { playHaptic } from '@helpers/haptics';
 
 interface IProps {
   itemId: number;
   depth?: number;
   onPress?: () => unknown | Promise<unknown>;
   collapsed?: boolean;
-  leftOptions?: ISwipeableOptions;
-  rightOptions?: ISwipeableOptions;
+  leftOptions?: ISwipeableActionGroup;
+  rightOptions?: ISwipeableActionGroup;
   space?: boolean;
 }
 
@@ -64,33 +60,19 @@ function Comment({
   rightOptions,
   space = false,
 }: IProps): React.JSX.Element {
-  const navigation = useNavigation<NativeStackNavigationProp<any>>();
-
   const postId = useCommentPostId(itemId);
   const postCreatorId = usePostCreatorId(postId);
   const commentContent = useCommentContent(itemId);
   const commentRemoved = useCommentRemoved(itemId);
   const commentDeleted = useCommentDeleted(itemId);
   const commentSaved = useCommentSaved(itemId);
-  const commentPath = useCommentPath(itemId);
   const commentCreator = useCommentCreator(itemId);
 
-  const swipesEnabled = useCommentGesturesEnabled();
   const showButtons = useShowCommentButtons();
 
   const borderWidth = useMemo(() => (depth > 0 ? 2 : 0), [depth]);
   const borderColor = useMemo(() => depthToColor(depth), [depth]);
 
-  const actionParams = useMemo<SwipeableActionParams>(
-    () => ({
-      postId,
-      commentId: itemId,
-      path: commentPath,
-      navigation,
-    }),
-    [itemId],
-  );
-
   const ellipsisButton = useCallback(
     () => <CommentEllipsisButton itemId={itemId} />,
     [itemId],
@@ -103,17 +85,12 @@ function Comment({
 
   return (
     <View my={space ? 2 : 0}>
-      <SwipeableRow
-        leftOption={
-          swipesEnabled && leftOptions?.actions.first != null ? (
-            <LeftOptions options={leftOptions} actionParams={actionParams} />
-          ) : undefined
-        }
-        rightOption={
-          swipesEnabled && rightOptions?.actions.first != null ? (
-            <RightOptions options={rightOptions} actionParams={actionParams} />
-          ) : undefined
-        }
+      <Swipeable
+        leftActionGroup={leftOptions}
+        rightActionGroup={rightOptions}
+        options={{
+          onHitStep: playHaptic,
+        }}
       >
         {commentSaved && (
           <View
@@ -159,7 +136,7 @@ function Comment({
           </YStack>
           <Separator borderColor="$bg" ml={depth * 10 + 10} />
         </YStack>
-      </SwipeableRow>
+      </Swipeable>
     </View>
   );
 }

diff --git a/src/components/Comment/components/CommentChain.tsx b/src/components/Comment/components/CommentChain.tsx
@@ -1,9 +1,12 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { ICommentInfo } from '@src/types';
 import { PressableComment } from '@components/Comment/components/Comment';
 import CommentShowMoreButton from '@components/Comment/components/CommentShowMoreButton';
 import { useCommentSwipeOptions } from '@components/Common/SwipeableRow/hooks/useCommentSwipeOptions';
 import { setPostCommentHidden, useCommentGesturesCollapse } from '@src/state';
+import { SwipeableActionParams } from '@helpers/swipeableActions';
+import { useNavigation } from '@react-navigation/core';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 interface IProps {
   commentInfo: ICommentInfo;
@@ -14,10 +17,22 @@ function CommentChain({
   commentInfo,
   ignoreLoadMore = false,
 }: IProps): React.JSX.Element | null {
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
+
   const collapseOnTap = useCommentGesturesCollapse();
 
-  const leftOptions = useCommentSwipeOptions('left');
-  const rightOptions = useCommentSwipeOptions('right');
+  const actionParams = useMemo<SwipeableActionParams>(
+    () => ({
+      postId: commentInfo.postId,
+      commentId: commentInfo.commentId,
+      path: commentInfo.path,
+      navigation,
+    }),
+    [commentInfo.commentId],
+  );
+
+  const leftOptions = useCommentSwipeOptions('left', actionParams);
+  const rightOptions = useCommentSwipeOptions('right', actionParams);
 
   const onCommentPress = useCallback(() => {
     if (!collapseOnTap) return;
@@ -43,8 +58,8 @@ function CommentChain({
       itemId={commentInfo.commentId}
       depth={commentInfo.depth}
       collapsed={commentInfo.collapsed}
-      leftOptions={leftOptions}
-      rightOptions={rightOptions}
+      leftOptions={leftOptions ?? undefined}
+      rightOptions={rightOptions ?? undefined}
     />
   );
 }

diff --git a/src/components/Common/SwipeableRow/LeftOptions.tsx b/src/components/Common/SwipeableRow/LeftOptions.tsx