1import { B } from '@expo/html-elements';
2import { Picker } from '@react-native-picker/picker';
3import * as React from 'react';
4import { StyleSheet, View, TextStyle, ViewStyle } from 'react-native';
5
6export default function TitledPicker({
7  style,
8  titleStyle,
9  title,
10  value,
11  setValue,
12  items,
13  disabled,
14}: {
15  style?: ViewStyle;
16  titleStyle?: TextStyle;
17  title?: string;
18  value: string;
19  items: { key: string; value: string }[];
20  disabled?: boolean;
21  setValue: (value: string) => void;
22}) {
23  const outputTitle = disabled ? `${title} (Disabled)` : title;
24
25  return (
26    <View style={[styles.container, style]}>
27      <B style={[styles.title, titleStyle]}>{outputTitle}</B>
28      <Picker
29        selectedValue={value}
30        enabled={!disabled}
31        onValueChange={value => setValue(`${value}`)}>
32        {items.map(({ key, value }) => (
33          <Picker.Item label={value} value={key} key={key} />
34        ))}
35      </Picker>
36    </View>
37  );
38}
39
40const styles = StyleSheet.create({
41  container: {
42    flexDirection: 'row',
43    alignItems: 'center',
44    marginVertical: 12,
45    justifyContent: 'space-between',
46  },
47  title: {
48    marginRight: 12,
49  },
50  text: {
51    marginVertical: 15,
52    maxWidth: '80%',
53    marginHorizontal: 10,
54  },
55});
56