Testing pull request sohobloo#219

Author: Amirul Abu

components/ModalDropdown.js

@@ -13,6 +13,9 @@ import {
   Dimensions,
   View,
   Text,
+  ListView,
+  FlatList,
+  SectionList,
   TouchableWithoutFeedback,
   TouchableNativeFeedback,
   TouchableOpacity,
@@ -21,8 +24,6 @@ import {
   ActivityIndicator,
 } from 'react-native';
 
-import { ListView } from 'deprecated-react-native-listview';
-
 import PropTypes from 'prop-types';
 
 const TOUCHABLE_ELEMENTS = [
@@ -89,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) {
@@ -111,6 +112,7 @@ export default class ModalDropdown extends Component {
   }
 
   render() {
+
     return (
       <View {...this.props}>
         {this._renderButton()}
@@ -119,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) => {
@@ -197,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;
 
@@ -281,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;
@@ -389,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}
@@ -439,4 +434,4 @@ const styles = StyleSheet.create({
     height: StyleSheet.hairlineWidth,
     backgroundColor: 'lightgray'
   }
-});
+});