155 lines
3.3 KiB
TypeScript
155 lines
3.3 KiB
TypeScript
import React, {useRef} from 'react'
|
|
import {
|
|
StyleProp,
|
|
StyleSheet,
|
|
TextStyle,
|
|
TouchableOpacity,
|
|
TouchableWithoutFeedback,
|
|
View,
|
|
ViewStyle,
|
|
} from 'react-native'
|
|
import {
|
|
FontAwesomeIcon,
|
|
FontAwesomeIconStyle,
|
|
} from '@fortawesome/react-native-fontawesome'
|
|
import RootSiblings from 'react-native-root-siblings'
|
|
import {Text} from './Text'
|
|
import {colors} from '../../lib/styles'
|
|
|
|
interface PickerItem {
|
|
value: string
|
|
label: string
|
|
}
|
|
|
|
interface PickerOpts {
|
|
style?: StyleProp<ViewStyle>
|
|
labelStyle?: StyleProp<TextStyle>
|
|
iconStyle?: FontAwesomeIconStyle
|
|
items: PickerItem[]
|
|
value: string
|
|
onChange: (value: string) => void
|
|
enabled?: boolean
|
|
}
|
|
|
|
const MENU_WIDTH = 200
|
|
|
|
export function Picker({
|
|
style,
|
|
labelStyle,
|
|
iconStyle,
|
|
items,
|
|
value,
|
|
onChange,
|
|
enabled,
|
|
}: PickerOpts) {
|
|
const ref = useRef<View>(null)
|
|
const valueLabel = items.find(item => item.value === value)?.label || value
|
|
const onPress = () => {
|
|
if (!enabled) {
|
|
return
|
|
}
|
|
ref.current?.measure(
|
|
(
|
|
_x: number,
|
|
_y: number,
|
|
width: number,
|
|
height: number,
|
|
pageX: number,
|
|
pageY: number,
|
|
) => {
|
|
createDropdownMenu(pageX, pageY + height, MENU_WIDTH, items, onChange)
|
|
},
|
|
)
|
|
}
|
|
return (
|
|
<TouchableWithoutFeedback onPress={onPress}>
|
|
<View style={[styles.outer, style]} ref={ref}>
|
|
<View style={styles.label}>
|
|
<Text style={labelStyle}>{valueLabel}</Text>
|
|
</View>
|
|
<FontAwesomeIcon icon="angle-down" style={[styles.icon, iconStyle]} />
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
)
|
|
}
|
|
|
|
function createDropdownMenu(
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
items: PickerItem[],
|
|
onChange: (value: string) => void,
|
|
): RootSiblings {
|
|
const onPressItem = (index: number) => {
|
|
sibling.destroy()
|
|
onChange(items[index].value)
|
|
}
|
|
const onOuterPress = () => sibling.destroy()
|
|
const sibling = new RootSiblings(
|
|
(
|
|
<>
|
|
<TouchableWithoutFeedback onPress={onOuterPress}>
|
|
<View style={styles.bg} />
|
|
</TouchableWithoutFeedback>
|
|
<View style={[styles.menu, {left: x, top: y, width}]}>
|
|
{items.map((item, index) => (
|
|
<TouchableOpacity
|
|
key={index}
|
|
style={[styles.menuItem, index !== 0 && styles.menuItemBorder]}
|
|
onPress={() => onPressItem(index)}>
|
|
<Text style={styles.menuItemLabel}>{item.label}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</>
|
|
),
|
|
)
|
|
return sibling
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
outer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
label: {
|
|
marginRight: 5,
|
|
},
|
|
icon: {},
|
|
bg: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
backgroundColor: '#000',
|
|
opacity: 0.1,
|
|
},
|
|
menu: {
|
|
position: 'absolute',
|
|
backgroundColor: '#fff',
|
|
borderRadius: 14,
|
|
opacity: 1,
|
|
paddingVertical: 6,
|
|
},
|
|
menuItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 6,
|
|
paddingLeft: 15,
|
|
paddingRight: 30,
|
|
},
|
|
menuItemBorder: {
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.gray2,
|
|
marginTop: 4,
|
|
paddingTop: 12,
|
|
},
|
|
menuItemIcon: {
|
|
marginLeft: 6,
|
|
marginRight: 8,
|
|
},
|
|
menuItemLabel: {
|
|
fontSize: 15,
|
|
},
|
|
})
|