Samuel Newman
94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import {Trans, useLingui} from '@lingui/react/macro'
|
|
|
|
import {HITSLOP_20} from '#/lib/constants'
|
|
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Pressable} from '#/components/Pressable'
|
|
import * as Prompt from '#/components/Prompt'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
const positionStyles = {
|
|
'top-left': {
|
|
top: a.p_xs.padding,
|
|
left: a.p_xs.padding,
|
|
},
|
|
'top-right': {
|
|
top: a.p_xs.padding,
|
|
right: a.p_xs.padding,
|
|
},
|
|
'bottom-left': {
|
|
bottom: a.p_xs.padding,
|
|
left: a.p_xs.padding,
|
|
},
|
|
'bottom-right': {
|
|
bottom: a.p_xs.padding,
|
|
right: a.p_xs.padding,
|
|
},
|
|
}
|
|
|
|
export function AltBadgeWithDialog({
|
|
text,
|
|
position,
|
|
}: {
|
|
text: string
|
|
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
|
|
}) {
|
|
const t = useTheme()
|
|
const {t: l} = useLingui()
|
|
const large = useLargeAltBadgeEnabled()
|
|
const control = Prompt.usePromptControl()
|
|
|
|
const pos = position ? [a.absolute, positionStyles[position]] : {}
|
|
|
|
return (
|
|
<>
|
|
<Pressable
|
|
testID="altBadgeWithDialogButton"
|
|
accessibilityRole="button"
|
|
accessibilityLabel={l`Show alt text`}
|
|
accessibilityHint=""
|
|
hitSlop={HITSLOP_20}
|
|
onPress={control.open}
|
|
style={({pressed, hovered}) => [
|
|
a.justify_center,
|
|
a.rounded_sm,
|
|
a.p_xs,
|
|
a.z_10,
|
|
t.atoms.bg_contrast_25,
|
|
large && {
|
|
padding: 6,
|
|
},
|
|
{
|
|
opacity: 0.8,
|
|
},
|
|
pos,
|
|
hovered || pressed
|
|
? [
|
|
{
|
|
opacity: 1,
|
|
},
|
|
]
|
|
: [],
|
|
]}>
|
|
<Text
|
|
accessible={false}
|
|
style={[a.font_bold, large ? a.text_xs : {fontSize: 8}]}>
|
|
<Trans>ALT</Trans>
|
|
</Text>
|
|
</Pressable>
|
|
|
|
<Prompt.Outer control={control}>
|
|
<Prompt.Content>
|
|
<Prompt.TitleText>
|
|
<Trans>Alt Text</Trans>
|
|
</Prompt.TitleText>
|
|
<Prompt.DescriptionText selectable>{text}</Prompt.DescriptionText>
|
|
</Prompt.Content>
|
|
<Prompt.Actions>
|
|
<Prompt.Cancel cta={l`Close`} />
|
|
</Prompt.Actions>
|
|
</Prompt.Outer>
|
|
</>
|
|
)
|
|
}
|