SHARE
TWEET

Untitled

a guest Feb 24th, 2020 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react';
  2. import {View, ScrollView, Button} from 'react-native';
  3. import t from 'tcomb-form-native';
  4. import {_} from 'lodash';
  5.  
  6. import {
  7.   FloatingInput,
  8.   FloatingPicker,
  9.   FloatingDatePicker,
  10. } from '../../Components';
  11.  
  12. import styles from './FormStyle';
  13. import moment from 'moment';
  14. import 'moment/locale/id';
  15.  
  16. moment.locale('id');
  17.  
  18. const Form = t.form.Form;
  19. const stylesheet = _.cloneDeep(t.form.Form.stylesheet);
  20.  
  21. stylesheet.fieldset = {
  22.   flexDirection: 'row',
  23. };
  24.  
  25. const Gender = t.enums({
  26.   M: 'Laki-Laki',
  27.   F: 'Perempuan',
  28. });
  29.  
  30. const Relation = t.enums({
  31.   DS: 'Diri Sendiri',
  32.   SI: 'Suami Istri',
  33.   A: 'Anak',
  34. });
  35.  
  36. const PengajuanGroup1 = t.struct({
  37.   PangajuanName: t.String,
  38. });
  39.  
  40. const Tertangung1 = t.struct({
  41.   TertanggungName: t.String,
  42. });
  43.  
  44. const PengajuanGroup2 = t.struct({
  45.   PengajuanBirthDate: t.Date,
  46.   PengajuanJenisKelamin: Gender,
  47. });
  48.  
  49. const tertanggungDatePicker = t.struct({
  50.   tertanggungBirthDate: t.Date,
  51.   tertanggungJenisKelamin: Gender,
  52. });
  53.  
  54. const PengajuanGroup3 = t.struct({
  55.   PengajuanRelation: Relation,
  56. });
  57.  
  58. const optionsPengajuanGroup1 = () => ({
  59.   fields: {
  60.     PangajuanName: {
  61.       template: FloatingInput,
  62.       label: 'Nama',
  63.     },
  64.   },
  65. });
  66.  
  67. const optionsTertanggung1 = () => ({
  68.   fields: {
  69.     TertanggungName: {
  70.       template: FloatingInput,
  71.       label: 'Nama Tertanggung',
  72.     },
  73.   },
  74. });
  75.  
  76. const optionsPengajuanGroup2 = () => ({
  77.   fields: {
  78.     PengajuanBirthDate: {
  79.       label: 'Tanggal Lahir',
  80.       template: FloatingDatePicker,
  81.     },
  82.     PengajuanJenisKelamin: {
  83.       label: 'Jenis Kelamin',
  84.       template: FloatingPicker,
  85.     },
  86.   },
  87.   stylesheet: stylesheet,
  88. });
  89.  
  90. const optionsPengajuanGroup3 = () => ({
  91.   fields: {
  92.     PengajuanRelation: {
  93.       label: 'Relation',
  94.       template: FloatingPicker,
  95.     },
  96.   },
  97. });
  98.  
  99. const optionsTertanggungDatePicker = () => ({
  100.   fields: {
  101.     tertanggungBirthDate: {
  102.       label: 'Tanggal Lahir',
  103.       template: FloatingDatePicker,
  104.     },
  105.     tertanggungJenisKelamin: {
  106.       label: 'Jenis Kelamin',
  107.       template: FloatingPicker,
  108.     },
  109.   },
  110.   stylesheet: stylesheet,
  111. });
  112.  
  113. export default class CostumerProfile extends Component {
  114.   constructor(props) {
  115.     super(props);
  116.     this.state = {
  117.       pengajuanGroup1Form: {
  118.         PangajuanName: '',
  119.       },
  120.       pengajuanGroup2Form: {
  121.         PengajuanBirthDate: '',
  122.         PengajuanJenisKelamin: '',
  123.       },
  124.       pengajuanGroup3Form: {
  125.         PengajuanRelation: '',
  126.       },
  127.  
  128.       // tertanggung
  129.       tertanggung1Form: {
  130.         TertanggungName: '',
  131.       },
  132.       tertanggungDatePicker: {
  133.         tertanggungBirthDate: '',
  134.         tertanggungJenisKelamin: '',
  135.       },
  136.     };
  137.   }
  138.  
  139.   onPengajuanGroup1Change = pengajuanGroup1Form => {
  140.     // console.log('props group 1 ', pengajuanGroup1Form);
  141.     this.setState({
  142.       pengajuanGroup1Form,
  143.     });
  144.   };
  145.  
  146.   onPengajuanGroup2Change = pengajuanGroup2Form => {
  147.     console.log('props group 2 ', pengajuanGroup2Form);
  148.     this.setState({
  149.       pengajuanGroup2Form,
  150.     });
  151.   };
  152.  
  153.   onPengajuanGroup3Change = pengajuanGroup3Form => {
  154.     this.setState({
  155.       pengajuanGroup3Form,
  156.     });
  157.  
  158.     setTimeout(() => {
  159.       var Fortertanggung1Form = {
  160.         TertanggungName: this.state.pengajuanGroup1Form.PangajuanName,
  161.       };
  162.       var FortertanggungDatePicker = {
  163.         tertanggungBirthDate: this.state.pengajuanGroup2Form.PengajuanBirthDate,
  164.         tertanggungJenisKelamin: this.state.pengajuanGroup2Form
  165.           .PengajuanJenisKelamin,
  166.       };
  167.  
  168.       if (this.state.pengajuanGroup3Form.PengajuanRelation === 'DS') {
  169.         this.setState({
  170.           tertanggung1Form: Fortertanggung1Form,
  171.         });
  172.         this.setState({
  173.           tertanggungDatePicker: FortertanggungDatePicker,
  174.         });
  175.         setTimeout(() => {
  176.           console.log('edwh;jfh;wlfejh;wlj', this.state.tertanggungDatePicker);
  177.         }, 1000);
  178.       }
  179.     }, 1500);
  180.   };
  181.  
  182.   onTertanggungGroup4Change = tertanggung1Form => {
  183.     // console.log('props group 4 ', tertanggung1Form);
  184.     this.setState({
  185.       tertanggung1Form,
  186.     });
  187.   };
  188.  
  189.   onTertanggungDatePickerChange = tertanggungDatePicker => {
  190.     // console.log('props group 5 ', tertanggungDatePicker);
  191.     this.setState({
  192.       tertanggungDatePicker,
  193.     });
  194.   };
  195.  
  196.   render() {
  197.     console.log(
  198.       'this.state.tertanggungDatePicker',
  199.       this.state.tertanggungDatePicker,
  200.     );
  201.     return (
  202.       <ScrollView>
  203.         <View style={styles.div}>
  204.           <Form
  205.             refs="form"
  206.             type={PengajuanGroup1}
  207.             options={optionsPengajuanGroup1}
  208.             value={this.state.pengajuanGroup1Form}
  209.             onChange={this.onPengajuanGroup1Change}
  210.           />
  211.           <Form
  212.             refs="form"
  213.             type={PengajuanGroup2}
  214.             options={optionsPengajuanGroup2}
  215.             value={this.state.pengajuanGroup2Form}
  216.             onChange={this.onPengajuanGroup2Change}
  217.           />
  218.           <View style={{width: 200}}>
  219.             <Form
  220.               refs="form"
  221.               type={PengajuanGroup3}
  222.               options={optionsPengajuanGroup3}
  223.               value={this.state.pengajuanGroup3Form}
  224.               onChange={this.onPengajuanGroup3Change}
  225.             />
  226.           </View>
  227.           <Form
  228.             refs="form"
  229.             type={Tertangung1}
  230.             options={optionsTertanggung1}
  231.             value={this.state.tertanggung1Form}
  232.             onChange={this.onTertanggungGroup4Change}
  233.           />
  234.           <Form
  235.             refs="form"
  236.             type={tertanggungDatePicker}
  237.             options={optionsTertanggungDatePicker}
  238.             value={this.state.tertanggungDatePicker}
  239.             onChange={this.onTertanggungDatePickerChange}
  240.           />
  241.         </View>
  242.       </ScrollView>
  243.     );
  244.   }
  245. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top