-
Notifications
You must be signed in to change notification settings - Fork 69
/
index.js
103 lines (101 loc) · 3.38 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text } from 'native-base';
import { Platform, Picker, TouchableOpacity } from 'react-native';
import Panel from '../../components/panel';
import styles from './../../styles';
const Item = Picker.Item;
export default class PickerField extends Component {
static propTypes = {
attributes: PropTypes.object,
theme: PropTypes.object,
updateValue: PropTypes.func,
ErrorComponent: PropTypes.func,
}
handleChange(value) {
const attributes = this.props.attributes;
this.props.updateValue(attributes.name, attributes.options[value]);
}
render() {
const { theme, attributes, ErrorComponent } = this.props;
const isValueValid = attributes.options.indexOf(attributes.value) > -1;
const pickerValue = attributes.options.indexOf(attributes.value).toString();
if (Platform.OS !== 'ios') {
return (
<View
style={{...styles.pickerMainAndroid, ...{
backgroundColor: theme.pickerBgColor,
borderBottomColor: theme.inputBorderColor,
borderBottomWidth: theme.borderWidth,
}}}
>
<View style={{ flex: 7 }}>
<Text style={{ color: theme.inputColorPlaceholder }}>{attributes.label}</Text>
</View>
<View style={{ flex: 3 }}>
<Picker
style={{ padding: 2 }}
textStyle={{ color: theme.pickerColorSelected }}
iosHeader="Select one"
mode={attributes.mode}
selectedValue={pickerValue}
onValueChange={value => this.handleChange(value)}
>{
attributes.options.map((item, index) => (
<Item key={index} label={item} value={`${index}`} />
))
}
</Picker>
</View>
<ErrorComponent {...{ attributes, theme }} />
</View>
);
}
return (
<View
style={Object.assign(styles.pickerMainIOS, {
backgroundColor: theme.pickerBgColor,
borderBottomColor: theme.inputBorderColor,
borderBottomWidth: theme.borderWidth,
})}
>
<TouchableOpacity
onPress={() => this.panel.toggle()}
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
}}
>
<Text style={{ color: theme.inputColorPlaceholder }}>
{attributes.label}
</Text>
<Text style={{ color: theme.inputColorPlaceholder }}>
{isValueValid ? attributes.value : 'None'}
</Text>
</TouchableOpacity>
<ErrorComponent {...{ attributes, theme }} />
<View style={{ flex: 1 }}>
<Panel
ref={(c) => { this.panel = c; }}
>
<Picker
style={{ padding: 2 }}
textStyle={{ color: theme.pickerColorSelected }}
mode={attributes.mode}
selectedValue={pickerValue}
onValueChange={value => this.handleChange(value)}
>{
attributes.options.map((item, index) => (
<Item key={index} label={item} value={`${index}`} />
))
}
</Picker>
</Panel>
</View>
</View>
);
}
}