From 6bd3fb385294fb47da6bae4fd885500dcacb7398 Mon Sep 17 00:00:00 2001 From: Marshall Shen Date: Tue, 15 Oct 2019 08:30:54 -0500 Subject: [PATCH 01/10] update ListView to Flatlist --- components/ModalDropdown.js | 385 +++++++++++++++++------------------- 1 file changed, 183 insertions(+), 202 deletions(-) diff --git a/components/ModalDropdown.js b/components/ModalDropdown.js index ace1472..3591ca2 100644 --- a/components/ModalDropdown.js +++ b/components/ModalDropdown.js @@ -1,13 +1,4 @@ -/** - * Created by sohobloo on 16/9/13. - */ - -'use strict'; - -import React, { - Component, -} from 'react'; - +import React, { Component } from 'react'; import { StyleSheet, Dimensions, @@ -19,47 +10,59 @@ import { TouchableHighlight, Modal, ActivityIndicator, + FlatList, } from 'react-native'; - -import ListView from "deprecated-react-native-listview"; import PropTypes from 'prop-types'; - const TOUCHABLE_ELEMENTS = [ 'TouchableHighlight', 'TouchableOpacity', 'TouchableWithoutFeedback', - 'TouchableNativeFeedback' + 'TouchableNativeFeedback', ]; - export default class ModalDropdown extends Component { static propTypes = { disabled: PropTypes.bool, scrollEnabled: PropTypes.bool, defaultIndex: PropTypes.number, defaultValue: PropTypes.string, - options: PropTypes.array, - + options: PropTypes.array.isRequired, accessible: PropTypes.bool, animated: PropTypes.bool, showsVerticalScrollIndicator: PropTypes.bool, keyboardShouldPersistTaps: PropTypes.string, - - style: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), - textStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), - dropdownStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), - dropdownTextStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), - dropdownTextHighlightStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), - + style: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array, + ]), + textStyle: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array, + ]), + dropdownStyle: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array, + ]), + dropdownTextStyle: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array, + ]), + dropdownTextHighlightStyle: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array, + ]), adjustFrame: PropTypes.func, renderRow: PropTypes.func, renderSeparator: PropTypes.func, renderButtonText: PropTypes.func, - onDropdownWillShow: PropTypes.func, onDropdownWillHide: PropTypes.func, - onSelect: PropTypes.func + onSelect: PropTypes.func, }; - static defaultProps = { disabled: false, scrollEnabled: true, @@ -68,29 +71,25 @@ export default class ModalDropdown extends Component { options: null, animated: true, showsVerticalScrollIndicator: true, - keyboardShouldPersistTaps: 'never' + keyboardShouldPersistTaps: 'never', }; - constructor(props) { super(props); - this._button = null; this._buttonFrame = null; this._nextValue = null; this._nextIndex = null; - this.state = { accessible: !!props.accessible, loading: !props.options, showDropdown: false, buttonText: props.defaultValue, - selectedIndex: props.defaultIndex + selectedIndex: props.defaultIndex, }; } - - componentWillReceiveProps(nextProps) { - let {buttonText, selectedIndex} = this.state; - const {defaultIndex, defaultValue, options} = nextProps; + UNSAFE_componentWillReceiveProps(nextProps) { + let { buttonText, selectedIndex } = this.state; + const { defaultIndex, defaultValue, options } = nextProps; buttonText = this._nextValue == null ? buttonText : this._nextValue; selectedIndex = this._nextIndex == null ? selectedIndex : this._nextIndex; if (selectedIndex < 0) { @@ -101,117 +100,110 @@ export default class ModalDropdown extends Component { } this._nextValue = null; this._nextIndex = null; - this.setState({ loading: !options, buttonText, - selectedIndex + selectedIndex, }); } - - render() { - return ( - - {this._renderButton()} - {this._renderModal()} - - ); - } - _updatePosition(callback) { if (this._button && this._button.measure) { this._button.measure((fx, fy, width, height, px, py) => { - this._buttonFrame = {x: px, y: py, w: width, h: height}; + this._buttonFrame = { + x: px, + y: py, + w: width, + h: height, + }; callback && callback(); }); } } - show() { this._updatePosition(() => { this.setState({ - showDropdown: true + showDropdown: true, }); }); } - hide() { this.setState({ - showDropdown: false + showDropdown: false, }); } - select(idx) { - const {defaultValue, options, defaultIndex, renderButtonText} = this.props; - + const { + defaultValue, + options, + defaultIndex, + renderButtonText, + } = this.props; let value = defaultValue; if (idx == null || !options || idx >= options.length) { idx = defaultIndex; } - if (idx >= 0) { - value = renderButtonText ? renderButtonText(options[idx]) : options[idx].toString(); + value = renderButtonText + ? renderButtonText(options[idx]) + : options[idx].toString(); } - this._nextValue = value; this._nextIndex = idx; - this.setState({ buttonText: value, - selectedIndex: idx + selectedIndex: idx, }); } - _renderButton() { - const {disabled, accessible, children, textStyle} = this.props; - const {buttonText} = this.state; - + const { disabled, accessible, children, textStyle } = this.props; + const { buttonText } = this.state; return ( - this._button = button} - disabled={disabled} - accessible={accessible} - onPress={this._onButtonPress} + (this._button = button)} + disabled={disabled} + accessible={accessible} + onPress={this._onButtonPress} > - { - children || - ( - - - {buttonText} - - - ) - } + {children || ( + + + {buttonText} + + + )} ); } - _onButtonPress = () => { - const {onDropdownWillShow} = this.props; - if (!onDropdownWillShow || - onDropdownWillShow() !== false) { + const { onDropdownWillShow } = this.props; + if (!onDropdownWillShow || onDropdownWillShow() !== false) { this.show(); } }; - _renderModal() { - const {animated, accessible, dropdownStyle} = this.props; - const {showDropdown, loading} = this.state; + 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 ( - - @@ -223,126 +215,117 @@ export default class ModalDropdown extends Component { ); } } - _calcPosition() { - const {dropdownStyle, style, adjustFrame} = this.props; - + const { dropdownStyle, style, adjustFrame } = this.props; const dimensions = Dimensions.get('window'); const windowWidth = dimensions.width; const windowHeight = dimensions.height; - - const dropdownHeight = (dropdownStyle && StyleSheet.flatten(dropdownStyle).height) || + const dropdownHeight = + (dropdownStyle && StyleSheet.flatten(dropdownStyle).height) || StyleSheet.flatten(styles.dropdown).height; - - const bottomSpace = windowHeight - this._buttonFrame.y - this._buttonFrame.h; + const bottomSpace = + windowHeight - this._buttonFrame.y - this._buttonFrame.h; const rightSpace = windowWidth - this._buttonFrame.x; - const showInBottom = bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y; + const showInBottom = + bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y; const showInLeft = rightSpace >= this._buttonFrame.x; - const positionStyle = { height: dropdownHeight, - top: showInBottom ? this._buttonFrame.y + this._buttonFrame.h : Math.max(0, this._buttonFrame.y - dropdownHeight), + top: showInBottom + ? this._buttonFrame.y + this._buttonFrame.h + : Math.max(0, this._buttonFrame.y - dropdownHeight), }; - if (showInLeft) { positionStyle.left = this._buttonFrame.x; } else { - const dropdownWidth = (dropdownStyle && StyleSheet.flatten(dropdownStyle).width) || - (style && StyleSheet.flatten(style).width) || -1; + const dropdownWidth = + (dropdownStyle && StyleSheet.flatten(dropdownStyle).width) || + (style && StyleSheet.flatten(style).width) || + -1; if (dropdownWidth !== -1) { positionStyle.width = dropdownWidth; } positionStyle.right = rightSpace - this._buttonFrame.w; } - return adjustFrame ? adjustFrame(positionStyle) : positionStyle; } - _onRequestClose = () => { - const {onDropdownWillHide} = this.props; - if (!onDropdownWillHide || - onDropdownWillHide() !== false) { + const { onDropdownWillHide } = this.props; + if (!onDropdownWillHide || onDropdownWillHide() !== false) { this.hide(); } }; - _onModalPress = () => { - const {onDropdownWillHide} = this.props; - if (!onDropdownWillHide || - onDropdownWillHide() !== false) { + const { onDropdownWillHide } = this.props; + if (!onDropdownWillHide || onDropdownWillHide() !== false) { this.hide(); } }; - - _renderLoading() { - return ( - - ); - } - + _renderLoading = () => { + return ; + }; _renderDropdown() { - const {scrollEnabled, renderSeparator, showsVerticalScrollIndicator, keyboardShouldPersistTaps} = this.props; + const { + scrollEnabled, + renderSeparator, + showsVerticalScrollIndicator, + keyboardShouldPersistTaps, + options, + } = this.props; return ( - (`key-${i}`)} + renderItem={this._renderItem} + ItemSeparatorComponent={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 ? - ( { + const { + renderRow, + dropdownTextStyle, + dropdownTextHighlightStyle, + accessible, + } = this.props; + const { selectedIndex } = this.state; + const key = `row_${index}`; + const highlighted = index === selectedIndex; + const row = !renderRow ? ( + - {rowData} - ) : - renderRow(rowData, rowID, highlighted); + {item} + + ) : ( + renderRow(item, index, highlighted) + ); const preservedProps = { key, accessible, - onPress: () => this._onRowPress(rowData, sectionID, rowID, highlightRow), + onPress: () => this._onRowPress(item, index, separators), }; - if (TOUCHABLE_ELEMENTS.find(name => name == row.type.displayName)) { - const props = {...row.props}; + 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; + const { children } = row.props; switch (row.type.displayName) { case 'TouchableHighlight': { - return ( - - {children} - - ); + return {children}; } case 'TouchableOpacity': { - return ( - - {children} - - ); + return {children}; } case 'TouchableWithoutFeedback': { return ( @@ -362,51 +345,49 @@ export default class ModalDropdown extends Component { break; } } - return ( - - {row} - - ); + return {row}; }; - - _onRowPress(rowData, sectionID, rowID, highlightRow) { - const {onSelect, renderButtonText, onDropdownWillHide} = this.props; + _onRowPress(rowData, rowID, highlightRow) { + const { onSelect, renderButtonText, onDropdownWillHide } = this.props; if (!onSelect || onSelect(rowID, rowData) !== false) { - highlightRow(sectionID, rowID); - const value = renderButtonText && renderButtonText(rowData) || rowData.toString(); + highlightRow.highlight(rowID); + const value = + (renderButtonText && renderButtonText(rowData)) || rowData.toString(); this._nextValue = value; this._nextIndex = rowID; this.setState({ buttonText: value, - selectedIndex: rowID + selectedIndex: rowID, }); } if (!onDropdownWillHide || onDropdownWillHide() !== false) { this.setState({ - showDropdown: false + showDropdown: false, }); } } - - _renderSeparator = (sectionID, rowID, adjacentRowHighlighted) => { - const key = `spr_${rowID}`; + _renderSeparator = ({ leadingItem = '' }) => { + const key = `spr_${leadingItem}`; + return ; + }; + render() { return ( - + + {this._renderButton()} + {this._renderModal()} + ); - }; + } } - const styles = StyleSheet.create({ button: { - justifyContent: 'center' + justifyContent: 'center', }, buttonText: { - fontSize: 12 + fontSize: 12, }, modal: { - flexGrow: 1 + flexGrow: 1, }, dropdown: { position: 'absolute', @@ -415,13 +396,13 @@ const styles = StyleSheet.create({ borderColor: 'lightgray', borderRadius: 2, backgroundColor: 'white', - justifyContent: 'center' + justifyContent: 'center', }, loading: { - alignSelf: 'center' + alignSelf: 'center', }, list: { - //flexGrow: 1, + // flexGrow: 1, }, rowText: { paddingHorizontal: 6, @@ -429,13 +410,13 @@ const styles = StyleSheet.create({ fontSize: 11, color: 'gray', backgroundColor: 'white', - textAlignVertical: 'center' + textAlignVertical: 'center', }, highlightedRowText: { - color: 'black' + color: 'black', }, separator: { height: StyleSheet.hairlineWidth, - backgroundColor: 'lightgray' - } + backgroundColor: 'lightgray', + }, }); From 05498c4ee236217e12c2ea70a49725dd3da0b447 Mon Sep 17 00:00:00 2001 From: acolicc Date: Tue, 29 Oct 2019 10:54:35 -0400 Subject: [PATCH 02/10] remove deprecated lifecycle --- components/ModalDropdown.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/ModalDropdown.js b/components/ModalDropdown.js index 3591ca2..745c30f 100644 --- a/components/ModalDropdown.js +++ b/components/ModalDropdown.js @@ -87,9 +87,9 @@ export default class ModalDropdown extends Component { selectedIndex: props.defaultIndex, }; } - UNSAFE_componentWillReceiveProps(nextProps) { + componentDidUpdate(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) { @@ -308,8 +308,8 @@ export default class ModalDropdown extends Component { {item} ) : ( - renderRow(item, index, highlighted) - ); + renderRow(item, index, highlighted) + ); const preservedProps = { key, accessible, From a2b9a911fa13ac5198011f2799316d0d7303cc0a Mon Sep 17 00:00:00 2001 From: acolicc Date: Tue, 29 Oct 2019 11:49:54 -0400 Subject: [PATCH 03/10] fix componentDidUpdate --- components/ModalDropdown.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/ModalDropdown.js b/components/ModalDropdown.js index 745c30f..184ea4b 100644 --- a/components/ModalDropdown.js +++ b/components/ModalDropdown.js @@ -87,9 +87,9 @@ export default class ModalDropdown extends Component { selectedIndex: props.defaultIndex, }; } - componentDidUpdate(prevProps, prevState) { - let { buttonText, selectedIndex } = this.state; - const { defaultIndex, defaultValue, options } = this.props; + static getDerivedStateFromProps(props, state) { + let { buttonText, selectedIndex } = state; + const { defaultIndex, defaultValue, options } = props; buttonText = this._nextValue == null ? buttonText : this._nextValue; selectedIndex = this._nextIndex == null ? selectedIndex : this._nextIndex; if (selectedIndex < 0) { @@ -100,11 +100,11 @@ export default class ModalDropdown extends Component { } this._nextValue = null; this._nextIndex = null; - this.setState({ + return { loading: !options, buttonText, selectedIndex, - }); + } } _updatePosition(callback) { if (this._button && this._button.measure) { From a7df375570fb1b0c45084f67d7a25ce27bf01931 Mon Sep 17 00:00:00 2001 From: Bdy Date: Thu, 16 Jan 2020 16:58:13 +0100 Subject: [PATCH 04/10] Add sectionList support in drop down list --- components/ModalDropdown.js | 51 +++++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 11 deletions(-) diff --git a/components/ModalDropdown.js b/components/ModalDropdown.js index 184ea4b..9f0c56b 100644 --- a/components/ModalDropdown.js +++ b/components/ModalDropdown.js @@ -12,6 +12,21 @@ import { ActivityIndicator, FlatList, } from 'react-native'; +import React, { Component } from 'react'; +import { + StyleSheet, + Dimensions, + View, + Text, + TouchableWithoutFeedback, + TouchableNativeFeedback, + TouchableOpacity, + TouchableHighlight, + Modal, + ActivityIndicator, + FlatList, + SectionList, +} from 'react-native'; import PropTypes from 'prop-types'; const TOUCHABLE_ELEMENTS = [ 'TouchableHighlight', @@ -58,6 +73,7 @@ export default class ModalDropdown extends Component { adjustFrame: PropTypes.func, renderRow: PropTypes.func, renderSeparator: PropTypes.func, + renderSectionHeader: PropTypes.func, renderButtonText: PropTypes.func, onDropdownWillShow: PropTypes.func, onDropdownWillHide: PropTypes.func, @@ -70,6 +86,7 @@ export default class ModalDropdown extends Component { defaultValue: 'Please select...', options: null, animated: true, + renderSectionHeader: null, showsVerticalScrollIndicator: true, keyboardShouldPersistTaps: 'never', }; @@ -271,19 +288,31 @@ export default class ModalDropdown extends Component { showsVerticalScrollIndicator, keyboardShouldPersistTaps, options, + renderSectionHeader, } = this.props; + const props = { + data: options, + scrollEnabled: scrollEnabled, + style: styles.list, + keyExtractor: (item, i) => (`key-${i}`), + renderItem: this._renderItem, + ItemSeparatorComponent: renderSeparator || this._renderSeparator, + automaticallyAdjustContentInsets: false, + showsVerticalScrollIndicator: showsVerticalScrollIndicator, + keyboardShouldPersistTaps: keyboardShouldPersistTaps, + } + if (renderSectionHeader) { + console.log('pass', options) + return ( + + ); + } return ( - (`key-${i}`)} - renderItem={this._renderItem} - ItemSeparatorComponent={renderSeparator || this._renderSeparator} - automaticallyAdjustContentInsets={false} - showsVerticalScrollIndicator={showsVerticalScrollIndicator} - keyboardShouldPersistTaps={keyboardShouldPersistTaps} - /> + ); } _renderItem = ({ item, index, separators }) => { From 5e5ca17ad4802d64e8dd0f042363b18318808fa5 Mon Sep 17 00:00:00 2001 From: Bdy Date: Thu, 16 Jan 2020 17:05:10 +0100 Subject: [PATCH 05/10] Update README.md --- README.md | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/README.md b/README.md index f863606..11e5ed8 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,44 @@ +# Support SectionList in dropdown list + +You just need to format your data as for a SectionList and add the "renderSectionHeader" porps + +```javascript +const options = [ + { + title: 'Main dishes', + data: ['Pizza', 'Burger', 'Risotto'], + }, + { + title: 'Sides', + data: ['French Fries', 'Onion Rings', 'Fried Shrimps'], + }, + { + title: 'Drinks', + data: ['Water', 'Coke', 'Beer'], + }, + { + title: 'Desserts', + data: ['Cheese Cake', 'Ice Cream'], + }, +]; +``` + +```javascript +renderHeader = ({ section: { title } }) => ( + + {title} + +) +``` + +```javascript + +``` + [![npm version](https://badge.fury.io/js/react-native-modal-dropdown.svg)](https://badge.fury.io/js/react-native-modal-dropdown) # react-native-modal-dropdown From 3b9395ccf9316a03e63cb0e4756af82afa6838f1 Mon Sep 17 00:00:00 2001 From: Bdy Date: Thu, 16 Jan 2020 21:40:06 +0100 Subject: [PATCH 06/10] oups remove console log --- components/ModalDropdown.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/ModalDropdown.js b/components/ModalDropdown.js index 9f0c56b..cc5b0cf 100644 --- a/components/ModalDropdown.js +++ b/components/ModalDropdown.js @@ -302,7 +302,6 @@ export default class ModalDropdown extends Component { keyboardShouldPersistTaps: keyboardShouldPersistTaps, } if (renderSectionHeader) { - console.log('pass', options) return ( Date: Fri, 17 Jan 2020 11:48:48 +0100 Subject: [PATCH 07/10] can dont use index in selected value --- components/ModalDropdown.js | 42 ++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/components/ModalDropdown.js b/components/ModalDropdown.js index cc5b0cf..51be436 100644 --- a/components/ModalDropdown.js +++ b/components/ModalDropdown.js @@ -1,18 +1,4 @@ import React, { Component } from 'react'; -import { - StyleSheet, - Dimensions, - View, - Text, - TouchableWithoutFeedback, - TouchableNativeFeedback, - TouchableOpacity, - TouchableHighlight, - Modal, - ActivityIndicator, - FlatList, -} from 'react-native'; -import React, { Component } from 'react'; import { StyleSheet, Dimensions, @@ -39,7 +25,9 @@ export default class ModalDropdown extends Component { disabled: PropTypes.bool, scrollEnabled: PropTypes.bool, defaultIndex: PropTypes.number, + selected: PropTypes.string, defaultValue: PropTypes.string, + selectByKey: PropTypes.string, options: PropTypes.array.isRequired, accessible: PropTypes.bool, animated: PropTypes.bool, @@ -82,6 +70,8 @@ export default class ModalDropdown extends Component { static defaultProps = { disabled: false, scrollEnabled: true, + selected: null, + selectByKey: null, defaultIndex: -1, defaultValue: 'Please select...', options: null, @@ -100,8 +90,8 @@ export default class ModalDropdown extends Component { accessible: !!props.accessible, loading: !props.options, showDropdown: false, - buttonText: props.defaultValue, - selectedIndex: props.defaultIndex, + buttonText: props.selectByKey ? props.selected : props.defaultValue, + selectedIndex: props.selectByKey ? props.selected : props.defaultIndex, }; } static getDerivedStateFromProps(props, state) { @@ -154,6 +144,7 @@ export default class ModalDropdown extends Component { options, defaultIndex, renderButtonText, + selectByKey, } = this.props; let value = defaultValue; if (idx == null || !options || idx >= options.length) { @@ -167,7 +158,7 @@ export default class ModalDropdown extends Component { this._nextValue = value; this._nextIndex = idx; this.setState({ - buttonText: value, + buttonText: selectByKey ? options[idx][selectByKey] : value, selectedIndex: idx, }); } @@ -320,10 +311,14 @@ export default class ModalDropdown extends Component { dropdownTextStyle, dropdownTextHighlightStyle, accessible, + selectByKey, + selected, } = this.props; const { selectedIndex } = this.state; - const key = `row_${index}`; - const highlighted = index === selectedIndex; + const selector = selectByKey ? item[selectByKey] : index; + const selectedItem = selectByKey ? selected : selectedIndex; + const key = `row_${selector}`; + const highlighted = selector === selectedItem; const row = !renderRow ? ( {row}; }; _onRowPress(rowData, rowID, highlightRow) { - const { onSelect, renderButtonText, onDropdownWillHide } = this.props; + const { + onSelect, + renderButtonText, + onDropdownWillHide, + selectByKey, + } = this.props; if (!onSelect || onSelect(rowID, rowData) !== false) { highlightRow.highlight(rowID); const value = @@ -384,7 +384,7 @@ export default class ModalDropdown extends Component { this._nextValue = value; this._nextIndex = rowID; this.setState({ - buttonText: value, + buttonText: selectByKey ? rowData[selectByKey] : value, selectedIndex: rowID, }); } From 47b5bc26b8b2277036ee5472681de7432864f395 Mon Sep 17 00:00:00 2001 From: Bdy Date: Fri, 17 Jan 2020 11:54:26 +0100 Subject: [PATCH 08/10] Update README.md --- README.md | 46 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 11e5ed8..40feffc 100644 --- a/README.md +++ b/README.md @@ -5,20 +5,38 @@ You just need to format your data as for a SectionList and add the "renderSectio ```javascript const options = [ { - title: 'Main dishes', - data: ['Pizza', 'Burger', 'Risotto'], + title: 'Pizza', + data: [ + { + key: 'pizza1', + name: 'Name of Pizza n°1', + }, + { + key: 'pizza2', + name: 'Name of Pizza n°2', + }, + { + key: 'pizza3', + name: 'Name of Pizza n°3', + }, + ], }, { - title: 'Sides', - data: ['French Fries', 'Onion Rings', 'Fried Shrimps'], - }, - { - title: 'Drinks', - data: ['Water', 'Coke', 'Beer'], - }, - { - title: 'Desserts', - data: ['Cheese Cake', 'Ice Cream'], + title: 'Burger', + data: [ + { + key: 'burger1', + name: 'Name of Burger n°1', + }, + { + key: 'burger2', + name: 'Name of Burger n°2', + }, + { + key: 'burger3', + name: 'Name of Burger n°3', + }, + ], }, ]; ``` @@ -35,10 +53,14 @@ renderHeader = ({ section: { title } }) => ( ``` +# After it's same of fork + [![npm version](https://badge.fury.io/js/react-native-modal-dropdown.svg)](https://badge.fury.io/js/react-native-modal-dropdown) # react-native-modal-dropdown From 9c8cac752ef12ea435109355fc7cce32ac5be2b2 Mon Sep 17 00:00:00 2001 From: Bdy Date: Fri, 17 Jan 2020 11:54:33 +0100 Subject: [PATCH 09/10] Update README.md From 0c58fb5b4f5c75fcd2ef40caf5fda291aa135d1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20MARTIN?= Date: Sat, 25 Apr 2020 23:28:42 +0200 Subject: [PATCH 10/10] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index db7820b..d8e25a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-modal-dropdown", - "version": "0.7.0", + "version": "0.7.1", "description": "A react-native dropdown component for both iOS and Android.", "keywords": [ "react",