diff --git a/components/ModalDropdown.js b/components/ModalDropdown.js index ace1472..df1b558 100644 --- a/components/ModalDropdown.js +++ b/components/ModalDropdown.js @@ -4,9 +4,7 @@ 'use strict'; -import React, { - Component, -} from 'react'; +import React from 'react'; import { StyleSheet, @@ -19,9 +17,9 @@ import { TouchableHighlight, Modal, ActivityIndicator, + FlatList } from 'react-native'; -import ListView from "deprecated-react-native-listview"; import PropTypes from 'prop-types'; const TOUCHABLE_ELEMENTS = [ @@ -31,7 +29,7 @@ const TOUCHABLE_ELEMENTS = [ 'TouchableNativeFeedback' ]; -export default class ModalDropdown extends Component { +export default class ModalDropdown extends React.Component { static propTypes = { disabled: PropTypes.bool, scrollEnabled: PropTypes.bool, @@ -52,6 +50,7 @@ export default class ModalDropdown extends Component { adjustFrame: PropTypes.func, renderRow: PropTypes.func, + keyExtractor: PropTypes.string, renderSeparator: PropTypes.func, renderButtonText: PropTypes.func, @@ -281,13 +280,17 @@ export default class ModalDropdown extends Component { } _renderDropdown() { - const {scrollEnabled, renderSeparator, showsVerticalScrollIndicator, keyboardShouldPersistTaps} = this.props; + const {scrollEnabled, renderSeparator, showsVerticalScrollIndicator, keyboardShouldPersistTaps, keyExtractor } = this.props; return ( - + keyExtractor && item.hasOwnProperty(keyExtractor) + ? item[keyExtractor] : `${index}` + } + data={this.props.options} + renderItem={this._renderItem} + ItemSeparatorComponent={renderSeparator || this._renderSeparator} automaticallyAdjustContentInsets={false} showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps={keyboardShouldPersistTaps} @@ -295,40 +298,34 @@ export default class ModalDropdown extends Component { ); } - get _dataSource() { - const {options} = this.props; - const ds = new ListView.DataSource({ - rowHasChanged: (r1, r2) => r1 !== r2 - }); - return ds.cloneWithRows(options); - } + _renderItem = ({item, index, separators}) => { + const { renderRow, dropdownTextStyle, dropdownTextHighlightStyle, accessible, keyExtractor } = this.props; + const { selectedIndex } = this.state; + + const highlighted = index == selectedIndex; + + let row = !renderRow ? ( + + {item} + + ) : + renderRow(item, index, highlighted); - _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 ? - ( - {rowData} - ) : - renderRow(rowData, rowID, highlighted); const preservedProps = { - key, accessible, - onPress: () => this._onRowPress(rowData, sectionID, rowID, highlightRow), + onPress: () => this._onItemPress(item, index), }; + 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 ( @@ -362,6 +359,7 @@ export default class ModalDropdown extends Component { break; } } + return ( {row} @@ -369,16 +367,15 @@ export default class ModalDropdown extends Component { ); }; - _onRowPress(rowData, sectionID, rowID, highlightRow) { + _onItemPress(item, index) { const {onSelect, renderButtonText, onDropdownWillHide} = this.props; - if (!onSelect || onSelect(rowID, rowData) !== false) { - highlightRow(sectionID, rowID); - const value = renderButtonText && renderButtonText(rowData) || rowData.toString(); + if (!onSelect || onSelect(index, item) !== false) { + const value = renderButtonText && renderButtonText(item) || item.toString(); this._nextValue = value; - this._nextIndex = rowID; + this._nextIndex = index; this.setState({ buttonText: value, - selectedIndex: rowID + selectedIndex: index }); } if (!onDropdownWillHide || onDropdownWillHide() !== false) { @@ -388,12 +385,9 @@ export default class ModalDropdown extends Component { } } - _renderSeparator = (sectionID, rowID, adjacentRowHighlighted) => { - const key = `spr_${rowID}`; + _renderSeparator = ({ highlighted, leadingItem }) => { return ( - + ); }; } diff --git a/package.json b/package.json index db7820b..38c963b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-modal-dropdown", - "version": "0.7.0", + "version": "0.8.0", "description": "A react-native dropdown component for both iOS and Android.", "keywords": [ "react", @@ -30,7 +30,6 @@ }, "dependencies": { "prop-types": "^15.6.0", - "deprecated-react-native-listview": "0.0.5" }, "scripts": { "test": "echo \"no test specified\" && exit 0"