Add WIP 'report post' modal
This commit is contained in:
parent
36dc1c7525
commit
66a0f8e848
7 changed files with 211 additions and 2 deletions
54
src/view/com/util/forms/RadioButton.tsx
Normal file
54
src/view/com/util/forms/RadioButton.tsx
Normal file
|
@ -0,0 +1,54 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
||||
import {colors} from '../../../lib/styles'
|
||||
|
||||
export function RadioButton({
|
||||
label,
|
||||
isSelected,
|
||||
onPress,
|
||||
}: {
|
||||
label: string
|
||||
isSelected: boolean
|
||||
onPress: () => void
|
||||
}) {
|
||||
return (
|
||||
<TouchableOpacity style={styles.outer} onPress={onPress}>
|
||||
<View style={styles.circle}>
|
||||
{isSelected ? <View style={styles.circleFill} /> : undefined}
|
||||
</View>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 5,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.gray2,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
circle: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
padding: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.gray3,
|
||||
marginRight: 10,
|
||||
},
|
||||
circleFill: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
backgroundColor: colors.blue3,
|
||||
},
|
||||
label: {
|
||||
flex: 1,
|
||||
fontSize: 17,
|
||||
},
|
||||
})
|
34
src/view/com/util/forms/RadioGroup.tsx
Normal file
34
src/view/com/util/forms/RadioGroup.tsx
Normal file
|
@ -0,0 +1,34 @@
|
|||
import React, {useState} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {RadioButton} from './RadioButton'
|
||||
|
||||
export interface RadioGroupItem {
|
||||
label: string
|
||||
key: string
|
||||
}
|
||||
|
||||
export function RadioGroup({
|
||||
items,
|
||||
onSelect,
|
||||
}: {
|
||||
items: RadioGroupItem[]
|
||||
onSelect: (key: string) => void
|
||||
}) {
|
||||
const [selection, setSelection] = useState<string>('')
|
||||
const onSelectInner = (key: string) => {
|
||||
setSelection(key)
|
||||
onSelect(key)
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
{items.map(item => (
|
||||
<RadioButton
|
||||
key={item.key}
|
||||
label={item.label}
|
||||
isSelected={item.key === selection}
|
||||
onPress={() => onSelectInner(item.key)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue