From 70ef539788ad35166a748a3e70eff4437abb56b6 Mon Sep 17 00:00:00 2001 From: Innei Date: Thu, 17 Apr 2025 00:38:44 +0800 Subject: [PATCH] feat(mobile): refactor ItemPressable usage and styles - Replaced TouchableOpacity with ItemPressable in multiple components for improved interaction handling. - Introduced a new UnStyled option in ItemPressableStyle to allow for customizable styling. - Updated ItemPressable implementation in RelativeDateTime, EntryNormalItem, and CategoryGrouped components to enhance touch feedback and visual consistency. Signed-off-by: Innei --- .../ItemPressable/ItemPressableModule.swift | 6 +---- .../ui/datetime/RelativeDateTime.tsx | 10 ++++--- .../ui/pressable/ItemPressable.ios.tsx | 26 ++++++++++++------- .../components/ui/pressable/ItemPressable.tsx | 6 ++++- .../src/components/ui/pressable/enum.ts | 1 + .../entry-list/templates/EntryNormalItem.tsx | 8 +++--- .../modules/subscription/CategoryGrouped.tsx | 8 +++--- 7 files changed, 40 insertions(+), 25 deletions(-) diff --git a/apps/mobile/native/ios/Modules/ItemPressable/ItemPressableModule.swift b/apps/mobile/native/ios/Modules/ItemPressable/ItemPressableModule.swift index 6ea7b4fb6..5a06b57b8 100644 --- a/apps/mobile/native/ios/Modules/ItemPressable/ItemPressableModule.swift +++ b/apps/mobile/native/ios/Modules/ItemPressable/ItemPressableModule.swift @@ -57,8 +57,4 @@ class ItemPressableView: ExpoView { } } -extension ItemPressableView: UIGestureRecognizerDelegate { - func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool { - return touch.view == gestureRecognizer.view - } -} +extension ItemPressableView: UIGestureRecognizerDelegate {} diff --git a/apps/mobile/src/components/ui/datetime/RelativeDateTime.tsx b/apps/mobile/src/components/ui/datetime/RelativeDateTime.tsx index f754df054..7ba0e153e 100644 --- a/apps/mobile/src/components/ui/datetime/RelativeDateTime.tsx +++ b/apps/mobile/src/components/ui/datetime/RelativeDateTime.tsx @@ -2,9 +2,11 @@ import dayjs from "dayjs" import { useEffect, useMemo, useState } from "react" import { useTranslation } from "react-i18next" import type { TextProps } from "react-native" -import { Pressable } from "react-native" import Animated, { FadeOut } from "react-native-reanimated" +import { ItemPressableStyle } from "../pressable/enum" +import { ItemPressable } from "../pressable/ItemPressable" + const formatTemplateString = "lll" const formatTime = ( @@ -76,7 +78,9 @@ export const RelativeDateTime = ({ }, [date, displayAbsoluteTimeAfterDay, dateFormatTemplate, mode]) return ( - { setMode((mode) => (mode === "relative" ? "absolute" : "relative")) @@ -87,6 +91,6 @@ export const RelativeDateTime = ({ ? `${relative}${t("space")}${postfixText ?? t("words.ago")}` : memoizedFormatTime} - + ) } diff --git a/apps/mobile/src/components/ui/pressable/ItemPressable.ios.tsx b/apps/mobile/src/components/ui/pressable/ItemPressable.ios.tsx index cee2a6123..9db563a58 100644 --- a/apps/mobile/src/components/ui/pressable/ItemPressable.ios.tsx +++ b/apps/mobile/src/components/ui/pressable/ItemPressable.ios.tsx @@ -21,20 +21,26 @@ const NativeItemPressable = requireNativeView< cssInterop(NativeItemPressable, { className: "style", }) + export const ItemPressable: FC = memo( - ({ children, itemStyle = ItemPressableStyle.Grouped, ...props }) => { + ({ children, itemStyle = ItemPressableStyle.Grouped, className, ...props }) => { + const isUnStyled = itemStyle === ItemPressableStyle.UnStyled return ( { props.onPress?.() }} diff --git a/apps/mobile/src/components/ui/pressable/ItemPressable.tsx b/apps/mobile/src/components/ui/pressable/ItemPressable.tsx index d229570d3..e1779a6a3 100644 --- a/apps/mobile/src/components/ui/pressable/ItemPressable.tsx +++ b/apps/mobile/src/components/ui/pressable/ItemPressable.tsx @@ -67,6 +67,7 @@ export const ItemPressable: FC = memo( }, 100) }) }, [setIsPressing]) + const isUnStyled = itemStyle === ItemPressableStyle.UnStyled return ( @@ -77,7 +78,10 @@ export const ItemPressable: FC = memo( onLongPress={composeEventHandlers(props.onLongPress, () => {})} delayLongPress={props.delayLongPress ?? 100} className={cn("relative overflow-hidden", props.className)} - style={StyleSheet.flatten([props.style, { backgroundColor: itemNormalColor }])} + style={StyleSheet.flatten([ + props.style, + !isUnStyled && { backgroundColor: itemNormalColor }, + ])} > {useTypeScriptHappyCallback( (props) => { diff --git a/apps/mobile/src/components/ui/pressable/enum.ts b/apps/mobile/src/components/ui/pressable/enum.ts index f777c26fb..f1d972865 100644 --- a/apps/mobile/src/components/ui/pressable/enum.ts +++ b/apps/mobile/src/components/ui/pressable/enum.ts @@ -1,4 +1,5 @@ export enum ItemPressableStyle { + UnStyled, Plain, Grouped, } diff --git a/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx b/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx index 9251dd2fc..806cb69ab 100644 --- a/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx +++ b/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx @@ -2,7 +2,7 @@ import { FeedViewType } from "@follow/constants" import { tracker } from "@follow/tracker" import { cn, formatEstimatedMins, formatTimeToSeconds } from "@follow/utils" import { memo, useCallback, useMemo } from "react" -import { StyleSheet, Text, TouchableOpacity, View } from "react-native" +import { StyleSheet, Text, View } from "react-native" import { useUISettingKey } from "@/src/atoms/settings/ui" import { ThemedBlurView } from "@/src/components/common/ThemedBlurView" @@ -148,7 +148,9 @@ export const EntryNormalItem = memo( ))} {audio && ( - { if (isLoading) return @@ -174,7 +176,7 @@ export const EntryNormalItem = memo( )} - + )} )} diff --git a/apps/mobile/src/modules/subscription/CategoryGrouped.tsx b/apps/mobile/src/modules/subscription/CategoryGrouped.tsx index 916b09338..5399701d0 100644 --- a/apps/mobile/src/modules/subscription/CategoryGrouped.tsx +++ b/apps/mobile/src/modules/subscription/CategoryGrouped.tsx @@ -1,6 +1,6 @@ import { cn } from "@follow/utils" import { memo, useState } from "react" -import { Text, TouchableOpacity, View } from "react-native" +import { Text, View } from "react-native" import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated" import { GROUPED_LIST_MARGIN } from "@/src/components/ui/grouped/constants" @@ -68,7 +68,9 @@ export const CategoryGrouped = memo( "rounded-b-[10px]": isLast && !expanded, })} > - { rotateSharedValue.value = withSpring(expanded ? 0 : 90, {}) @@ -79,7 +81,7 @@ export const CategoryGrouped = memo( - + {category}