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