Advertisement
Guest User

Untitled

a guest
Jan 20th, 2019
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import {
  3.     View,
  4.     Platform,
  5.     Image,
  6.     Keyboard,
  7.     TouchableOpacity,
  8.     Alert,
  9.     Text,
  10.     ScrollView,
  11.     StatusBar,
  12.     TextInput,
  13. } from 'react-native';
  14. import { SetTopBar } from '../../Component/TopBar';
  15. import { SetBottomButton } from '../../Component/BottomButton';
  16. import { API } from '../../API';
  17. import { RealmData, RealmDataName } from '../../RealmData';
  18. import UI_Modal_Loading from '../../Modal/Loading';
  19.  
  20. import * as JsSearch from 'js-search';
  21.  
  22. const homePath = "../../";
  23.  
  24. class SetSearch extends React.Component {
  25.     state = {
  26.         value: "",
  27.     }
  28.  
  29.     render() {
  30.         return (
  31.             <View>
  32.                 <Text
  33.                     style = {{
  34.                         fontSize: 14,
  35.                         fontWeight: '700',
  36.                         color: this.props.disable ? 'lightgray' : 'gray',
  37.                         marginBottom: 7.5,
  38.                     }}
  39.                 >
  40.                     {this.props.title}
  41.                 </Text>
  42.  
  43.                 <View
  44.                     style= {{
  45.                         flexDirection: 'row',
  46.                         borderBottomWidth: 1,
  47.                         borderColor: this.props.disable ? 'lightgray' : 'gray',
  48.                         paddingBottom: 7.5,
  49.                     }}
  50.                 >
  51.                     <TextInput
  52.                         style = {{
  53.                             padding: 0,
  54.                             flex: 1,
  55.                             marginBottom: -7.5,
  56.                             fontSize: 18,
  57.                             color: this.props.value == '' ? (this.props.disable ? 'lightgray' : 'gray') : 'black',
  58.                         }}
  59.                         editable = {!this.props.disable}
  60.                         onFocus = {() => this.props.Update_Search(this.state.value)}
  61.                         onBlur = {() => this.props.Update_Search(this.state.value, true)}
  62.                         placeholder = {this.props.placeholder}
  63.                         value = {this.state.value}
  64.                         onChangeText = {value => {
  65.                             this.setState({value: value});
  66.                             this.props.Update_Search(value);
  67.                         }}
  68.                     />
  69.  
  70.                     {/* <TouchableOpacity
  71.                         style = {{
  72.                             marginHorizontal: 2.5,
  73.                         }}
  74.                         disabled = {this.props.disable}
  75.                         onPress= {() => {
  76.                             if(this.props.action != undefined) {
  77.                                 this.props.action()
  78.                             }
  79.                         }}
  80.                     >
  81.                         <Image
  82.                             style= {{
  83.                                 width: 20,
  84.                                 height: 20,
  85.                                 opacity: disable ? 0.5 : 1,
  86.                             }}
  87.                             source= {require(homePath + 'Resource/gray_search.png')}
  88.                             resizeMode= 'contain'
  89.                         />
  90.                     </TouchableOpacity> */}
  91.                 </View>
  92.             </View>
  93.         )
  94.     }
  95. }
  96.  
  97. export default class UI_Breakdown_StartTimeline extends React.Component {
  98.     state = {
  99.         cabang: '',
  100.         cabangTerpilih: '',
  101.         alat: '',
  102.         alatTerpilih: '',
  103.         operatorTerpilihName: '',
  104.         operatorTerpilih: '',
  105.         pilihanCabang: [],
  106.         pilihanAlat: [],
  107.         pilihanOperator: [],
  108.         loadingTimeline: false,
  109.         prv_id: '',
  110.     }
  111.  
  112.     setListener(active) {
  113.         if(active) {
  114.             this.subs = [
  115.                 this.props.navigation.addListener('didFocus', () => this.Update()),
  116.             ];
  117.         } else {
  118.             this.subs.forEach(sub => {
  119.                 sub.remove();
  120.             });
  121.         }
  122.     }
  123.  
  124.     Update() {
  125.         if(require(homePath + 'Helper/AlatQRScanner').alat != "") {
  126.             akses = false;
  127.  
  128.             for(let i = 0; i < this.state.pilihanAlat.length; i++) {
  129.                 if(require(homePath + 'Helper/AlatQRScanner').alat == this.state.pilihanAlat[i].id) {
  130.                     this.setState({
  131.                         alatTerpilih: this.state.pilihanAlat[i].id,
  132.                         alat: this.state.pilihanAlat[i].name,
  133.                     });
  134.  
  135.                     if(this.state.prv_id != "6") {
  136.                         this.setState({
  137.                             pilihanOperator: [],
  138.                             operatorTerpilih: '',
  139.                             operatorTerpilihName: '',
  140.                         });
  141.  
  142.                         this.MuatOperator();
  143.                     }
  144.  
  145.                     akses = true;
  146.  
  147.                     break;
  148.                 }
  149.             }
  150.  
  151.             if(akses) {
  152.                 Alert.alert("Alat Ditemukan", require(homePath + 'Helper/AlatQRScanner').alat + " Berhasil Dipilih!");
  153.             } else {
  154.                 Alert.alert("Tidak Ada Akses Alat", "Anda Tidak Mempunyai Akses Pada " + require(homePath + 'Helper/AlatQRScanner').alat);
  155.             }
  156.  
  157.             require(homePath + 'Helper/AlatQRScanner').alat = "";
  158.         }
  159.     }
  160.  
  161.     componentDidMount() {
  162.         this.setListener(true);
  163.  
  164.         this.MuatCabang()
  165.  
  166.         Realm.open(RealmData.User).then(realm => {
  167.             this.setState({prv_id: realm.objects(RealmDataName.User)[0].prv_id})
  168.         })
  169.     }
  170.     componentWillUnmount() {
  171.         this.setListener(false);
  172.     }
  173.  
  174.     MuatCabang() {
  175.         Realm.open(RealmData.User).then(realm => {
  176.             fetch(
  177.                 API.Breakdown_Master_Cabang,
  178.                 API.Breakdown_Master_Cabang__Send(
  179.                     realm.objects(RealmDataName.User)[0].id
  180.                 )
  181.             )
  182.             .then(response => response.text())
  183.             .then(responseText => {
  184.                 if(responseText[0] != "<") {
  185.                     if(JSON.parse(responseText).api_status == "1") {
  186.                         pilihanCabang = []
  187.  
  188.                         for(let i = 0; i < JSON.parse(responseText).cabang.length; i++) {
  189.                             pilihanCabang.push({
  190.                                 id: JSON.parse(responseText).cabang[i].kd_cabang,
  191.                                 name: JSON.parse(responseText).cabang[i].nama_regional + " - " + JSON.parse(responseText).cabang[i].nama_cabang,
  192.                             })
  193.                         }
  194.  
  195.                         this.setState({pilihanCabang: pilihanCabang})
  196.                     }
  197.                 }
  198.             })
  199.         })
  200.     }
  201.  
  202.     MuatAlat() {
  203.         Realm.open(RealmData.User).then(realm => {
  204.             fetch(
  205.                 API.Breakdown_Master_Alat,
  206.                 API.PM_Master_Alat__Send(
  207.                     realm.objects(RealmDataName.User)[0].id,
  208.                     this.state.cabangTerpilih
  209.                 )
  210.             )
  211.             .then(response => response.text())
  212.             .then(responseText => {
  213.                 if(responseText[0] != "<") {
  214.                     if(JSON.parse(responseText).api_status == "1") {
  215.                         pilihanAlat = []
  216.  
  217.                         for(let i = 0; i < JSON.parse(responseText).alat.length; i++) {
  218.                             pilihanAlat.push({
  219.                                 id: JSON.parse(responseText).alat[i].kd_alat,
  220.                                 name: JSON.parse(responseText).alat[i].nama + " - " + JSON.parse(responseText).alat[i].kd_alat,
  221.                             })
  222.                         }
  223.  
  224.                         this.setState({pilihanAlat: pilihanAlat});
  225.                     }
  226.                 }
  227.             })
  228.         })
  229.     }
  230.  
  231.     MuatOperator() {
  232.         Realm.open(RealmData.User).then(realm => {
  233.             fetch(
  234.                 API.Breakdown_Master_Operator,
  235.                 API.Breakdown_Master_Operator__Send(
  236.                     realm.objects(RealmDataName.User)[0].id,
  237.                     this.state.cabangTerpilih,
  238.                     this.state.alatTerpilih,
  239.                 )
  240.             )
  241.             .then(response => response.text())
  242.             .then(responseText => {
  243.                 if(responseText[0] != "<") {
  244.                     if(JSON.parse(responseText).api_status == "1") {
  245.                         pilihanOperator = [];
  246.  
  247.                         for(let i = 0; i < JSON.parse(responseText).operator.length; i++) {
  248.                             pilihanOperator.push({
  249.                                 id: JSON.parse(responseText).operator[i].usr_id,
  250.                                 name: JSON.parse(responseText).operator[i].full_name,
  251.                             })
  252.                         }
  253.  
  254.                         this.setState({pilihanOperator: pilihanOperator});
  255.                     }
  256.                 }
  257.             })
  258.         })
  259.     }
  260.  
  261.     render() {
  262.         return (
  263.             <View
  264.                 style= {{
  265.                     flex: 1,
  266.                     backgroundColor: 'white',
  267.                 }}
  268.             >
  269.                 <View
  270.                     style= {{
  271.                         height: Platform.OS == 'ios' ? 95 : 75,
  272.                         backgroundColor: 'black',
  273.                     }}
  274.                 >
  275.                     {Platform.OS == 'ios' ?
  276.                         <View>
  277.                             <StatusBar
  278.                                 barStyle= 'light-content'
  279.                             />
  280.  
  281.                             <View
  282.                                 style= {{
  283.                                     height: 20,
  284.                                     backgroundColor: 'black',
  285.                                 }}
  286.                             />
  287.                         </View>
  288.                         :
  289.                         null
  290.                     }
  291.  
  292.                     {SetTopBar('Input Breakdown', () => this.props.navigation.pop())}
  293.                 </View>
  294.  
  295.                 <View
  296.                     style= {{
  297.                         flex: 1,
  298.                         padding: 20,
  299.                         flexDirection: "column-reverse",
  300.                         justifyContent: "flex-end",
  301.                     }}
  302.                 >  
  303.                     <Autocomplete_List
  304.                         top = {222.5}
  305.                         ref = {refs => this.autocomplete_list_operator = refs}
  306.                         pick_auto_complete = {(item) => {
  307.                             this.set_search_operator.setState({value: item.name});
  308.  
  309.                             Keyboard.dismiss();
  310.                         }}
  311.                     />
  312.  
  313.                     {this.state.prv_id != "6" ?
  314.                         <View
  315.                             style= {{
  316.                                 opacity: this.state.pilihanOperator.length > 0 ? 1 : 0.35,
  317.                                 marginTop: 20
  318.                             }}
  319.                         >
  320.                             <SetSearch
  321.                                 ref = {refs => this.set_search_operator = refs}
  322.                                 title = "Operator"
  323.                                 action = {() => this.props.navigation.push(
  324.                                     "UI_Breakdown_Search",
  325.                                     {
  326.                                         title: "Operator",
  327.                                         list: this.state.pilihanOperator,
  328.                                         // validateAction: (item) => {
  329.                                         //     this.setState({
  330.                                         //         operatorTerpilih: item.id,
  331.                                         //         operatorTerpilihName: item.name
  332.                                         //     });
  333.    
  334.                                         //     if(this.state.prv_id != "6") {
  335.                                         //         this.MuatOperator();
  336.                                         //     }
  337.                                         // }
  338.                                     }
  339.                                 )}
  340.                                 Update_Search = {(value, close) => {
  341.                                     this.Update_Operator_Search(value, close);
  342.                                 }}
  343.                                 value = {this.state.operatorTerpilihName}
  344.                                 placeholder = "Pilih Operator"
  345.                                 disable = {this.state.pilihanOperator.length == 0}
  346.                             />
  347.                         </View>
  348.                         :
  349.                         null
  350.                     }
  351.  
  352.                     <Autocomplete_List
  353.                         top = {147.5}
  354.                         right = {50}
  355.                         ref = {refs => this.autocomplete_list_alat = refs}
  356.                         pick_auto_complete = {(item) => {
  357.                             if(this.set_search_alat.state.value != item.name) {
  358.                                 this.set_search_alat.setState({value: item.name});
  359.    
  360.                                 this.setState({
  361.                                     alat: item.name,
  362.                                     alatTerpilih: item.id,
  363.                                     pilihanOperator: [],
  364.                                     operatorTerpilih: '',
  365.                                     operatorTerpilihName: '',
  366.                                 });
  367.  
  368.                                 this.MuatOperator();
  369.                             }
  370.  
  371.                             Keyboard.dismiss();
  372.                         }}
  373.                     />
  374.  
  375.                     <View
  376.                         style= {{
  377.                             flexDirection: "row",
  378.                             width: "100%",
  379.                             opacity: this.state.pilihanAlat.length > 0 ? 1 : 0.35,
  380.                             marginTop: 20,
  381.                         }}
  382.                     >
  383.                         <View
  384.                             style = {{
  385.                                 flex: 1,
  386.                             }}
  387.                         >
  388.                             <SetSearch
  389.                                 ref = {refs => this.set_search_alat = refs}
  390.                                 Update_Search = {(value, close) => {
  391.                                     this.Update_Alat_Search(value, close);
  392.                                 }}
  393.                                 title = "Alat"
  394.                                 action = {() => this.props.navigation.push(
  395.                                     "UI_Breakdown_Search",
  396.                                     {
  397.                                         title: "Alat",
  398.                                         list: this.state.pilihanAlat,
  399.                                         // validateAction: (item) => {
  400.                                         //     this.setState({
  401.                                         //         alatTerpilih: item.id,
  402.                                         //         alat: item.name,
  403.                                         //     });
  404.  
  405.                                         //     if(this.state.prv_id != "6") {
  406.                                         //         this.MuatOperator();
  407.  
  408.                                         //         this.setState({
  409.                                         //             pilihanOperator: [],
  410.                                         //             operatorTerpilih: '',
  411.                                         //             operatorTerpilihName: '',
  412.                                         //         });
  413.                                         //     }
  414.                                         // }
  415.                                     }
  416.                                 )}
  417.                                 value = {this.state.alat}
  418.                                 placeholder = "Pilih Alat"
  419.                                 disable = {this.state.pilihanAlat.length == 0}
  420.                             />
  421.                         </View>
  422.  
  423.                         <TouchableOpacity
  424.                             style= {{
  425.                                 bottom: Platform.OS == "ios" ? -15 : -20,
  426.                                 marginLeft: 10,
  427.                             }}
  428.                             disabled = {this.state.pilihanAlat.length == 0}
  429.                             onPress = {() => this.props.navigation.push("UI_AlatQRScanner")}
  430.                         >
  431.                             <Image
  432.                                 style = {{
  433.                                     width: 40,
  434.                                     height: 40,
  435.                                 }}
  436.                                 resizeMode = "contain"
  437.                                 source = {require('../../Resource/qr-code.png')}
  438.                             />
  439.                         </TouchableOpacity>
  440.                     </View>
  441.  
  442.                     <Autocomplete_List
  443.                         top = {72.5}
  444.                         ref = {refs => this.autocomplete_list_cabang = refs}
  445.                         pick_auto_complete = {(item) => {
  446.                             if(this.set_search_cabang.state.value != item.name) {
  447.                                 this.set_search_cabang.setState({value: item.name});
  448.                                 this.set_search_alat.setState({value: ""});
  449.  
  450.                                 this.setState({
  451.                                     cabang: item.name,
  452.                                     cabangTerpilih: item.id.toString(),
  453.                                     pilihanAlat: [],
  454.                                     alat: '',
  455.                                     alatTerpilih: '',
  456.                                     pilihanOperator: [],
  457.                                     operatorTerpilih: '',
  458.                                     operatorTerpilihName: '',
  459.                                 });
  460.  
  461.                                 this.MuatAlat();
  462.                             }
  463.  
  464.                             Keyboard.dismiss();
  465.                         }}
  466.                     />
  467.  
  468.                     <View
  469.                         style= {{
  470.                             opacity: this.state.pilihanCabang.length > 0 ? 1 : 0.35,
  471.                         }}
  472.                     >
  473.                         <SetSearch
  474.                             title = "Cabang"
  475.                             ref = {refs => this.set_search_cabang = refs}
  476.                             Update_Search = {(value, close) => {
  477.                                 this.Update_Cabang_Search(value, close);
  478.                             }}
  479.                             action = {() => this.props.navigation.push(
  480.                                 "UI_Breakdown_Search",
  481.                                 {
  482.                                     title: "Cabang",
  483.                                     list: this.state.pilihanCabang,
  484.                                     // validateAction: (item) => {
  485.                                     //     this.setState({
  486.                                     //         cabang: item.name,
  487.                                     //         cabangTerpilih: item.id.toString(),
  488.                                     //     });
  489.  
  490.                                     //     this.MuatAlat();
  491.  
  492.                                     //     this.setState({
  493.                                     //         pilihanAlat: [],
  494.                                     //         alat: '',
  495.                                     //         alatTerpilih: '',
  496.                                     //         pilihanOperator: [],
  497.                                     //         operatorTerpilih: '',
  498.                                     //         operatorTerpilihName: '',
  499.                                     //     });
  500.                                     // }
  501.                                 }
  502.                             )}
  503.                             value = {this.state.cabang}
  504.                             placeholder = "Pilih Cabang"
  505.                             disable = {this.state.pilihanCabang.length == 0}
  506.                         />
  507.                     </View>
  508.                 </View>
  509.  
  510.                 {SetBottomButton("Check Breakdown", () => this.CekTimeline(), this.state.cabangTerpilih != "" && this.state.alatTerpilih != "" && (this.state.prv_id == "6" || this.state.operatorTerpilih != "") ? "black" : "gray", this.state.cabangTerpilih == "" || this.state.alatTerpilih == "" || (this.state.prv_id != "6" && this.state.operatorTerpilih == ""))}
  511.            
  512.                 <UI_Modal_Loading
  513.                     isLoading= {this.state.loadingTimeline}
  514.                     text= "Checking breakdown timeline..."
  515.                 />
  516.             </View>
  517.         )
  518.     }
  519.  
  520.     CekTimeline() {
  521.         this.setState({loadingTimeline: true});
  522.  
  523.         Realm.open(RealmData.User).then(realm => {
  524.             fetch(
  525.                 API.Breakdown_Cek_Timeline,
  526.                 API.Breakdown_Cek_Timeline__Send(
  527.                     this.state.prv_id == "6" ?
  528.                         realm.objects(RealmDataName.User)[0].id
  529.                         :
  530.                         this.state.operatorTerpilih,
  531.                     this.state.cabangTerpilih,
  532.                     this.state.alatTerpilih,
  533.                 )
  534.             )
  535.             .then(response => response.text())
  536.             .then(responseText => {
  537.                 this.setState({loadingTimeline: false});
  538.  
  539.                 if(JSON.parse(responseText).api_status == "1") {
  540.                     this.props.navigation.push("UI_Breakdown_Timeline", {
  541.                         response: JSON.parse(responseText),
  542.                         prv_id: this.state.prv_id == "6" ?
  543.                                     realm.objects(RealmDataName.User)[0].id
  544.                                     :
  545.                                     this.state.operatorTerpilih,
  546.                         kd_cabang: this.state.cabangTerpilih,
  547.                         kd_alat: this.state.alatTerpilih,
  548.                     })
  549.                 } else if(JSON.parse(responseText).api_status == "0") {
  550.                     Alert.alert("Response", JSON.parse(responseText).api_message);
  551.                 } else {
  552.                     Alert.alert("Response", responseText);
  553.                 }
  554.             })
  555.         })
  556.     }
  557.  
  558.     Update_Cabang_Search(value, close) {
  559.         let dataFound = undefined;
  560.  
  561.         for(let i = 0, cabang_length = this.state.pilihanCabang.length; i < cabang_length; i++) {
  562.             if(value.toLowerCase() == this.state.pilihanCabang[i].name.toLowerCase()) {
  563.                 dataFound = this.state.pilihanCabang[i];
  564.  
  565.                 break;
  566.             }
  567.         }
  568.  
  569.         if(dataFound != undefined) {
  570.             if(this.set_search_cabang.state.value != dataFound.name) {
  571.                 this.set_search_cabang.setState({value: dataFound.name});
  572.  
  573.                 this.setState({
  574.                     pilihanAlat: [],
  575.                     alat: '',
  576.                     alatTerpilih: '',
  577.                     cabang: dataFound.name,
  578.                     cabangTerpilih: dataFound.id.toString(),
  579.                 });
  580.  
  581.                 if(this.state.prv_id != "6") {
  582.                     this.setState({
  583.                         pilihanOperator: [],
  584.                         operatorTerpilih: '',
  585.                         operatorTerpilihName: '',
  586.                     });
  587.  
  588.                     this.set_search_operator.setState({value: ""});
  589.                 }
  590.  
  591.                 this.set_search_alat.setState({value: ""});
  592.  
  593.                 this.MuatAlat();
  594.             }
  595.         } else {
  596.             if(close) {
  597.                 this.set_search_cabang.setState({value: ""});
  598.             }
  599.  
  600.             this.setState({
  601.                 pilihanAlat: [],
  602.                 alat: '',
  603.                 alatTerpilih: '',
  604.                 cabang: "",
  605.                 cabangTerpilih: "",
  606.             });
  607.  
  608.             if(this.state.prv_id != "6") {
  609.                 this.setState({
  610.                     pilihanOperator: [],
  611.                     operatorTerpilih: '',
  612.                     operatorTerpilihName: '',
  613.                 });
  614.  
  615.                 this.set_search_operator.setState({value: ""});
  616.             }
  617.  
  618.             this.set_search_alat.setState({value: ""});
  619.         }
  620.  
  621.         if(close) {
  622.             this.autocomplete_list_cabang.setState({list: []});
  623.         } else {
  624.             if(value != "") {
  625.                 this.autocomplete_list_cabang.setState({list: this.Searching(this.state.pilihanCabang).search(value)});
  626.             } else {
  627.                 this.autocomplete_list_cabang.setState({list: this.state.pilihanCabang});
  628.             }
  629.         }
  630.     }
  631.  
  632.     Update_Alat_Search(value, close) {
  633.         let dataFound = undefined;
  634.  
  635.         for(let i = 0, alat_length = this.state.pilihanAlat.length; i < alat_length; i++) {
  636.             if(value.toLowerCase() == this.state.pilihanAlat[i].name.toLowerCase()) {
  637.                 dataFound = this.state.pilihanAlat[i];
  638.  
  639.                 break;
  640.             }
  641.         }
  642.  
  643.         if(dataFound != undefined) {
  644.             if(this.set_search_alat.state.value != dataFound.name) {
  645.                 this.set_search_alat.setState({value: dataFound.name});
  646.  
  647.                 this.setState({
  648.                     alat: dataFound.name,
  649.                     alatTerpilih: dataFound.id.toString(),
  650.                 });
  651.  
  652.                 if(this.state.prv_id != "6") {
  653.                     this.setState({
  654.                         pilihanOperator: [],
  655.                         operatorTerpilih: '',
  656.                         operatorTerpilihName: '',
  657.                     });
  658.  
  659.                     this.set_search_operator.setState({value: ""});
  660.  
  661.                     this.MuatOperator();
  662.                 }
  663.             }
  664.         } else {
  665.             if(close) {
  666.                 this.set_search_alat.setState({value: ""});
  667.             }
  668.  
  669.             this.setState({
  670.                 alat: "",
  671.                 alatTerpilih: "",
  672.             });
  673.  
  674.             if(this.state.prv_id != "6") {
  675.                 this.setState({
  676.                     pilihanOperator: [],
  677.                     operatorTerpilih: '',
  678.                     operatorTerpilihName: '',
  679.                 });
  680.  
  681.                 this.set_search_operator.setState({value: ""});
  682.             }
  683.         }
  684.  
  685.         if(close) {
  686.             this.autocomplete_list_alat.setState({list: []});
  687.         } else {
  688.             if(value != "") {
  689.                 this.autocomplete_list_alat.setState({list: this.Searching(this.state.pilihanAlat).search(value)});
  690.             } else {
  691.                 this.autocomplete_list_alat.setState({list: this.state.pilihanAlat});
  692.             }
  693.         }
  694.     }
  695.  
  696.     Update_Operator_Search() {
  697.        
  698.     }
  699.  
  700.     Searching(documents) {
  701.         let search = new JsSearch.Search('id');
  702.         search.indexStrategy = new JsSearch.AllSubstringsIndexStrategy();
  703.         search.addIndex('name');
  704.         search.addDocuments(documents);
  705.  
  706.         return search;
  707.     }
  708. }
  709.  
  710. class Autocomplete_List extends React.Component {
  711.     state = {
  712.         list: [],
  713.     }
  714.  
  715.     render() {
  716.         return (
  717.             <View
  718.                 style = {{
  719.                     position: "absolute",
  720.                     top: this.props.top,
  721.                     right: 20 + (this.props.right != undefined ? this.props.right : 0),
  722.                     left: 20,
  723.                 }}
  724.             >
  725.                 {this.state.list.length > 0 ?
  726.                     <ScrollView
  727.                         keyboardShouldPersistTaps = "always"
  728.                         style = {{
  729.                             maxHeight: 170,
  730.                         }}
  731.                         contentContainerStyle = {{
  732.                             padding: 10,
  733.                             backgroundColor: "whitesmoke",
  734.                         }}
  735.                     >
  736.                         {this.state.list.map((item, index) => {
  737.                             return (
  738.                                 <TouchableOpacity
  739.                                     key = {index.toString()}
  740.                                     style = {{
  741.                                         marginTop: index != 0 ? 10 : 0,
  742.                                     }}
  743.                                     onPress = {() => {
  744.                                         this.props.pick_auto_complete(item);
  745.                                     }}
  746.                                 >
  747.                                     <Text
  748.                                         style = {{
  749.                                             flex: 1,
  750.                                             fontSize: 18,
  751.                                             fontWeight: "400",
  752.                                             color: "black",
  753.                                         }}
  754.                                     >
  755.                                         {item.name}
  756.                                     </Text>
  757.                                 </TouchableOpacity>
  758.                             )
  759.                         })}
  760.                     </ScrollView>
  761.                     :
  762.                     null
  763.                 }
  764.             </View>
  765.         )
  766.     }
  767. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement