83959c595d
* React Native accessibility * First round of changes * Latest update * Checkpoint * Wrap up * Lint * Remove unhelpful image hints * Fix navigation * Fix rebase and lint * Mitigate an known issue with the password entry in login * Fix composer dismiss * Remove focus on input elements for web * Remove i and npm * pls work * Remove stray declaration * Regenerate yarn.lock --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
StyleProp,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
ViewStyle,
|
|
} from 'react-native'
|
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {Link} from '../Link'
|
|
import {Text} from '../text/Text'
|
|
import {addStyle} from 'lib/styles'
|
|
import {ModerationBehaviorCode, ModerationBehavior} from 'lib/labeling/types'
|
|
|
|
export function PostHider({
|
|
testID,
|
|
href,
|
|
moderation,
|
|
style,
|
|
children,
|
|
}: React.PropsWithChildren<{
|
|
testID?: string
|
|
href?: string
|
|
moderation: ModerationBehavior
|
|
style: StyleProp<ViewStyle>
|
|
}>) {
|
|
const pal = usePalette('default')
|
|
const [override, setOverride] = React.useState(false)
|
|
const bg = override ? pal.viewLight : pal.view
|
|
|
|
if (moderation.behavior === ModerationBehaviorCode.Hide) {
|
|
return null
|
|
}
|
|
|
|
if (moderation.behavior === ModerationBehaviorCode.Warn) {
|
|
return (
|
|
<>
|
|
<View style={[styles.description, bg, pal.border]}>
|
|
<FontAwesomeIcon
|
|
icon={['far', 'eye-slash']}
|
|
style={[styles.icon, pal.text]}
|
|
/>
|
|
<Text type="md" style={pal.textLight}>
|
|
{moderation.reason || 'Content warning'}
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.showBtn}
|
|
onPress={() => setOverride(v => !v)}
|
|
accessibilityRole="button">
|
|
<Text type="md" style={pal.link}>
|
|
{override ? 'Hide' : 'Show'} post
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{override && (
|
|
<View style={[styles.childrenContainer, pal.border, bg]}>
|
|
<Link
|
|
testID={testID}
|
|
style={addStyle(style, styles.child)}
|
|
href={href}
|
|
noFeedback>
|
|
{children}
|
|
</Link>
|
|
</View>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
// NOTE: any further label enforcement should occur in ContentContainer
|
|
return (
|
|
<Link testID={testID} style={style} href={href} noFeedback>
|
|
{children}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
description: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 14,
|
|
paddingHorizontal: 18,
|
|
borderTopWidth: 1,
|
|
},
|
|
icon: {
|
|
marginRight: 10,
|
|
},
|
|
showBtn: {
|
|
marginLeft: 'auto',
|
|
},
|
|
childrenContainer: {
|
|
paddingHorizontal: 6,
|
|
paddingBottom: 6,
|
|
},
|
|
child: {
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
},
|
|
})
|