Skip to content

C
clone_excelso
Commit ff222ec7 authored by Fred's avatar Fred
Browse files
Options

fix component picker untuk ios

parent 19778017
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 45 deletions
view/New_Register.js
View file @ ff222ec7
import React from 'react';
import { StyleSheet, View, Text, TextInput, Button, StatusBar, Picker, Alert, Image } from 'react-native';
import { StyleSheet, View, Text, TextInput, Button, StatusBar, Picker, Alert, Image, Platform } from 'react-native';
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import Axios from 'axios';
import { connect } from 'react-redux';
......@@ -8,6 +8,7 @@ import { BASE_URL_GET_ENUM, BASE_URL_REGISTER } from '../model/Base_Model';
import i18n from 'i18n-js';
import Spinner from 'react-native-loading-spinner-overlay';
// import { connect } from 'react-redux';
import RNPickerSelect from 'react-native-picker-select';
var date = [
......@@ -42,6 +43,7 @@ class NewRegister extends React.Component {
dob_month: "",
dob_day: "",
list_gender: [],
gender_list: [],
list_domicilie: [],
list_profesion: [],
list_dob: [],
......@@ -53,6 +55,28 @@ class NewRegister extends React.Component {
componentDidMount() {
this.load_data();
let date_list = []
for (let i = 1; i <= 31; i++) {
date_list.push({label: String(i), value: i});
}
let month_list = []
for (let i = 1; i <= 12; i++) {
const month_name = month[i];
month_list.push({label: month_name, value: i});
}
let year_list = []
let current_year = new Date().getFullYear();
let start_year = current_year - 65;
let end_year = current_year - 13;
for (let i = start_year; i <= end_year; i++) {
year_list.push({label: String(i), value: i});
}
this.setState({
date: date_list,
month: month_list,
year: year_list
})
}
load_data() {
......@@ -62,10 +86,18 @@ class NewRegister extends React.Component {
const list_gender = data_enum.gender
const list_profesion = data_enum.profession
const list_domicilie = data_enum.domicile
let gender_list = []
for (const key in list_gender) {
if (list_gender.hasOwnProperty(key)) {
const row = list_gender[key];
gender_list.push({label: row, value: key})
}
}
this.setState({
list_gender: list_gender,
list_profesion: list_profesion,
list_domicilie: list_domicilie,
gender_list: gender_list,
})
})
}
......@@ -308,58 +340,93 @@ class NewRegister extends React.Component {
</View>
<View style={styles.itemsRow}>
<View style={styles.items1}>
{/* <Text>{i18n.t('dob')}</Text> */}
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Date Of Birth</Text>
</View>
{Platform.OS === 'ios' ? (
<View style={styles.itemPicker}>
<View style={styles.itemPicker}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginLeft: 10 }}>
<RNPickerSelect onValueChange={(value) => this.setState({ dob_day: value })}
items={this.state.date}
placeholder={{ label: '-- Select --' }}
style={{inputIOSContainer: {paddingVertical: 10, alignItems: 'center'}}}
/>
</View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<RNPickerSelect onValueChange={(value) => this.setState({ dob_month: value })}
items={this.state.month}
placeholder={{ label: '-- Select --' }}
style={{inputIOSContainer: {paddingVertical: 10, alignItems: 'center'}}}
/>
</View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginRight: 10 }}>
<RNPickerSelect onValueChange={(value) => this.setState({ dob_year: value })}
items={this.state.year}
placeholder={{ label: '-- Select --' }}
style={{inputIOSContainer: {paddingVertical: 10, alignItems: 'center'}}}
/>
</View>
</View>
) : (
<View style={styles.itemPicker}>
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
selectedValue={this.state.dob_day}
style={{ height: 35, width: 100 }}
onValueChange={(itemValue, itemIndex) => this.setState({ dob_day: itemValue })}>
{date.map((itemValue, itemIndex) => {
return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />)
})}
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
selectedValue={this.state.dob_day}
style={{ height: 35, width: 100 }}
onValueChange={(itemValue, itemIndex) => this.setState({ dob_day: itemValue })}>
{date.map((itemValue, itemIndex) => {
return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />)
})}
</Picker>
</Picker>
</View>
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
selectedValue={this.state.dob_month}
style={{ height: 35, width: 100 }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ dob_month: itemValue })
}>
{month.map((itemValue, itemIndex) => {
return (<Picker.Item label={itemValue} value={itemIndex} key={itemIndex} />)
})}
</Picker>
</View>
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
selectedValue={this.state.dob_year}
style={{ height: 35, width: 100 }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ dob_year: itemValue })
}>
{year.map((itemValue, itemIndex) => {
return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />)
})}
</Picker>
</View>
</View>
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
selectedValue={this.state.dob_month}
style={{ height: 35, width: 100 }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ dob_month: itemValue })
}>
{month.map((itemValue, itemIndex) => {
return (<Picker.Item label={itemValue} value={itemIndex} key={itemIndex} />)
})}
</Picker>
</View>
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
selectedValue={this.state.dob_year}
style={{ height: 35, width: 100 }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ dob_year: itemValue })
}>
{year.map((itemValue, itemIndex) => {
return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />)
})}
</Picker>
</View>
</View>
)}
</View>
<View style={styles.itemsRow}>
<View style={styles.items1}>
{/* <Text>{i18n.t('gender')}</Text> */}
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Gender</Text>
</View>
{Platform.OS === 'ios' ? (
<View style={styles.pickerGender}>
<RNPickerSelect onValueChange={(value) => this.setState({ gender: value })}
items={this.state.gender_list}
placeholder={{ label: '-- Select --' }}
style={{inputIOSContainer: {paddingVertical: 10, alignItems: 'center'}}}
/>
</View>
) : (
<View style={styles.pickerGender}>
<Picker selectedValue={this.state.gender}
onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}>
......@@ -371,8 +438,8 @@ class NewRegister extends React.Component {
)
}
</Picker>
</View>
)}
</View>
<TouchableOpacity onPress={() => this.validate()}>
<View style={styles.button}>
......@@ -442,6 +509,8 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderRadius: 10,
height: 40,
justifyContent: 'space-between',
alignItems: 'center',
},
titleText: {
margin: 15,
......@@ -463,11 +532,10 @@ const styles = StyleSheet.create({
borderColor: 'gray',
borderWidth: 1,
borderRadius: 10,
padding: 10,
paddingLeft: 100,
// padding: 10,
marginLeft: 44,
marginRight: 44,
alignItems: 'stretch',
// alignItems: 'stretch',
justifyContent: 'center'
},
button: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment