From 7b56ad24941e6e597c1666eeb634dd6c7ce5f37b Mon Sep 17 00:00:00 2001 From: lenigmacedo Date: Thu, 10 Dec 2020 21:34:01 -0300 Subject: [PATCH 1/2] Change scrollview to flatlist code by: LucasRobert123 --- src/index.js | 310 +++++++++++++++++++++++++++------------------------ 1 file changed, 163 insertions(+), 147 deletions(-) diff --git a/src/index.js b/src/index.js index 2b307a3f..996e1463 100644 --- a/src/index.js +++ b/src/index.js @@ -7,11 +7,13 @@ import { ScrollView, Platform, TextInput, - ViewPropTypes + FlatList, + ViewPropTypes, + YellowBox } from 'react-native'; // Icon -import Feather from 'react-native-vector-icons/Feather'; +import { Feather } from '@expo/vector-icons'; Feather.loadFont(); class DropDownPicker extends React.Component { @@ -21,7 +23,7 @@ class DropDownPicker extends React.Component { let choice; let items = []; let defaultValueIndex; // captures index of first defaultValue for initial scrolling - if (! props.multiple) { + if (!props.multiple) { if (props.defaultValue || props.defaultValue === 0) { choice = props.items.find(item => item.value === props.defaultValue); } else if (props.items.filter(item => item.hasOwnProperty('selected') && item.selected === true).length > 0) { @@ -64,11 +66,11 @@ class DropDownPicker extends React.Component { static getDerivedStateFromProps(props, state) { // Change default value (! multiple) - if (! state.props.multiple && props.defaultValue !== state.props.defaultValue) { + if (!state.props.multiple && props.defaultValue !== state.props.defaultValue) { const { label, value, icon } = props.defaultValue === null ? { label: null, value: null, - icon: () => {} + icon: () => { } } : props.items.find(item => item.value === props.defaultValue); return { choice: { @@ -93,11 +95,11 @@ class DropDownPicker extends React.Component { } return { - choice: items, - props: { - ...state.props, - defaultValue: props.defaultValue - } + choice: items, + props: { + ...state.props, + defaultValue: props.defaultValue + } } } @@ -141,7 +143,7 @@ class DropDownPicker extends React.Component { y: this.dropdownCoordinates[this.state.defaultValueIndex], animated: true, }); - this.setState({initialScroll: false}); + this.setState({ initialScroll: false }); }, 200); } } @@ -155,20 +157,20 @@ class DropDownPicker extends React.Component { return { label: null, value: null, - icon: () => {} + icon: () => { } } } toggle() { this.setState({ - isVisible: ! this.state.isVisible, + isVisible: !this.state.isVisible, }, () => { const isVisible = this.state.isVisible; if (isVisible) { - this.open(false); - } else { - this.close(false); - } + this.open(false); + } else { + this.close(false); + } }); } @@ -214,7 +216,7 @@ class DropDownPicker extends React.Component { }); } - removeItem(value, {changeDefaultValue = true} = {}) { + removeItem(value, { changeDefaultValue = true } = {}) { const items = [...this.props.items].filter(item => item.value !== value); this.setPropState({ items @@ -235,7 +237,7 @@ class DropDownPicker extends React.Component { }); } - setPropState(data, callback = () => {}) { + setPropState(data, callback = () => { }) { this.props.onChangeList(data.items, callback); } @@ -245,13 +247,13 @@ class DropDownPicker extends React.Component { open(setState = true) { this.setState({ - ...(setState && {isVisible: true}) + ...(setState && { isVisible: true }) }, () => this.props.onOpen()); } close(setState = true) { this.setState({ - ...(setState && {isVisible: false}), + ...(setState && { isVisible: false }), searchableText: null }, () => this.props.onClose()); } @@ -279,7 +281,7 @@ class DropDownPicker extends React.Component { select(item) { const { multiple } = this.state.props; - if (! multiple) { + if (!multiple) { this.setState({ choice: { label: item.label, @@ -317,7 +319,7 @@ class DropDownPicker extends React.Component { } // onClose callback (! multiple) - if (! multiple) + if (!multiple) this.props.onClose(); } @@ -344,7 +346,7 @@ class DropDownPicker extends React.Component { } isSelected(item) { - return this.state.choice.findIndex(a => a.value === item.value) > -1; + return this.state.choice.findIndex(a => a.value === item.value) > -1; } getLabel(item, selected = false) { @@ -360,15 +362,77 @@ class DropDownPicker extends React.Component { } else { return item; } - + let len2 = label.length; return label + (len !== len2 ? '...' : ''); } + componentDidMount() { + YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']); + } + render() { this.props.controller(this); + + // Item + const Item = ({ item, index }) => ( + { + const layout = event.nativeEvent.layout; + this.dropdownCoordinates[index] = layout.y; + }} + > + this.select(item)} + style={[styles.dropDownItem, this.props.itemStyle, ( + this.state.choice.value === item.value && this.props.activeItemStyle + ), { + opacity: item?.disabled || false === true ? 0.3 : 1, + alignItems: 'center', + ...( + multiple ? { + justifyContent: 'space-between', + ...(this.isSelected(item) && this.props.activeItemStyle) + } : { + + } + ) + }]} + disabled={item?.disabled || false === true} + > + + {item.icon && item.icon()} + + {this.getLabel(item)} + + + + { + this.state.props.multiple && this.state.choice.findIndex(i => i.label === item.label && i.value === item.value) > -1 && ( + this.props.customTickIcon() + ) + } + + + ) const { multiple, disabled } = this.state.props; - const { placeholder, scrollViewProps, searchTextInputProps, renderSeperator} = this.props; + const { placeholder, scrollViewProps, searchTextInputProps } = this.props; const isPlaceholderActive = this.state.choice.label === null; const label = isPlaceholderActive ? (placeholder) : this.getLabel(this.state.choice?.label, true); const placeholderStyle = isPlaceholderActive && this.props.placeholderStyle; @@ -378,9 +442,9 @@ class DropDownPicker extends React.Component { return ( - {this.state.choice.icon && ! multiple && this.state.choice.icon()} - - {multiple ? ( - this.state.choice.length > 0 ? this.getNumberOfItems() : placeholder - ) : label} - + {this.state.choice.icon && !multiple && this.state.choice.icon()} + + {multiple ? ( + this.state.choice.length > 0 ? this.getNumberOfItems() : placeholder + ) : label} + {this.props.showArrow && ( - - { - ! this.state.isVisible ? ( - this.props.customArrowDown(this.props.arrowSize, this.props.arrowColor) - ) : ( - this.props.customArrowUp(this.props.arrowSize, this.props.arrowColor) - ) - } + + { + !this.state.isVisible ? ( + this.props.customArrowDown(this.props.arrowSize, this.props.arrowColor) + ) : ( + this.props.customArrowUp(this.props.arrowSize, this.props.arrowColor) + ) + } )} @@ -431,101 +495,53 @@ class DropDownPicker extends React.Component { styles.dropDown, styles.dropDownBox, this.props.dropDownStyle, - ! this.state.isVisible && styles.hidden, { + !this.state.isVisible && styles.hidden, { top: this.state.top, maxHeight: this.props.dropDownMaxHeight, zIndex: this.props.zIndex } ]}> { - this.props.searchable && ( - - { - this.setState({ - searchableText: text - }) - if(searchTextInputProps.onChangeText) searchTextInputProps.onChangeText(text); - }} - /> - - ) + this.props.searchable && ( + + { + this.setState({ + searchableText: text + }) + if (searchTextInputProps.onChangeText) searchTextInputProps.onChangeText(text); + }} + /> + + ) } - { - this.scrollViewRef = ref; - }} - {...scrollViewProps}> - {items.filter(item => typeof item.hidden === 'undefined' || item.hidden === false).length > 0 ? items.map((item, index) => ( - { - const layout = event.nativeEvent.layout; - this.dropdownCoordinates[index] = layout.y; - }} - > - this.select(item)} - style={[styles.dropDownItem, this.props.itemStyle, ( - this.state.choice.value === item.value && this.props.activeItemStyle - ), { - opacity: item?.disabled || false === true ? 0.3 : 1, - alignItems: 'center', - ...( - multiple ? { - justifyContent: 'space-between', - ...(this.isSelected(item) && this.props.activeItemStyle) - } : { - - } - ) - }]} - disabled={item?.disabled || false === true} - > - - {item.icon && item.icon()} - - {this.getLabel(item)} - - - - { - this.state.props.multiple && this.state.choice.findIndex(i => i.label === item.label && i.value === item.value) > -1 && ( - this.props.customTickIcon() - ) - } - - {renderSeperator && index !== items.length - 1 && renderSeperator()} - - )) : ( + {items.filter(item => typeof item.hidden === 'undefined' || item.hidden === false).length > 0 + ? + item.value} + renderItem={({ item, index }) => ( + + )} + nestedScrollEnabled={true} + ref={ref => { + this.scrollViewRef = ref; + }} + /> + : + ( {this.props.searchableError()} - )} - + ) + } + ); @@ -568,11 +584,11 @@ DropDownPicker.defaultProps = { labelLength: 1000, scrollViewProps: {}, searchTextInputProps: {}, - controller: () => {}, - onOpen: () => {}, - onClose: () => {}, - onChangeItem: () => {}, - onChangeList: () => {}, + controller: () => { }, + onOpen: () => { }, + onClose: () => { }, + onChangeItem: () => { }, + onChangeList: () => { }, }; // DropDownPicker.propTypes = { @@ -656,12 +672,12 @@ const styles = StyleSheet.create({ justifyContent: 'center' }, input: { - flex: 1, - borderColor: '#dfdfdf', - borderBottomWidth: 1, - paddingHorizontal: 0, - paddingVertical: 8, - marginBottom: 10, + flex: 1, + borderColor: '#dfdfdf', + borderBottomWidth: 1, + paddingHorizontal: 0, + paddingVertical: 8, + marginBottom: 10, }, hidden: { position: 'relative', @@ -679,4 +695,4 @@ const styles = StyleSheet.create({ } }); -export default DropDownPicker; +export default DropDownPicker; \ No newline at end of file From ac6728a0fda8f2709f10b529fcd89369dce171f4 Mon Sep 17 00:00:00 2001 From: lenigmacedo Date: Thu, 10 Dec 2020 22:41:32 -0300 Subject: [PATCH 2/2] add toString in key extractor change yellowbox to logbox --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 996e1463..e3830545 100644 --- a/src/index.js +++ b/src/index.js @@ -9,7 +9,7 @@ import { TextInput, FlatList, ViewPropTypes, - YellowBox + LogBox } from 'react-native'; // Icon @@ -368,7 +368,7 @@ class DropDownPicker extends React.Component { } componentDidMount() { - YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']); + LogBox.ignoreLogs(['VirtualizedLists should never be nested']); } render() { @@ -525,7 +525,7 @@ class DropDownPicker extends React.Component { ? item.value} + keyExtractor={(item) => item.value.toString()} renderItem={({ item, index }) => ( )}