SHARE
TWEET

Reyy

a guest Mar 20th, 2019 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2.  
  3. import {
  4.     Alert,
  5.     ActivityIndicator,
  6.     Animated,
  7.     FlatList,
  8.     Image,
  9.     Modal,
  10.     Platform,
  11.     ScrollView,
  12.     StyleSheet,
  13.     Text,
  14.     TouchableOpacity,
  15.     View
  16. } from "react-native";
  17.  
  18. import {
  19.     format
  20. } from "date-fns";
  21.  
  22. import {
  23.     API
  24. } from "../helpers/API";
  25.  
  26. import {
  27.     RealmDataName
  28. } from "../helpers/Realm";
  29.  
  30. import {
  31.     Calendar
  32. } from "react-native-calendars";
  33.  
  34. import {
  35.     globalColors
  36. } from "../colors";
  37.  
  38. const   colors      = require('../colors').default.riwayat;
  39.  
  40. const   currency    =   "Rp",
  41.         sentences   =   [
  42.                             "Riwayat"
  43.                         ];
  44.  
  45. export default class Riwayat extends React.Component {
  46.     state = {
  47.         daysArray           : [],
  48.         daysObject          : {},
  49.         item                : [],
  50.         showFilter          : false,
  51.         loadData            : false
  52.     }
  53.  
  54.     defaultHeight        = 0;
  55.     offset               = 0;
  56.     showCalendar         = true;
  57.     page                 = 1;
  58.     anymoreDataAvailable = true;
  59.  
  60.     idLoadRiwayat        = 0;
  61.  
  62.     render() {
  63.         let riwayat = [];
  64.  
  65.         for(let i = 0; i < this.state.item.length; i++) {
  66.             let periodeAlreadyListedInIndex = null;
  67.  
  68.             for(let j = 0; j < riwayat.length; j++) {
  69.                 if(riwayat[j].periode == this.state.item[i].date.substring(0, this.state.item[i].date.length - 3)) {
  70.                     periodeAlreadyListedInIndex = j;
  71.  
  72.                     break;
  73.                 }
  74.             }
  75.  
  76.             if(periodeAlreadyListedInIndex == null) {
  77.                 riwayat.push(
  78.                     {
  79.                         content: [
  80.                             {
  81.                                 item: this.state.item[i].list,
  82.                                 tanggal: {
  83.                                     digit: this.state.item[i].date.split("-")[2][0] == "0" ? this.state.item[i].date.split("-")[2][1] : this.state.item[i].date.split("-")[2],
  84.                                     kodeBulan: (new Date(this.state.item[i].date)).toDateString().split(" ")[1]
  85.                                 }
  86.                             }
  87.                         ],
  88.                         periode: this.state.item[i].date.substring(0, this.state.item[i].date.length - 3)
  89.                     }
  90.                 )
  91.             } else {
  92.                 riwayat[periodeAlreadyListedInIndex].content.push(
  93.                     {
  94.                         item: this.state.item[i].list,
  95.                         tanggal: {
  96.                             digit: this.state.item[i].date.split("-")[2][0] == "0" ? this.state.item[i].date.split("-")[2][1] : this.state.item[i].date.split("-")[2],
  97.                             kodeBulan: (new Date(this.state.item[i].date)).toDateString().split(" ")[1]
  98.                         }
  99.                     }
  100.                 );
  101.             }
  102.         }
  103.  
  104.         return (
  105.             <View
  106.                 style = {styles.container}
  107.             >
  108.                 <View
  109.                     style = {styles.titleAndFilter}
  110.                 >
  111.                     <Text
  112.                         style = {styles.title}
  113.                     >
  114.                         {sentences[0]}
  115.                     </Text>
  116.  
  117.                     <TouchableOpacity
  118.                         onPress = {() => {
  119.                             this.filter.SetOldFilter();
  120.                             this.ShowFilter(true);
  121.                             this.filter.StartShow();
  122.                         }}
  123.                     >
  124.                         <Image
  125.                             resizeMode  = "contain"
  126.                             source      = {require('../resources/assets/ic_filter.png')}
  127.                             style       = {styles.filter}
  128.                         />
  129.                     </TouchableOpacity>
  130.                 </View>
  131.  
  132.                 <ScrollView
  133.                     style = {styles.backgroundContainer}
  134.                 >
  135.                     <View>
  136.                         <View
  137.                             style       = {styles.topContent}
  138.                         >
  139.                             <Calendar
  140.                                 firstDay            = {1}
  141.                                 maxDate             = {'2099-12-31'}
  142.                                 minDate             = {'2000-01-01'}
  143.                                 markedDates         = {this.state.daysObject}
  144.                                 onDayPress          = {day => {
  145.                                     this.GetNewDaysObject(day, true);
  146.                                 }}
  147.                                 markingType         ={'period'}
  148.                                 monthFormat         = {'MMM yyyy'}
  149.                                 onPressArrowLeft    = {substractMonth   => substractMonth()}
  150.                                 onPressArrowRight   = {addMonth         => addMonth()}
  151.                                 renderArrow         = {(direction) => (
  152.                                     <Image
  153.                                         resizeMode  =   "contain"
  154.                                         source      =   {direction == "left" ?
  155.                                                             require("../resources/assets/ic_chevron_left.png")
  156.                                                             :
  157.                                                             require("../resources/assets/ic_chevron_right.png")
  158.                                                         }
  159.                                         style       =   {styles.arrow}
  160.                                     />
  161.                                 )}
  162.                                 theme               = {{
  163.                                     arrowColor                 : colors[7],
  164.                                     calendarBackground         : colors[2],
  165.                                     dayTextColor               : colors[1],
  166.                                     dotColor                   : colors[4],
  167.                                     monthTextColor             : colors[1],
  168.                                     selectedDayBackgroundColor : colors[4],
  169.                                     selectedDayTextColor       : colors[1],
  170.                                     selectedDotColor           : colors[1],
  171.                                     textDayFontFamily          : Platform.OS == "android" ? 'monospace' : null,
  172.                                     textDayFontSize            : 16,
  173.                                     textDayHeaderFontFamily    : Platform.OS == "android" ? 'monospace' : null,
  174.                                     textDayHeaderFontSize      : 16,
  175.                                     textDisabledColor          : colors[6],
  176.                                     textMonthFontFamily        : Platform.OS == "android" ? 'monospace' : null,
  177.                                     textMonthFontSize          : 16,
  178.                                     textMonthFontWeight        : 'bold',
  179.                                     textSectionTitleColor      : colors[3],
  180.                                     todayTextColor             : colors[5]
  181.                                 }}
  182.                             />
  183.  
  184.                             {
  185.                                 this.state.loadData && this.state.item.length == 0 ?
  186.                                     <ActivityIndicator
  187.                                         color = "skyblue"
  188.                                         size  = "large"
  189.                                         style = {{
  190.                                             marginTop: 20
  191.                                         }}
  192.                                     />
  193.                                     :
  194.                                     <FlatList
  195.                                         data = {riwayat}
  196.                                         onEndReached = {() => {
  197.                                             this.MengambilRiwayat(false, undefined, "OnEndReached");
  198.                                         }}
  199.                                         onEndReachedThreshold = {0.01}
  200.                                         keyExtractor = {(item, index) => index.toString()}
  201.                                         renderItem = {({item, index}) => this.SetRiwayat(item, index)}
  202.                                         ListFooterComponent = {
  203.                                             this.state.loadData ?
  204.                                                 <ActivityIndicator
  205.                                                     size = "large"
  206.                                                     color = "skyblue"
  207.                                                     style = {{
  208.                                                         marginTop: 20
  209.                                                     }}
  210.                                                 />
  211.                                                 :
  212.                                                 null
  213.                                         }
  214.                                     />
  215.                             }
  216.                         </View>
  217.                     </View>
  218.                 </ScrollView>
  219.  
  220.                 <Filter
  221.                     ref        = {refs => this.filter = refs}
  222.                     ShowFilter = {showFilter => this.ShowFilter(showFilter)}
  223.                     visible    = {this.state.showFilter}
  224.                     MengambilRiwayat = {() => {
  225.                         this.setState({
  226.                             daysArray : [],
  227.                             daysObject: {}
  228.                         });
  229.  
  230.                         this.MengambilRiwayat(true, undefined, "Filter");
  231.                     }}
  232.                 />
  233.             </View>
  234.         )
  235.     }
  236.  
  237.     MengambilRiwayat(reset, daysArrayState, from) {
  238.         let item = this.state.item;
  239.  
  240.         if(reset == true) {
  241.             item = [];
  242.             this.page = 1;
  243.             this.anymoreDataAvailable = true;
  244.  
  245.             this.setState({item: []});
  246.         }
  247.  
  248.         if(this.anymoreDataAvailable) {
  249.             this.setState({loadData: true});
  250.  
  251.             this.idLoadRiwayat++;
  252.             let id = this.idLoadRiwayat;
  253.  
  254.             let daysArray = daysArrayState != undefined ? daysArrayState : this.state.daysArray;
  255.  
  256.             let startTime = (daysArray.length == 0 ? (new Date()) : new Date(daysArray[0])).getTime();
  257.             let endTime   = (daysArray.length == 0 ? (new Date()) : new Date(daysArray[1])).getTime();
  258.  
  259.             let today = format(new Date(), 'YYYY-MM-DD');
  260.  
  261.             let sortedStart = daysArray.length == 0 ? today : (daysArray.length == 1 || startTime <= endTime ? daysArray[0] : daysArray[1]);
  262.             let sortedEnd   = daysArray.length == 0 ? today : (daysArray.length == 1 || startTime >= endTime ? daysArray[0] : daysArray[1]);
  263.  
  264.             thisPage = this.page;
  265.             this.page++;
  266.  
  267.             Alert.alert(this.page.toString() + " " + this.anymoreDataAvailable.toString())
  268.  
  269.             fetch(
  270.                 API.History + "?" +
  271.                 "id=" + JSON.parse(require("../stores/userSession").realm.objects(RealmDataName.UserSession)[0].value).id.toString() +
  272.                 "&date_start=" + sortedStart +
  273.                 "&date_end=" + sortedEnd +
  274.                 "&page=" + thisPage.toString()
  275.             )
  276.             .then(response => response.text())
  277.             .then(responseText => {
  278.                 if(id == this.idLoadRiwayat) {
  279.                     if(responseText[0] == "{") {
  280.                         let responseJson = JSON.parse(responseText);
  281.  
  282.                         if(responseJson.item.length == 0) {
  283.                             this.anymoreDataAvailable = false;
  284.                         }
  285.        
  286.                         if(responseJson.api_status == "1") {
  287.                             for(let i = 0; i < responseJson.item.length; i++) {
  288.                                 let alreadyListedInIndex = null;
  289.        
  290.                                 for(let j = 0; j < item.length; j++) {
  291.                                     if(responseJson.item[i].date == item[j].date) {
  292.                                         alreadyListedInIndex = j;
  293.        
  294.                                         break;
  295.                                     }
  296.                                 }
  297.        
  298.                                 if(alreadyListedInIndex != null) {
  299.                                     for(let j = 0; j < responseJson.item[i].list.length; j++) {
  300.                                         item[alreadyListedInIndex].list.push(responseJson.item[i].list[j]);
  301.                                     }
  302.                                 } else {
  303.                                     item.push(responseJson.item[i]);
  304.                                 }
  305.                             }
  306.        
  307.                             this.setState({item: item});
  308.                         } else {
  309.                             Alert.alert("Response", responseJson.api_message);
  310.  
  311.                             this.anymoreDataAvailable = false;
  312.                         }
  313.                     } else {
  314.                         Alert.alert("Response", responseText);
  315.  
  316.                         this.anymoreDataAvailable = false;
  317.                     }
  318.                 }
  319.  
  320.                 this.setState({loadData: false});
  321.             })
  322.             .catch(error => {
  323.                 this.anymoreDataAvailable = false;
  324.  
  325.                 this.setState({loadData: false});
  326.  
  327.                 if(reset) {
  328.                     this.setState({item: []});
  329.                 }
  330.  
  331.                 Alert.alert("Error", error.toString());
  332.             });
  333.         }
  334.     }
  335.  
  336.     ShowFilter(showFilter) {
  337.         this.setState({showFilter: showFilter});
  338.     }
  339.  
  340.     GetNewDaysObject(day, reset) {
  341.         if(this.state.daysArray.length == 1 && this.state.daysArray[0] == day.dateString) {
  342.             this.setState({
  343.                 daysArray : [],
  344.                 daysObject: {},
  345.                 item: []
  346.             });
  347.  
  348.             this.MengambilRiwayat(reset, [], "GetNewDaysEmpty");
  349.         } else {
  350.             let daysArrayState = (this.state.daysArray.length == 2 ? [] : this.state.daysArray).concat(day.dateString);
  351.  
  352.             this.setState({daysArray: daysArrayState});
  353.  
  354.             let daysArray = daysArrayState.length == 2 ?
  355.                                 GetDaysArray(daysArrayState[0], daysArrayState[1]).map((v)=>"/" + v.toISOString().slice(0,10)).join("").split("/")
  356.                                 :
  357.                                 daysArrayState;
  358.  
  359.             let newDaysObject = {}
  360.  
  361.             for(let i = 0; i < daysArray.length; i++) {
  362.                 daysArray.forEach((day, index) => {
  363.                     newDaysObject = {
  364.                         ...newDaysObject,
  365.                         [day]: {
  366.                             color      : globalColors.secondBlue,
  367.                             endingDay  : index == daysArray.length - 1,
  368.                             marked     : true,
  369.                             selected   : true,
  370.                             startingDay: (daysArrayState.length == 2 && index == 1) || index == 0
  371.                         }
  372.                     };
  373.                 });
  374.             }
  375.  
  376.             this.setState({daysObject: newDaysObject});
  377.  
  378.             this.MengambilRiwayat(reset, daysArrayState, "GetNewDaysNotEmpty");
  379.         }
  380.     }
  381.  
  382.     SetRiwayat(item, index) {
  383.         return (
  384.             <View
  385.                 key     = {index.toString()}
  386.                 style   = {styles.riwayatContainer}
  387.             >
  388.                 <View
  389.                     style = {styles.riwayatPeriodeContainer}
  390.                 >
  391.                     <Text
  392.                         style = {styles.riwayatPeriode}
  393.                     >
  394.                         {/* {format(new Date(item.periode, 'MM/YYYY'))} */}
  395.                         {format(new Date(item.periode + "-01"), 'MMMM YYYY')}
  396.                     </Text>
  397.                 </View>
  398.  
  399.                 {item.content.map((itemContent, indexContent) => this.SetContent(itemContent, indexContent))}
  400.             </View>
  401.         )
  402.     }
  403.  
  404.     SetContent(item, index) {
  405.         return (
  406.             <View
  407.                 key     = {index.toString()}
  408.                 style   = {[
  409.                     styles.contentContainer,
  410.                     {
  411.                         marginTop: index == 0 ? 0 : 20
  412.                     }
  413.                 ]}
  414.             >
  415.                 <Text
  416.                     style = {styles.contentTanggalDigit}
  417.                 >
  418.                     {item.tanggal.digit + "\n"}
  419.                    
  420.                     <Text
  421.                         style = {styles.contentTanggalKodeBulan}
  422.                     >
  423.                         {item.tanggal.kodeBulan}
  424.                     </Text>
  425.                 </Text>
  426.  
  427.                 <View
  428.                     style = {styles.contentItem}
  429.                 >
  430.                     {item.item.map((itemItem, indexItem) => this.SetItem(itemItem, indexItem))}
  431.                 </View>
  432.             </View>
  433.         )
  434.     }
  435.  
  436.     SetItem(item, index) {
  437.         return (
  438.             <View
  439.                 key     = {index.toString()}
  440.                 style   = {[
  441.                     styles.itemContainer,
  442.                     {
  443.                         marginTop: index == 0 ? 0 : 20
  444.                     }
  445.                 ]}
  446.             >
  447.                 <TouchableOpacity
  448.                     activeOpacity   = {0.6}
  449.                     onPress         = {() => this.props.navigation.navigate("RincianRiwayat", {id_pengajuan: item.id})}
  450.                     style           = {styles.itemInnerContainer}
  451.                 >
  452.                     <View
  453.                         style = {[
  454.                             {
  455.                                 backgroundColor: item.status == "Disetujui" ? colors[16] : (item.status == "Ditolak" ? colors[14] : colors[15])
  456.                             },
  457.                             styles.itemLeftBorder
  458.                         ]}
  459.                     />
  460.  
  461.                     <View
  462.                         style = {styles.itemDetailContainer}
  463.                     >
  464.                         <Text
  465.                             style = {styles.itemDetailCurrency}
  466.                         >
  467.                             {currency + '.' + ConvertToCurrencyNumber(item.nominal) + ',-'}
  468.                         </Text>
  469.  
  470.                         <Text
  471.                             style = {styles.itemDetailTitle}
  472.                         >
  473.                             {item.name}
  474.                         </Text>
  475.  
  476.                         <Text
  477.                             style = {styles.itemDetailDeskripsi}
  478.                         >
  479.                             {item.description}
  480.                         </Text>
  481.                     </View>
  482.                 </TouchableOpacity>
  483.             </View>
  484.         )
  485.     }
  486. }
  487.  
  488. function GetDaysArray(start, end) {
  489.     let startTime = (new Date(start)).getTime();
  490.     let endTime   = (new Date(end)).getTime();
  491.  
  492.     let sortedStart = new Date(startTime <= endTime ? start : end);
  493.     let sortedEnd   = new Date(startTime >= endTime ? start : end);
  494.  
  495.     let daysArray = [];
  496.  
  497.     for(date = sortedStart; date <= sortedEnd; date.setDate(date.getDate() + 1)) {
  498.         daysArray.push(new Date(date));
  499.     }
  500.  
  501.     return daysArray;
  502. }
  503.  
  504. function ConvertToCurrencyNumber(value) {
  505.     return (Number(value)).toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1.")
  506. }
  507.  
  508. class Filter extends React.Component {
  509.     state = {
  510.         bottom  : new Animated.Value(-200),
  511.         opacity : new Animated.Value(0),
  512.         filterStatus        : {
  513.             Disetujui: true,
  514.             Diproses : true,
  515.             Ditolak  : true
  516.         }
  517.     }
  518.  
  519.     status = ""
  520.     oldFilterStatus = {
  521.         Disetujui: true,
  522.         Diproses : true,
  523.         Ditolak  : true
  524.     }
  525.  
  526.     SetOldFilter() {
  527.         this.oldFilterStatus = this.state.filterStatus;
  528.     }
  529.  
  530.     Done(apply) {
  531.         let currentFilterStatus = apply ? this.state.filterStatus : this.oldFilterStatus;
  532.  
  533.         if(apply) {
  534.             let status = "";
  535.  
  536.             if(this.state.filterStatus.Disetujui) {
  537.                 status += "Disetujui|";
  538.             }
  539.  
  540.             if(this.state.filterStatus.Diproses) {
  541.                 status += "Diproses|";
  542.             }
  543.  
  544.             if(this.state.filterStatus.Ditolak) {
  545.                 status += "Ditolak|";
  546.             }
  547.  
  548.             this.status = status;
  549.         } else {
  550.             this.setState({filterStatus: currentFilterStatus})
  551.         }
  552.     }
  553.  
  554.     StartShow() {
  555.         this.setState({
  556.             bottom  : new Animated.Value(-200),
  557.             opacity : new Animated.Value(0)
  558.         });
  559.  
  560.         setTimeout(() => {
  561.             Animated.timing(
  562.                 this.state.opacity,
  563.                 {
  564.                     duration    : 200,
  565.                     toValue     : 1
  566.                 },
  567.             ).start();
  568.  
  569.             setTimeout(() => {
  570.                 Animated.timing(
  571.                     this.state.bottom,
  572.                     {
  573.                         duration    : 200,
  574.                         toValue     : 0
  575.                     },
  576.                 ).start();
  577.             }, 200);
  578.         }, 25);
  579.     }
  580.  
  581.     render() {
  582.         return (
  583.             <Modal
  584.                 onRequestClose  = {() => {
  585.                     this.Done(false);
  586.  
  587.                     this.props.ShowFilter(false);
  588.                 }}
  589.                 transparent
  590.                 visible         = {this.props.visible}
  591.             >
  592.                 <Animated.View
  593.                     style = {[
  594.                         styles.modalContainer,
  595.                         {
  596.                             opacity: this.state.opacity
  597.                         }
  598.                     ]}
  599.                 >
  600.                     <TouchableOpacity
  601.                         activeOpacity = {1}
  602.                         onPress       = {() => {
  603.                             this.Done(false);
  604.  
  605.                             this.props.ShowFilter(false);
  606.                         }}
  607.                         style         = {styles.modalBackground}
  608.                     />
  609.  
  610.                     <Animated.View
  611.                         style = {[
  612.                             styles.modalMainContainer,
  613.                             {
  614.                                 bottom: this.state.bottom
  615.                             }
  616.                         ]}
  617.                     >
  618.                         <View
  619.                             style = {styles.modalIconContainer}
  620.                         >
  621.                             <View
  622.                                 style = {styles.modalIconItemContainer}
  623.                             >
  624.                                 <View
  625.                                     style = {styles.modalIconItemBackground}
  626.                                 >
  627.                                     <TouchableOpacity
  628.                                         activeOpacity = {0.6}
  629.                                         onPress = {() => {
  630.                                             this.setState({
  631.                                                 filterStatus: {
  632.                                                     ...this.state.filterStatus,
  633.                                                     Disetujui: !this.state.filterStatus.Disetujui
  634.                                                 }
  635.                                             })
  636.                                         }}
  637.                                     >
  638.                                         <Image
  639.                                             resizeMode = "contain"
  640.                                             source     = {this.state.filterStatus.Disetujui ? require('../resources/assets/ic_filter_green_selected.png') : require('../resources/assets/ic_filter_green_non_selected.png')}
  641.                                             style      = {styles.modalIcon}
  642.                                         />
  643.                                     </TouchableOpacity>
  644.                                 </View>
  645.  
  646.                                 <Text
  647.                                     style = {styles.modalText}
  648.                                 >
  649.                                     Disetujui
  650.                                 </Text>
  651.                             </View>
  652.  
  653.                             <View
  654.                                 style = {styles.modalLine}
  655.                             />
  656.  
  657.                             <View
  658.                                 style = {styles.modalIconItemContainer}
  659.                             >
  660.                                 <View
  661.                                     style = {styles.modalIconItemBackground}
  662.                                 >
  663.                                     <TouchableOpacity
  664.                                         activeOpacity = {0.6}
  665.                                         onPress = {() => {
  666.                                             this.setState({
  667.                                                 filterStatus: {
  668.                                                     ...this.state.filterStatus,
  669.                                                     Ditolak: !this.state.filterStatus.Ditolak
  670.                                                 }
  671.                                             })
  672.                                         }}
  673.                                     >
  674.                                         <Image
  675.                                             resizeMode = "contain"
  676.                                             source     = {this.state.filterStatus.Ditolak ? require('../resources/assets/ic_filter_red_selected.png') : require('../resources/assets/ic_filter_red_non_selected.png')}
  677.                                             style      = {styles.modalIcon}
  678.                                         />
  679.                                     </TouchableOpacity>
  680.                                 </View>
  681.  
  682.                                 <Text
  683.                                     style = {styles.modalText}
  684.                                 >
  685.                                     Ditolak
  686.                                 </Text>
  687.                             </View>
  688.  
  689.                             <View
  690.                                 style = {styles.modalLine}
  691.                             />
  692.  
  693.                             <View
  694.                                 style = {styles.modalIconItemContainer}
  695.                             >
  696.                                 <View
  697.                                     style = {styles.modalIconItemBackground}
  698.                                 >
  699.                                     <TouchableOpacity
  700.                                         activeOpacity = {0.6}
  701.                                         onPress = {() => {
  702.                                             this.setState({
  703.                                                 filterStatus: {
  704.                                                     ...this.state.filterStatus,
  705.                                                     Diproses: !this.state.filterStatus.Diproses
  706.                                                 }
  707.                                             })
  708.                                         }}
  709.                                     >
  710.                                         <Image
  711.                                             resizeMode = "contain"
  712.                                             source     = {this.state.filterStatus.Diproses ? require('../resources/assets/ic_filter_yellow_selected.png') : require('../resources/assets/ic_filter_yellow_non_selected.png')}
  713.                                             style      = {styles.modalIcon}
  714.                                         />
  715.                                     </TouchableOpacity>
  716.                                 </View>
  717.  
  718.                                 <Text
  719.                                     style = {styles.modalText}
  720.                                 >
  721.                                     Diproses
  722.                                 </Text>
  723.                             </View>
  724.                         </View>
  725.  
  726.                         <View
  727.                             style = {styles.modalButtonBackground}
  728.                         >
  729.                             <TouchableOpacity
  730.                                 activeOpacity = {0.6}
  731.                                 onPress       = {() => {
  732.                                     this.Done(true);
  733.  
  734.                                     this.props.ShowFilter(false);
  735.                                     this.props.MengambilRiwayat();
  736.                                 }}
  737.                                 style         = {styles.modalButtonContainer}
  738.                             >
  739.                                 <Text
  740.                                     style = {styles.modalButtonText}
  741.                                 >
  742.                                     Terapkan
  743.                                 </Text>
  744.                             </TouchableOpacity>
  745.                         </View>
  746.                     </Animated.View>
  747.                 </Animated.View>
  748.             </Modal>
  749.         )
  750.     }
  751. }
  752.  
  753. const styles = StyleSheet.create({
  754.     container: {
  755.         backgroundColor         : colors[0],
  756.         flex                    : 1
  757.     },
  758.     backgroundContainer: {
  759.         flex                    : 1
  760.     },
  761.     topContent: {
  762.         paddingHorizontal       : 20,
  763.         paddingBottom           : 20
  764.     },
  765.     titleAndFilter: {
  766.         alignItems              : "center",
  767.         flexDirection           : "row",
  768.         justifyContent          : "space-between",
  769.         height                  : 70,      
  770.         paddingHorizontal       : 20
  771.     },
  772.     title: {
  773.         color                   : colors[1],
  774.         fontSize                : 20,
  775.         fontWeight              : "700",
  776.         marginBottom            : 10
  777.     },
  778.     filter: {
  779.         height                  : 30,
  780.         width                   : 30
  781.     },
  782.     arrow: {
  783.         height                  : 20,
  784.         width                   : 20
  785.     },
  786.     arrowShowCalendarButton: {
  787.         height                  : 25,
  788.         width                   : 25
  789.     },
  790.     bottomContent: {
  791.         alignItems              : "center",
  792.         backgroundColor         : colors[0]
  793.     },
  794.     calendarHider: {
  795.         backgroundColor         : colors[0],
  796.         bottom                  : -350,
  797.         left                    : 0,
  798.         position                : "absolute",
  799.         right                   : 0,
  800.         top                     : 0
  801.     },
  802.     riwayatContainer: {
  803.         alignItems              : "center",
  804.         width                   : "100%"
  805.     },
  806.     riwayatPeriodeContainer: {
  807.         backgroundColor         : colors[8],
  808.         borderRadius            : 10,
  809.         marginVertical          : 20,
  810.         paddingHorizontal       : 10,
  811.         paddingVertical         : 2.5
  812.     },
  813.     riwayatPeriode: {
  814.         color                   : colors[0],
  815.         fontSize                : 14
  816.     },
  817.     contentContainer: {
  818.         flexDirection           : "row",
  819.         width                   : "100%"
  820.     },
  821.     contentTanggalDigit: {
  822.         color                   : colors[1],
  823.         fontSize                : 32,
  824.         textAlign               : "center"
  825.     },
  826.     contentTanggalKodeBulan: {
  827.         fontSize                : 20
  828.     },
  829.     contentItem: {
  830.         flex                    : 1
  831.     },
  832.     itemContainer: {
  833.         backgroundColor         : colors[9],
  834.         borderRadius            : 5,
  835.         flex                    : 1,
  836.         marginLeft              : 20
  837.     },
  838.     itemInnerContainer: {
  839.         flex                    : 1,
  840.         flexDirection           : "row"
  841.     },
  842.     itemLeftBorder: {
  843.         borderBottomLeftRadius  : 5,
  844.         borderTopLeftRadius     : 5,
  845.         width                   : 10
  846.     },
  847.     itemDetailContainer: {
  848.         backgroundColor         : colors[1],
  849.         borderBottomRightRadius : 5,
  850.         borderTopRightRadius    : 5,
  851.         flex                    : 1,
  852.         padding                 : 15
  853.     },
  854.     itemDetailCurrency: {
  855.         color                   : colors[9],
  856.         fontSize                : 20,
  857.         fontWeight              : "700"
  858.     },
  859.     itemDetailTitle: {
  860.         color                   : colors[10],
  861.         fontSize                : 14,
  862.         marginVertical          : 5
  863.     },
  864.     itemDetailDeskripsi: {
  865.         color                   : colors[11],
  866.         fontSize                : 14
  867.     },
  868.     modalContainer: {
  869.         flex                    : 1,
  870.         justifyContent          : "flex-end"
  871.     },
  872.     modalBackground: {
  873.         backgroundColor         : colors[12],
  874.         bottom                  : 0,
  875.         left                    : 0,
  876.         right                   : 0,
  877.         position                : "absolute",
  878.         top                     : 0
  879.     },
  880.     modalMainContainer: {
  881.         backgroundColor         : colors[1]
  882.     },
  883.     modalIconContainer: {
  884.         alignItems              : "center",
  885.         flexDirection           : "row",
  886.         justifyContent          : "space-around",
  887.         padding                 : 20
  888.     },
  889.     modalIconItemContainer: {
  890.         alignItems              : "center"
  891.     },
  892.     modalIconItemBackground: {
  893.         backgroundColor         : colors[9],
  894.         borderRadius            : 27.5,
  895.         height                  : 55,
  896.         width                   : 55
  897.     },
  898.     modalIcon: {
  899.         height                  : 55,
  900.         width                   : 55
  901.     },
  902.     modalText: {
  903.         color                   : colors[9],
  904.         fontSize                : 16,
  905.         marginTop               : 10
  906.     },
  907.     modalLine: {
  908.         backgroundColor         : colors[13],
  909.         height                  : "80%",
  910.         width                   : 1.5
  911.     },
  912.     modalButtonBackground: {
  913.         backgroundColor         : colors[9],
  914.         borderRadius            : 10,
  915.         marginHorizontal        : 20,
  916.         marginBottom            : 20
  917.     },
  918.     modalButtonContainer: {
  919.         alignItems              : "center",
  920.         backgroundColor         : colors[8],
  921.         borderRadius            : 10,
  922.         padding                 : 10
  923.     },
  924.     modalButtonText: {
  925.         color                   : colors[9],
  926.         fontSize                : 20,
  927.         fontWeight              : "700"
  928.     }
  929. });
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top