Clean up feature gate for follow buttons in expanded notifications (#11068)
This commit is contained in:
@@ -12,7 +12,6 @@ export enum Features {
|
||||
GroupChatsDisable = 'group_chats:disable',
|
||||
ComposerLanguageDetectionEnable = 'composer:language_detection:enable',
|
||||
PostGalleryEmbedEnable = 'post_gallery_embed:enable',
|
||||
NotificationsExpandedProfileCardEnable = 'notifications:expanded_profile_card:enable',
|
||||
SearchV2Enable = 'search_v2:enable',
|
||||
AdvancedSearchV2Enable = 'advanced_search_v2:enable',
|
||||
|
||||
|
||||
@@ -31,7 +31,6 @@ import {makeProfileLink} from '#/lib/routes/links'
|
||||
import {type NavigationProp} from '#/lib/routes/types'
|
||||
import {forceLTR} from '#/lib/strings/bidi'
|
||||
import {sanitizeDisplayName} from '#/lib/strings/display-names'
|
||||
import {sanitizeHandle} from '#/lib/strings/handles'
|
||||
import {niceDate} from '#/lib/strings/time'
|
||||
import {s} from '#/lib/styles'
|
||||
import {logger} from '#/logger'
|
||||
@@ -44,7 +43,7 @@ import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
|
||||
import {Post} from '#/view/com/post/Post'
|
||||
import {formatCount} from '#/view/com/util/numeric/format'
|
||||
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
|
||||
import {PreviewableUserAvatar, UserAvatar} from '#/view/com/util/UserAvatar'
|
||||
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
|
||||
import {atoms as a, platform, useTheme} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import {BellRinging_Filled_Corner0_Rounded as BellRingingIcon} from '#/components/icons/BellRinging'
|
||||
@@ -75,8 +74,6 @@ import * as bsky from '#/types/bsky'
|
||||
|
||||
const MAX_AUTHORS = 5
|
||||
|
||||
const EXPANDED_AUTHOR_EL_HEIGHT = 35
|
||||
|
||||
interface Author {
|
||||
profile: AppBskyActorDefs.ProfileView
|
||||
href: string
|
||||
@@ -98,9 +95,6 @@ let NotificationFeedItem = ({
|
||||
const t = useTheme()
|
||||
const {_, i18n} = useLingui()
|
||||
const ax = useAnalytics()
|
||||
const profileCardEnabled = ax.features.enabled(
|
||||
ax.features.NotificationsExpandedProfileCardEnable,
|
||||
)
|
||||
const [isAuthorsExpanded, setIsAuthorsExpanded] = useState<boolean>(false)
|
||||
const [isHoveringAuthorsList, setIsHoveringAuthorsList] = useState(false)
|
||||
const itemHref = useMemo(() => {
|
||||
@@ -633,9 +627,7 @@ let NotificationFeedItem = ({
|
||||
}}>
|
||||
{({hovered}) => (
|
||||
<>
|
||||
<SubtleHover
|
||||
hover={hovered && (!profileCardEnabled || !isHoveringAuthorsList)}
|
||||
/>
|
||||
<SubtleHover hover={hovered && !isHoveringAuthorsList} />
|
||||
<View style={[styles.layoutIcon, a.pr_sm]}>
|
||||
{/* TODO: Prevent conditional rendering and move toward composable
|
||||
notifications for clearer accessibility labeling */}
|
||||
@@ -645,16 +637,8 @@ let NotificationFeedItem = ({
|
||||
<ExpandListPressable
|
||||
hasMultipleAuthors={hasMultipleAuthors}
|
||||
onToggleAuthorsExpanded={onToggleAuthorsExpanded}
|
||||
onHoverIn={
|
||||
profileCardEnabled
|
||||
? () => setIsHoveringAuthorsList(true)
|
||||
: undefined
|
||||
}
|
||||
onHoverOut={
|
||||
profileCardEnabled
|
||||
? () => setIsHoveringAuthorsList(false)
|
||||
: undefined
|
||||
}>
|
||||
onHoverIn={() => setIsHoveringAuthorsList(true)}
|
||||
onHoverOut={() => setIsHoveringAuthorsList(false)}>
|
||||
<CondensedAuthorsList
|
||||
visible={!isAuthorsExpanded}
|
||||
authors={authors}
|
||||
@@ -1025,28 +1009,23 @@ function ExpandedAuthorsList({
|
||||
authors: Author[]
|
||||
moderationOpts: ModerationOpts
|
||||
}) {
|
||||
const ax = useAnalytics()
|
||||
const profileCardEnabled = ax.features.enabled(
|
||||
ax.features.NotificationsExpandedProfileCardEnable,
|
||||
)
|
||||
const isNativeFade = !IS_WEB && profileCardEnabled
|
||||
const heightInterp = useAnimatedValue(visible ? 1 : 0)
|
||||
const opacityInterp = useAnimatedValue(visible ? 1 : 0)
|
||||
const [measuredHeight, setMeasuredHeight] = useState(0)
|
||||
useEffect(() => {
|
||||
Animated.timing(isNativeFade ? opacityInterp : heightInterp, {
|
||||
Animated.timing(IS_WEB ? heightInterp : opacityInterp, {
|
||||
toValue: visible ? 1 : 0,
|
||||
duration: 200,
|
||||
useNativeDriver: isNativeFade,
|
||||
useNativeDriver: !IS_WEB,
|
||||
}).start()
|
||||
}, [heightInterp, opacityInterp, visible, isNativeFade])
|
||||
}, [heightInterp, opacityInterp, visible])
|
||||
const onInnerLayout = (e: LayoutChangeEvent) => {
|
||||
if (measuredHeight === 0) {
|
||||
setMeasuredHeight(e.nativeEvent.layout.height)
|
||||
}
|
||||
}
|
||||
|
||||
if (isNativeFade) {
|
||||
if (!IS_WEB) {
|
||||
return (
|
||||
<Animated.View style={{opacity: opacityInterp}}>
|
||||
{visible && (
|
||||
@@ -1065,31 +1044,22 @@ function ExpandedAuthorsList({
|
||||
)
|
||||
}
|
||||
|
||||
const targetHeight = profileCardEnabled
|
||||
? measuredHeight
|
||||
: authors.length * (EXPANDED_AUTHOR_EL_HEIGHT + 10) /*10=margin*/
|
||||
const heightStyle = {
|
||||
height: Animated.multiply(heightInterp, targetHeight),
|
||||
height: Animated.multiply(heightInterp, measuredHeight),
|
||||
opacity: Animated.divide(heightInterp, 1),
|
||||
}
|
||||
return (
|
||||
<Animated.View style={[a.overflow_hidden, heightStyle]}>
|
||||
{profileCardEnabled ? (
|
||||
<View onLayout={onInnerLayout} style={[a.pt_sm, a.pb_md]}>
|
||||
{authors.map((author, i) => (
|
||||
<ExpandedAuthorProfileCard
|
||||
key={author.profile.did}
|
||||
author={author}
|
||||
moderationOpts={moderationOpts}
|
||||
isLast={i === authors.length - 1}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
authors.map(author => (
|
||||
<ExpandedAuthorCard key={author.profile.did} author={author} />
|
||||
))
|
||||
)}
|
||||
<View onLayout={onInnerLayout} style={[a.pt_sm, a.pb_md]}>
|
||||
{authors.map((author, i) => (
|
||||
<ExpandedAuthorProfileCard
|
||||
key={author.profile.did}
|
||||
author={author}
|
||||
moderationOpts={moderationOpts}
|
||||
isLast={i === authors.length - 1}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
@@ -1134,65 +1104,6 @@ function ExpandedAuthorProfileCard({
|
||||
)
|
||||
}
|
||||
|
||||
function ExpandedAuthorCard({author}: {author: Author}) {
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
return (
|
||||
<Link
|
||||
label={author.profile.displayName || author.profile.handle}
|
||||
accessibilityHint={_(msg`Opens this profile`)}
|
||||
to={makeProfileLink({
|
||||
did: author.profile.did,
|
||||
handle: author.profile.handle,
|
||||
})}
|
||||
style={styles.expandedAuthor}>
|
||||
<View style={[a.mr_sm]}>
|
||||
<ProfileHoverCard did={author.profile.did}>
|
||||
<UserAvatar
|
||||
size={35}
|
||||
avatar={author.profile.avatar}
|
||||
moderation={author.moderation.ui('avatar')}
|
||||
type={author.profile.associated?.labeler ? 'labeler' : 'user'}
|
||||
/>
|
||||
</ProfileHoverCard>
|
||||
</View>
|
||||
<View style={[a.flex_1]}>
|
||||
<View style={[a.flex_row, a.align_end]}>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
emoji
|
||||
style={[
|
||||
a.text_md,
|
||||
a.font_semi_bold,
|
||||
a.leading_tight,
|
||||
{maxWidth: '70%'},
|
||||
]}>
|
||||
{sanitizeDisplayName(
|
||||
author.profile.displayName || author.profile.handle,
|
||||
)}
|
||||
</Text>
|
||||
<ProfileBadges
|
||||
profile={author.profile}
|
||||
size="md"
|
||||
style={[a.pl_2xs, a.self_center]}
|
||||
/>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={[
|
||||
a.pl_xs,
|
||||
a.text_md,
|
||||
a.leading_tight,
|
||||
a.flex_shrink,
|
||||
t.atoms.text_contrast_medium,
|
||||
]}>
|
||||
{sanitizeHandle(author.profile.handle, '@')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function AdditionalPostText({post}: {post?: AppBskyFeedDefs.PostView}) {
|
||||
const t = useTheme()
|
||||
if (
|
||||
@@ -1256,10 +1167,4 @@ const styles = StyleSheet.create({
|
||||
paddingTop: 10,
|
||||
paddingBottom: 6,
|
||||
},
|
||||
expandedAuthor: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
height: EXPANDED_AUTHOR_EL_HEIGHT,
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user