fix: wrap SubscriptionFeedCategoryContextMenu in a View (#3402)
* fix(mobile): wrap SubscriptionFeedCategoryContextMenu in a View * chore(mobile): add asChild and style props to ContextMenu.Trigger
This commit is contained in:
parent
ae7723ddd2
commit
9c75d8b9fc
|
|
@ -1,5 +1,5 @@
|
|||
import { FeedViewType } from "@follow/constants"
|
||||
import type { FC, PropsWithChildren } from "react"
|
||||
import type { CSSProperties, FC, PropsWithChildren } from "react"
|
||||
import { useCallback, useMemo } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import type { ListRenderItemInfo } from "react-native"
|
||||
|
|
@ -31,7 +31,7 @@ export const SubscriptionFeedItemContextMenu: FC<
|
|||
const navigation = useNavigation()
|
||||
return (
|
||||
<ContextMenu.Root>
|
||||
<ContextMenu.Trigger>{children}</ContextMenu.Trigger>
|
||||
<ContextMenu.Trigger asChild>{children}</ContextMenu.Trigger>
|
||||
|
||||
<ContextMenu.Content>
|
||||
{view === FeedViewType.Articles && (
|
||||
|
|
@ -199,15 +199,21 @@ export const SubscriptionFeedCategoryContextMenu = ({
|
|||
feedIds,
|
||||
view: currentView,
|
||||
children,
|
||||
asChild,
|
||||
style,
|
||||
}: PropsWithChildren<{
|
||||
category: string
|
||||
feedIds: string[]
|
||||
view: FeedViewType
|
||||
asChild?: boolean
|
||||
style?: CSSProperties
|
||||
}>) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<ContextMenu.Root>
|
||||
<ContextMenu.Trigger>{children}</ContextMenu.Trigger>
|
||||
<ContextMenu.Trigger asChild={asChild} style={style}>
|
||||
{children}
|
||||
</ContextMenu.Trigger>
|
||||
|
||||
<ContextMenu.Content>
|
||||
<ContextMenu.Item
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { cn } from "@follow/utils"
|
||||
import { memo, useState } from "react"
|
||||
import { Text, TouchableOpacity } from "react-native"
|
||||
import { Text, TouchableOpacity, View } from "react-native"
|
||||
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated"
|
||||
|
||||
import { GROUPED_LIST_MARGIN } from "@/src/components/ui/grouped/constants"
|
||||
|
|
@ -54,51 +54,53 @@ export const CategoryGrouped = memo(
|
|||
|
||||
return (
|
||||
<>
|
||||
<SubscriptionFeedCategoryContextMenu
|
||||
category={category}
|
||||
feedIds={subscriptionIds}
|
||||
view={view}
|
||||
>
|
||||
<ItemPressable
|
||||
itemStyle={ItemPressableStyle.Grouped}
|
||||
onPress={() => {
|
||||
const isHorizontalScrolling = getHorizontalScrolling()
|
||||
if (isHorizontalScrolling) {
|
||||
return
|
||||
}
|
||||
selectFeed({
|
||||
type: "category",
|
||||
categoryName: category,
|
||||
})
|
||||
closeDrawer()
|
||||
navigation.pushControllerView(FeedScreen, {
|
||||
feedId: category,
|
||||
})
|
||||
}}
|
||||
className={cn("h-12 flex-row items-center px-3", {
|
||||
"rounded-t-[10px]": isFirst,
|
||||
"rounded-b-[10px]": isLast,
|
||||
})}
|
||||
style={{ marginHorizontal: GROUPED_LIST_MARGIN }}
|
||||
<View style={{ marginHorizontal: GROUPED_LIST_MARGIN }}>
|
||||
<SubscriptionFeedCategoryContextMenu
|
||||
category={category}
|
||||
feedIds={subscriptionIds}
|
||||
view={view}
|
||||
asChild
|
||||
>
|
||||
<TouchableOpacity
|
||||
hitSlop={10}
|
||||
<ItemPressable
|
||||
itemStyle={ItemPressableStyle.Grouped}
|
||||
onPress={() => {
|
||||
rotateSharedValue.value = withSpring(expanded ? 0 : 90, {})
|
||||
setExpanded(!expanded)
|
||||
const isHorizontalScrolling = getHorizontalScrolling()
|
||||
if (isHorizontalScrolling) {
|
||||
return
|
||||
}
|
||||
selectFeed({
|
||||
type: "category",
|
||||
categoryName: category,
|
||||
})
|
||||
closeDrawer()
|
||||
navigation.pushControllerView(FeedScreen, {
|
||||
feedId: category,
|
||||
})
|
||||
}}
|
||||
className="size-5 flex-row items-center justify-center"
|
||||
className={cn("h-12 flex-row items-center px-3", {
|
||||
"rounded-t-[10px]": isFirst,
|
||||
"rounded-b-[10px]": isLast,
|
||||
})}
|
||||
>
|
||||
<Animated.View style={rotateStyle} className="ml-2">
|
||||
<RightCuteFiIcon color={secondaryLabelColor} height={14} width={14} />
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
<Text className="text-text ml-4 font-medium">{category}</Text>
|
||||
{!!unreadCounts && (
|
||||
<Text className="text-secondary-label ml-auto text-xs">{unreadCounts}</Text>
|
||||
)}
|
||||
</ItemPressable>
|
||||
</SubscriptionFeedCategoryContextMenu>
|
||||
<TouchableOpacity
|
||||
hitSlop={10}
|
||||
onPress={() => {
|
||||
rotateSharedValue.value = withSpring(expanded ? 0 : 90, {})
|
||||
setExpanded(!expanded)
|
||||
}}
|
||||
className="size-5 flex-row items-center justify-center"
|
||||
>
|
||||
<Animated.View style={rotateStyle} className="ml-2">
|
||||
<RightCuteFiIcon color={secondaryLabelColor} height={14} width={14} />
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
<Text className="text-text ml-4 font-medium">{category}</Text>
|
||||
{!!unreadCounts && (
|
||||
<Text className="text-secondary-label ml-auto text-xs">{unreadCounts}</Text>
|
||||
)}
|
||||
</ItemPressable>
|
||||
</SubscriptionFeedCategoryContextMenu>
|
||||
</View>
|
||||
|
||||
{!isLast && <ItemSeparator />}
|
||||
{expanded && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue