From 3b2795d3d172b3997bcc1b9cd26e462691335d2d Mon Sep 17 00:00:00 2001
From: Roshan Sathyanarayan <34704549+roshansathya@users.noreply.github.com>
Date: Mon, 15 Jul 2019 03:35:42 +0530
Subject: [PATCH] Removed deprecated function and component

removed deprecated ListView and componentWillReceiveProps with FlatList and componentDidUpdate respectively
---
 components/ModalDropdown.js | 240 ++++++++++++++++++------------------
 1 file changed, 118 insertions(+), 122 deletions(-)

diff --git a/components/ModalDropdown.js b/components/ModalDropdown.js
index 4dc5342..035aefd 100644
--- a/components/ModalDropdown.js
+++ b/components/ModalDropdown.js
@@ -14,6 +14,8 @@ import {
   View,
   Text,
   ListView,
+  FlatList,
+  SectionList,
   TouchableWithoutFeedback,
   TouchableNativeFeedback,
   TouchableOpacity,
@@ -88,9 +90,9 @@ export default class ModalDropdown extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpate(prevProps, prevState){
     let {buttonText, selectedIndex} = this.state;
-    const {defaultIndex, defaultValue, options} = nextProps;
+    const {defaultIndex, defaultValue, options} = this.props;
     buttonText = this._nextValue == null ? buttonText : this._nextValue;
     selectedIndex = this._nextIndex == null ? selectedIndex : this._nextIndex;
     if (selectedIndex < 0) {
@@ -110,6 +112,7 @@ export default class ModalDropdown extends Component {
   }
 
   render() {
+
     return (
       <View {...this.props}>
         {this._renderButton()}
@@ -118,6 +121,116 @@ export default class ModalDropdown extends Component {
     );
   }
 
+    _renderModal = () => {
+    const {animated, accessible, dropdownStyle} = this.props;
+    const {showDropdown, loading} = this.state;
+    if (showDropdown && this._buttonFrame) {
+      const frameStyle = this._calcPosition();
+      const animationType = animated ? 'fade' : 'none';
+      return (
+        <Modal animationType={animationType}
+               visible={true}
+               transparent={true}
+               onRequestClose={this._onRequestClose}
+               supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
+        >
+          <TouchableWithoutFeedback accessible={accessible}
+                                    disabled={!showDropdown}
+                                    onPress={this._onModalPress}
+          >
+            <View style={styles.modal}>
+              <View style={[styles.dropdown, dropdownStyle, frameStyle]}>
+                {loading ? this._renderLoading() : this._renderDropdown()}
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      );
+    }
+  }
+
+    _renderDropdown = () => {
+      const {scrollEnabled, renderSeparator, showsVerticalScrollIndicator, keyboardShouldPersistTaps} = this.props;
+      return (
+        <FlatList 
+            scrollEnabled={scrollEnabled}
+            style={styles.list}
+            keyExtractor={(_, index) => index.toString()}
+            renderItem = {({item, index}) => this._renderRow(item, index)}
+            data={this.props.options}
+            renderSeparator={renderSeparator || this._renderSeparator}
+            automaticallyAdjustContentInsets={false}
+            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+        />
+      );
+    }
+
+  _renderRow = (item, index) => {
+      const rowData = item
+      const rowID = index
+      const {renderRow, dropdownTextStyle, dropdownTextHighlightStyle, accessible} = this.props;
+      const {selectedIndex} = this.state;
+      const key = `row_${rowID}`;
+      const highlighted = rowID == selectedIndex;
+      const row = !renderRow ?
+        (<Text style={[
+          styles.rowText,
+          dropdownTextStyle,
+        ]}
+        >
+          {rowData}
+        </Text>) :
+        renderRow(rowData, rowID, highlighted);
+      const preservedProps = {
+        key,
+        accessible,
+        onPress: () => this._onRowPress(rowData, rowID),
+      };
+      if (TOUCHABLE_ELEMENTS.find(name => name == row.type.displayName)) {
+        const props = {...row.props};
+        props.key = preservedProps.key;
+        props.onPress = preservedProps.onPress;
+        const {children} = row.props;
+        switch (row.type.displayName) {
+          case 'TouchableHighlight': {
+            return (
+              <TouchableHighlight {...props}>
+                {children}
+              </TouchableHighlight>
+            );
+          }
+          case 'TouchableOpacity': {
+            return (
+              <TouchableOpacity {...props}>
+                {children}
+              </TouchableOpacity>
+            );
+          }
+          case 'TouchableWithoutFeedback': {
+            return (
+              <TouchableWithoutFeedback {...props}>
+                {children}
+              </TouchableWithoutFeedback>
+            );
+          }
+          case 'TouchableNativeFeedback': {
+            return (
+              <TouchableNativeFeedback {...props}>
+                {children}
+              </TouchableNativeFeedback>
+            );
+          }
+          default:
+            break;
+        }
+      }
+      return (
+        <TouchableHighlight {...preservedProps}>
+          {row}
+        </TouchableHighlight>
+      );
+    };
+
   _updatePosition(callback) {
     if (this._button && this._button.measure) {
       this._button.measure((fx, fy, width, height, px, py) => {
@@ -196,34 +309,6 @@ export default class ModalDropdown extends Component {
     }
   };
 
-  _renderModal() {
-    const {animated, accessible, dropdownStyle} = this.props;
-    const {showDropdown, loading} = this.state;
-    if (showDropdown && this._buttonFrame) {
-      const frameStyle = this._calcPosition();
-      const animationType = animated ? 'fade' : 'none';
-      return (
-        <Modal animationType={animationType}
-               visible={true}
-               transparent={true}
-               onRequestClose={this._onRequestClose}
-               supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
-        >
-          <TouchableWithoutFeedback accessible={accessible}
-                                    disabled={!showDropdown}
-                                    onPress={this._onModalPress}
-          >
-            <View style={styles.modal}>
-              <View style={[styles.dropdown, dropdownStyle, frameStyle]}>
-                {loading ? this._renderLoading() : this._renderDropdown()}
-              </View>
-            </View>
-          </TouchableWithoutFeedback>
-        </Modal>
-      );
-    }
-  }
-
   _calcPosition() {
     const {dropdownStyle, style, adjustFrame} = this.props;
 
@@ -280,99 +365,10 @@ export default class ModalDropdown extends Component {
     );
   }
 
-  _renderDropdown() {
-    const {scrollEnabled, renderSeparator, showsVerticalScrollIndicator, keyboardShouldPersistTaps} = this.props;
-    return (
-      <ListView scrollEnabled={scrollEnabled}
-                style={styles.list}
-                dataSource={this._dataSource}
-                renderRow={this._renderRow}
-                renderSeparator={renderSeparator || this._renderSeparator}
-                automaticallyAdjustContentInsets={false}
-                showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-                keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-      />
-    );
-  }
-
-  get _dataSource() {
-    const {options} = this.props;
-    const ds = new ListView.DataSource({
-      rowHasChanged: (r1, r2) => r1 !== r2
-    });
-    return ds.cloneWithRows(options);
-  }
-
-  _renderRow = (rowData, sectionID, rowID, highlightRow) => {
-    const {renderRow, dropdownTextStyle, dropdownTextHighlightStyle, accessible} = this.props;
-    const {selectedIndex} = this.state;
-    const key = `row_${rowID}`;
-    const highlighted = rowID == selectedIndex;
-    const row = !renderRow ?
-      (<Text style={[
-        styles.rowText,
-        dropdownTextStyle,
-        highlighted && styles.highlightedRowText,
-        highlighted && dropdownTextHighlightStyle
-      ]}
-      >
-        {rowData}
-      </Text>) :
-      renderRow(rowData, rowID, highlighted);
-    const preservedProps = {
-      key,
-      accessible,
-      onPress: () => this._onRowPress(rowData, sectionID, rowID, highlightRow),
-    };
-    if (TOUCHABLE_ELEMENTS.find(name => name == row.type.displayName)) {
-      const props = {...row.props};
-      props.key = preservedProps.key;
-      props.onPress = preservedProps.onPress;
-      const {children} = row.props;
-      switch (row.type.displayName) {
-        case 'TouchableHighlight': {
-          return (
-            <TouchableHighlight {...props}>
-              {children}
-            </TouchableHighlight>
-          );
-        }
-        case 'TouchableOpacity': {
-          return (
-            <TouchableOpacity {...props}>
-              {children}
-            </TouchableOpacity>
-          );
-        }
-        case 'TouchableWithoutFeedback': {
-          return (
-            <TouchableWithoutFeedback {...props}>
-              {children}
-            </TouchableWithoutFeedback>
-          );
-        }
-        case 'TouchableNativeFeedback': {
-          return (
-            <TouchableNativeFeedback {...props}>
-              {children}
-            </TouchableNativeFeedback>
-          );
-        }
-        default:
-          break;
-      }
-    }
-    return (
-      <TouchableHighlight {...preservedProps}>
-        {row}
-      </TouchableHighlight>
-    );
-  };
-
-  _onRowPress(rowData, sectionID, rowID, highlightRow) {
+  _onRowPress(rowData, rowID) {
     const {onSelect, renderButtonText, onDropdownWillHide} = this.props;
     if (!onSelect || onSelect(rowID, rowData) !== false) {
-      highlightRow(sectionID, rowID);
+      // highlightRow();
       const value = renderButtonText && renderButtonText(rowData) || rowData.toString();
       this._nextValue = value;
       this._nextIndex = rowID;
@@ -388,7 +384,7 @@ export default class ModalDropdown extends Component {
     }
   }
 
-  _renderSeparator = (sectionID, rowID, adjacentRowHighlighted) => {
+  _renderSeparator = (rowID, adjacentRowHighlighted) => {
     const key = `spr_${rowID}`;
     return (
       <View style={styles.separator}