7e31645e9a
* Add theming system * Add standard Button control and update RadioButtons * Unify radiobutton with design system * Update debug screen to have multiple views * Add ToggleButton * Update error controls to use design system * Add typography to <Text> element * Move DropdownButton into the design system * Clean out old code * Move Text into design system * Add 'inverted' color palette * Move LoadingPlaceholder into the design system
95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
import React, {useState} from 'react'
|
|
import {
|
|
ActivityIndicator,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native'
|
|
import LinearGradient from 'react-native-linear-gradient'
|
|
import {useStores} from '../../../state'
|
|
import {s, colors, gradients} from '../../lib/styles'
|
|
import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
|
|
import {Text} from '../util/text/Text'
|
|
import {ErrorMessage} from '../util/error/ErrorMessage'
|
|
|
|
const ITEMS: RadioGroupItem[] = [
|
|
{key: 'spam', label: 'Spam or excessive repeat posts'},
|
|
{key: 'abuse', label: 'Abusive, rude, or hateful'},
|
|
{key: 'illegal', label: 'Posts illegal content'},
|
|
]
|
|
|
|
export const snapPoints = ['50%']
|
|
|
|
export function Component({did}: {did: string}) {
|
|
const store = useStores()
|
|
const [isProcessing, setIsProcessing] = useState<boolean>(false)
|
|
const [error, setError] = useState<string>('')
|
|
const [issue, setIssue] = useState<string>('')
|
|
const onSelectIssue = (v: string) => setIssue(v)
|
|
const onPress = async () => {
|
|
setError('')
|
|
setIsProcessing(true)
|
|
try {
|
|
// TODO
|
|
store.shell.closeModal()
|
|
return
|
|
} catch (e: any) {
|
|
setError(e.toString())
|
|
setIsProcessing(false)
|
|
}
|
|
}
|
|
return (
|
|
<View style={[s.flex1, s.pl10, s.pr10]}>
|
|
<Text style={styles.title}>Report account</Text>
|
|
<Text style={styles.description}>
|
|
What is the issue with this account?
|
|
</Text>
|
|
<RadioGroup items={ITEMS} onSelect={onSelectIssue} />
|
|
{error ? (
|
|
<View style={s.mt10}>
|
|
<ErrorMessage message={error} />
|
|
</View>
|
|
) : undefined}
|
|
{isProcessing ? (
|
|
<View style={[styles.btn, s.mt10]}>
|
|
<ActivityIndicator />
|
|
</View>
|
|
) : issue ? (
|
|
<TouchableOpacity style={s.mt10} onPress={onPress}>
|
|
<LinearGradient
|
|
colors={[gradients.primary.start, gradients.primary.end]}
|
|
start={{x: 0, y: 0}}
|
|
end={{x: 1, y: 1}}
|
|
style={[styles.btn]}>
|
|
<Text style={[s.white, s.bold, s.f18]}>Send Report</Text>
|
|
</LinearGradient>
|
|
</TouchableOpacity>
|
|
) : undefined}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
title: {
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
fontSize: 24,
|
|
marginBottom: 12,
|
|
},
|
|
description: {
|
|
textAlign: 'center',
|
|
fontSize: 17,
|
|
paddingHorizontal: 22,
|
|
color: colors.gray5,
|
|
marginBottom: 10,
|
|
},
|
|
btn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '100%',
|
|
borderRadius: 32,
|
|
padding: 14,
|
|
backgroundColor: colors.gray1,
|
|
},
|
|
})
|