benerin bug menu selection

view/Item.js

@@ -64,7 +64,7 @@ class Item extends React.Component {
         return (
             <View style={{ flex: 1, margin: 10 }} key={item.id} ref={this.props._scrollView}>
 
-                <ScrollView ref={view => this._scrollView = view}>
+               
                     {item.code == 'CATEGORY' ? (
                         <Text style={{ fontSize: 15, color: '#c9af6d', fontFamily: 'Gotham-Black' }}>{item.name}</Text>
                     ) : (
@@ -184,7 +184,6 @@ class Item extends React.Component {
                                 </View>
                             </View>
                         )}
-                </ScrollView>
             </View >
         )
     }

view/MenuSelection.js

@@ -31,8 +31,9 @@ class MenuSelection extends React.Component {
       indicator: true,
       my_lat: 0,
       my_long: 0,
+      data:[],
+      data_before_search: this.props.menu_item,
       note: ''
-
     }
   }
 
@@ -61,6 +62,10 @@ class MenuSelection extends React.Component {
     });
   }
 
+  shouldComponentUpdate() {
+    return true
+  }
+
   componentWillUnmount() {
     this._unsubscribe();
   }
@@ -183,12 +188,26 @@ class MenuSelection extends React.Component {
       session(response, navigation)
       Alert.alert(response.msg);
     })
+  }
+
+  filterSubcategory = (item) => {
+    let index_start = _.findIndex(this.props.menu_item, ['name', item.name])
+    let index_next_category = _.findIndex(this.state.listCategory, ['name', item.name]) + 1
+    let next_category = this.state.listCategory[index_next_category]
+    let index_end = _.findIndex(this.props.menu_item, ['name', next_category.name])
+    let filter_item = this.props.menu_item.slice(index_start, index_end);
+
+    this.setState({
+      data_before_search: filter_item
+    })
 
   }
+  
+
   renderTabBar = ({ item }) => {
     return (
       <View style={{ flex: 1, height: 270 }}>
-        <TouchableOpacity onPress={() => this.scrollToIndex(item)}>
+        <TouchableOpacity onPress={() => this.filterSubcategory(item)}>
           {item.image === '' ? (
             <View style={{ height: 60, width: 60, top: 5 }} />
           ) :
@@ -201,12 +220,26 @@ class MenuSelection extends React.Component {
     )
   }
 
+
+  renderItem = ({ item, index }) => {
+    return (
+      <View>
+        <Item navigation={this.props.navigation}
+          item={item}
+          handleAdd={() => this.handleAdd(item, index)}
+          handleMin={() => this.handleMin(item, index)}
+        />
+      </View>
+    )
+  }
+
+
   refresh() {
     this.setState({ isFetching: true }, function () { this.getMenuList() });
   }
 
   scrollToItem = () => {
-    this.props._scrollView.scrollTo({ y: 1 * 100 });
+    this.props._scrollView.scrollTo({ x: 0, y: 1 * 100 });
   }
 
   handleAdd(item, index) {
@@ -262,9 +295,9 @@ class MenuSelection extends React.Component {
     }
   }
 
-  onChange(params) {
-    console.log(params);
-  }
+  // onChange(params) {
+  //   console.log(params);
+  // }
 
 
   handleMin(item, index) {
@@ -292,12 +325,35 @@ class MenuSelection extends React.Component {
   }
 
   scrollToIndex = (item) => {
-    index = _.findIndex(this.props.menu_item, ['name', item.name])
-    if (index > -1) {
-      this.flatListRef.scrollToIndex({ animated: true, index: index });
+    // let start = new Date()
+    // let end = new Date()
+    // let diff = end - start / 1000   
+    // console.log("TIME : "+diff)
+    try {
+      index = _.findIndex(this.props.menu_item, ['name', item.name])
+      if (index > -1) {
+        this.flatListRef.scrollToIndex({ animated: true, index: index });
+      }
+    } catch (error) {
+      // index = _.findIndex(this.props.menu_item, ['name', item.name])
+      // this.flatListRef.scrollToIndex({ animated: true, index: this.setLastIndex });
     }
   }
 
+  getItemLayout = (data, index) => (
+    {
+      length: 100,
+      offset: 100 * index,
+      index
+    }
+  )
+
+  // setLastIndex = (index) => {
+  //   las
+  //   lastIndex = index
+  // }
+
+
   render() {
     return (
       <View style={styles.container}>
@@ -312,6 +368,8 @@ class MenuSelection extends React.Component {
             data={this.state.listCategory}
             renderItem={this.renderTabBar}
             keyExtractor={(item) => item.id}
+            maxToRenderPerBatch={10}
+
           />
         </View>
         <View style={{ height: 1, backgroundColor: 'grey', marginRight: 10, marginLeft: 10, marginTop: 5, }}></View>
@@ -319,24 +377,19 @@ class MenuSelection extends React.Component {
           {this.state.indicator == true ? (
             <ActivityIndicator style={{ top: 10 }} size="large" color="#c9af6d" />
           ) : (
+              this.state.data_before_search.length > 0 ? (
               <FlatList
-                data={this.props.menu_item}
-                renderItem={({ item, index }) => (
-                  <Item navigation={this.props.navigation}
-                    item={item}
-                    handleAdd={() => this.handleAdd(item, index)}
-                    handleMin={() => this.handleMin(item, index)}
-                  />
-                )}
-                getItemLayout={(data, index) => (
-                  { length: 250, offset: 250 * index, index }
-                )}
+                data={this.state.data_before_search}
+                renderItem={this.renderItem}
                 keyExtractor={item => item.id}
-                ref={(ref) => { this.flatListRef = ref; }}
+                // ref={(ref) => { this.flatListRef = ref; }}
                 initialNumToRender={5}
                 maxToRenderPerBatch={10}
                 windowSize={10}
               />
+              ):(
+                <Text style={{ flexWrap: 'wrap', fontFamily: 'Gotham-Light', color: '#b1b1b2', textAlign: 'center',top:20 }}> Tidak Ada Menu untuk kategory ini !</Text>
+              )
             )}
         </View>
         <View>