react-native-modal-dropdown - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

components/ModalDropdown.js

@@ -32,2 +32,3 @@ /**
     disabled: PropTypes.bool,
+    scrollEnabled: PropTypes.bool,
     defaultIndex: PropTypes.number,
@@ -51,2 +52,3 @@ defaultValue: PropTypes.string,
     renderSeparator: PropTypes.func,
+    renderButtonText: PropTypes.func,
 
@@ -60,2 +62,3 @@ onDropdownWillShow: PropTypes.func,
     disabled: false,
+    scrollEnabled: true,
     defaultIndex: -1,
@@ -88,4 +91,4 @@ defaultValue: 'Please select...',
   componentWillReceiveProps(nextProps) {
-    var buttonText = this._nextValue == null ? this.state.buttonText : this._nextValue.toString();
-    var selectedIndex = this._nextIndex == null ? this.state.selectedIndex : this._nextIndex;
+    let buttonText = this._nextValue == null ? this.state.buttonText : this._nextValue.toString();
+    let selectedIndex = this._nextIndex == null ? this.state.selectedIndex : this._nextIndex;
     if (selectedIndex < 0) {
@@ -141,3 +144,3 @@ selectedIndex = nextProps.defaultIndex;
   select(idx) {
-    var value = this.props.defaultValue;
+    let value = this.props.defaultValue;
     if (idx == null || this.props.options == null || idx >= this.props.options.length) {
@@ -190,4 +193,4 @@ idx = this.props.defaultIndex;
     if (this.state.showDropdown && this._buttonFrame) {
-      let frameStyle = this._calcPosition();
-      let animationType = this.props.animated ? 'fade' : 'none';
+      const frameStyle = this._calcPosition();
+      const animationType = this.props.animated ? 'fade' : 'none';
       return (
@@ -214,15 +217,15 @@ <Modal animationType={animationType}
   _calcPosition() {
-    let dimensions = Dimensions.get('window');
-    let windowWidth = dimensions.width;
-    let windowHeight = dimensions.height;
+    const dimensions = Dimensions.get('window');
+    const windowWidth = dimensions.width;
+    const windowHeight = dimensions.height;
 
-    let dropdownHeight = (this.props.dropdownStyle && StyleSheet.flatten(this.props.dropdownStyle).height) ||
+    const dropdownHeight = (this.props.dropdownStyle && StyleSheet.flatten(this.props.dropdownStyle).height) ||
       StyleSheet.flatten(styles.dropdown).height;
 
-    let bottomSpace = windowHeight - this._buttonFrame.y - this._buttonFrame.h;
-    let rightSpace = windowWidth - this._buttonFrame.x;
-    let showInBottom = bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
-    let showInLeft = rightSpace >= this._buttonFrame.x;
+    const bottomSpace = windowHeight - this._buttonFrame.y - this._buttonFrame.h;
+    const rightSpace = windowWidth - this._buttonFrame.x;
+    const showInBottom = bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
+    const showInLeft = rightSpace >= this._buttonFrame.x;
 
-    var style = {
+    let style = {
       height: dropdownHeight,
@@ -235,3 +238,3 @@ top: showInBottom ? this._buttonFrame.y + this._buttonFrame.h : Math.max(0, this._buttonFrame.y - dropdownHeight),
     } else {
-      let dropdownWidth = (this.props.dropdownStyle && StyleSheet.flatten(this.props.dropdownStyle).width) ||
+      const dropdownWidth = (this.props.dropdownStyle && StyleSheet.flatten(this.props.dropdownStyle).width) ||
         (this.props.style && StyleSheet.flatten(this.props.style).width) || -1;
@@ -273,3 +276,4 @@ if (dropdownWidth !== -1) {
     return (
-      <ListView style={styles.list}
+      <ListView scrollEnabled={this.props.scrollEnabled}
+                style={styles.list}
                 dataSource={this._dataSource}
@@ -286,3 +290,3 @@ renderRow={this._renderRow.bind(this)}
   get _dataSource() {
-    let ds = new ListView.DataSource({
+    const ds = new ListView.DataSource({
       rowHasChanged: (r1, r2) => r1 !== r2
@@ -294,5 +298,5 @@ });
   _renderRow(rowData, sectionID, rowID, highlightRow) {
-    let key = `row_${rowID}`;
-    let highlighted = rowID == this.state.selectedIndex;
-    let row = !this.props.renderRow ?
+    const key = `row_${rowID}`;
+    const highlighted = rowID == this.state.selectedIndex;
+    const row = !this.props.renderRow ?
       (<Text style={[
@@ -308,3 +312,3 @@ styles.rowText,
       this.props.renderRow(rowData, rowID, highlighted);
-    let preservedProps = {
+    const preservedProps = {
       key: key,
@@ -315,3 +319,3 @@ accessible: this.props.accessible,
     if (TOUCHABLE_ELEMENTS.find(name => name == row.type.displayName)) {
-      var props = {...row.props};
+      const props = {...row.props};
       props.key = preservedProps.key;
@@ -328,3 +332,2 @@ props.onPress = preservedProps.onPress;
         }
-          break;
         case 'TouchableOpacity':
@@ -338,3 +341,2 @@ {
         }
-          break;
         case 'TouchableWithoutFeedback':
@@ -348,3 +350,2 @@ {
         }
-          break;
         case 'TouchableNativeFeedback':
@@ -358,3 +359,2 @@ {
         }
-          break;
         default:
@@ -372,4 +372,4 @@ break;
   _onRowPress(rowData, sectionID, rowID, highlightRow) {
-    if (!this.props.onSelect ||
-      this.props.onSelect(rowID, rowData) !== false) {
+    const { onSelect, renderButtonText, onDropdownWillHide } = this.props;
+    if (!onSelect || onSelect(rowID, rowData) !== false) {
       highlightRow(sectionID, rowID);
@@ -379,8 +379,7 @@ this._nextValue = rowData;
       this.setState({
-        buttonText: rowData.toString(),
+        buttonText: renderButtonText && renderButtonText(rowData) || rowData.toString(),
         selectedIndex: rowID
       });
     }
-    if (!this.props.onDropdownWillHide ||
-      this.props.onDropdownWillHide() !== false) {
+    if (!onDropdownWillHide || onDropdownWillHide() !== false) {
       this.setState({
@@ -393,3 +392,3 @@ showDropdown: false
   _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
-    let key = `spr_${rowID}`;
+    const key = `spr_${rowID}`;
     return (<View style={styles.separator}
@@ -396,0 +395,0 @@ key={key}

index.js

@@ -6,2 +6,3 @@ /**
 import ModalDropdown from './components/ModalDropdown';
-export default ModalDropdown;
+export default ModalDropdown;
+module.exports = ModalDropdown;

package.json

 {
   "name": "react-native-modal-dropdown",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A react-native dropdown component for both iOS and Android.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -22,5 +22,4 @@ [![npm version](https://badge.fury.io/js/react-native-modal-dropdown.svg)](https://badge.fury.io/js/react-native-modal-dropdown)
 
-### v0.5.0
-- React 16 compatibility.
-- Fix [#84](https://github.com/sohobloo/react-native-modal-dropdown/issues/84)
+### v0.6.0
+- Introduce `renderButtonText` property to extract button text from object array data.
 
@@ -77,2 +76,3 @@ [Full update history list](https://github.com/sohobloo/react-native-modal-dropdown/wiki/Update-History)
 `renderSeparator`   | func     | Yes      |           | Customize render dropdown list separators. **Will render a default thin gray line if `null`/`undefined`.**
+`renderButtonText`  | func     | Yes      |           | Use this to extract and return text from option object. This text will show on button after option selected. **Invalid in wrapper mode.**
 `onDropdownWillShow`| func     | Yes      |           | Trigger when dropdown will show by touching the button. **Return `false` can cancel the event.**
@@ -79,0 +79,0 @@ `onDropdownWillHide`| func     | Yes      |           | Trigger when dropdown will hide by touching the button. **Return `false` can cancel the event.**

No alert changes

Improved metrics

Total package byte prevSize

19200

increased by2.13%

Lines of code

383

increased by0.26%

No dependency changes