Merge remote-tracking branch 'origin/main' into app-2273
* origin/main: (38 commits) Mount message dialogs once at the list level (#10435) Fix alt text selection in lightbox on Android (and iOS) (#10698) Mention default `<Text>` style in CLAUDE.md (#10705) Use square icons for labellers in Automation Label preview card (#10701) [ALF] Set text to `leading_snug` by default (#10627) Nightly source-language update Transpile `@atproto/api` package for older browser support (#10700) Add iOS peek long-press context menu for image embeds (#10300) Revert "[ALG-96] Don't fall back to search for onboarding user suggestions (#10680)" (#10699) fix blur on image alt text background (#10658) Create screen for managing chat requests (#10635) Don't show Suggested heading if there are no suggestions (#10695) Prefer opengraph image, fall back to Standard Site coverImage (#10694) Create logged-out view for group chat invites (#10598) Bump actions/create-github-app-token from 1 to 3 (#10691) Bump marocchino/sticky-pull-request-comment from 2 to 3 (#10692) Bump slackapi/slack-github-action from 2.1.1 to 3.0.3 (#10693) ci: add dependabot config with 7-day cooldown (#10475) Remove image upload flags (#10687) [ALG-96] Don't fall back to search for onboarding user suggestions (#10680) ... # Conflicts: # src/components/Lightbox/chrome/Footer.tsx
This commit is contained in:
Eric Bailey
@@ -1,18 +1,13 @@
|
||||
import {useRef} from 'react'
|
||||
import {
|
||||
LayoutAnimation,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {LayoutAnimation, ScrollView, StyleSheet, View} from 'react-native'
|
||||
import {
|
||||
useSafeAreaFrame,
|
||||
useSafeAreaInsets,
|
||||
} from 'react-native-safe-area-context'
|
||||
import {BlurView} from 'expo-blur'
|
||||
import {useLingui} from '@lingui/react/macro'
|
||||
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {atoms as a, platform, useTheme} from '#/alf'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
type Props = {
|
||||
@@ -46,37 +41,66 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
|
||||
{paddingBottom: insets.bottom + 8},
|
||||
]}>
|
||||
<View style={[a.mx_md, styles.altWrap]}>
|
||||
<ScrollView
|
||||
style={{maxHeight}}
|
||||
scrollEnabled={isAltExpanded}
|
||||
onMomentumScrollBegin={() => {
|
||||
isMomentumScrolling.current = true
|
||||
}}
|
||||
onMomentumScrollEnd={() => {
|
||||
isMomentumScrolling.current = false
|
||||
}}
|
||||
contentContainerStyle={[a.px_md, a.py_sm]}>
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={l`Expand alt text`}
|
||||
accessibilityHint=""
|
||||
onPress={() => {
|
||||
if (isMomentumScrolling.current) return
|
||||
LayoutAnimation.configureNext({
|
||||
duration: 450,
|
||||
update: {type: 'spring', springDamping: 1},
|
||||
})
|
||||
onToggleAltExpanded()
|
||||
}}>
|
||||
<Text
|
||||
emoji
|
||||
selectable
|
||||
style={[a.text_sm, {color: t.palette.white}]}
|
||||
numberOfLines={isAltExpanded ? undefined : 3}>
|
||||
{altText}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</ScrollView>
|
||||
<BlurView
|
||||
intensity={16}
|
||||
tint="dark"
|
||||
style={[
|
||||
// Tint kept over the blur so dense, text-heavy images stay
|
||||
// readable. On Android the blur falls back to a flat overlay, so
|
||||
// bump the opacity to keep the contrast the real blur provides
|
||||
// elsewhere.
|
||||
platform({
|
||||
ios: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
|
||||
android: {backgroundColor: 'rgba(0, 0, 0, 0.7)'},
|
||||
}),
|
||||
]}>
|
||||
<ScrollView
|
||||
style={{maxHeight}}
|
||||
scrollEnabled={isAltExpanded}
|
||||
onMomentumScrollBegin={() => {
|
||||
isMomentumScrolling.current = true
|
||||
}}
|
||||
onMomentumScrollEnd={() => {
|
||||
isMomentumScrolling.current = false
|
||||
}}
|
||||
contentContainerStyle={[a.px_md, a.py_sm]}>
|
||||
<View
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={l`Expand alt text`}
|
||||
accessibilityHint="">
|
||||
{/*
|
||||
* The press handlers must live on the Text itself, not on a
|
||||
* wrapping Pressable. Text selection is driven by the platform's
|
||||
* native text view long-press (RN Text on Android, UITextView on
|
||||
* iOS). A parent touchable consumes that long-press before the
|
||||
* selectable Text can begin a selection - on Android this prevents
|
||||
* selection entirely. Keeping onPress/onLongPress on the Text lets
|
||||
* the same native node own both the tap-to-expand and the
|
||||
* long-press-to-select. The empty onLongPress is intentional: it
|
||||
* reserves the long-press for the OS selection gesture instead of
|
||||
* firing the expand toggle. RN exposes no API to arbitrate tap vs
|
||||
* native selection on a single node, so this is the supported
|
||||
* workaround, and it behaves consistently on both platforms.
|
||||
*/}
|
||||
<Text
|
||||
emoji
|
||||
selectable
|
||||
style={[a.text_sm, {color: t.palette.white}]}
|
||||
numberOfLines={isAltExpanded ? undefined : 3}
|
||||
onPress={() => {
|
||||
if (isMomentumScrolling.current) return
|
||||
LayoutAnimation.configureNext({
|
||||
duration: 450,
|
||||
update: {type: 'spring', springDamping: 1},
|
||||
})
|
||||
onToggleAltExpanded()
|
||||
}}
|
||||
onLongPress={() => {}}>
|
||||
{altText}
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</BlurView>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
@@ -84,7 +108,6 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
altWrap: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.45)',
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user