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

Comparing version 0.3.2 to 0.4.0-rc.1

components/ModalDropdown.js

@@ -20,2 +20,3 @@ /**
   TouchableWithoutFeedback,
+  TouchableWithNativeFeedback,
   TouchableOpacity,
@@ -27,2 +28,4 @@ TouchableHighlight,
 
+const TOUCHABLE_ELEMENTS = ['TouchableHighlight', 'TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableWithNativeFeedback'];
+
 export default class ModalDropdown extends Component {
@@ -47,2 +50,3 @@ static defaultProps = {
     renderRow: PropTypes.func,
+    renderSeparator: PropTypes.func,
 
@@ -246,3 +250,3 @@ onDropdownWillShow: PropTypes.func,
                 renderRow={this._renderRow.bind(this)}
-                renderSeparator={this._renderSeparator.bind(this)}
+                renderSeparator={this.props.renderSeparator || this._renderSeparator.bind(this)}
                 automaticallyAdjustContentInsets={false}
@@ -268,5 +272,49 @@ />
       this.props.renderRow(rowData, rowID, highlighted);
+    let preservedProps = {
+      key: key,
+      onPress: () => this._onRowPress(rowData, sectionID, rowID, highlightRow),
+    };
+    if (TOUCHABLE_ELEMENTS.find(name => name == row.type.displayName)) {
+      var props = {...row.props};
+      props.key = preservedProps.key;
+      props.onPress = preservedProps.onPress;
+      switch (row.type.displayName) {
+        case 'TouchableHighlight': {
+          return (
+            <TouchableHighlight {...props}>
+              {row.props.children}
+            </TouchableHighlight>
+          );
+        }
+          break;
+        case 'TouchableOpacity': {
+          return (
+            <TouchableOpacity {...props}>
+              {row.props.children}
+            </TouchableOpacity>
+          );
+        }
+          break;
+        case 'TouchableWithoutFeedback': {
+          return (
+            <TouchableWithoutFeedback {...props}>
+              {row.props.children}
+            </TouchableWithoutFeedback>
+          );
+        }
+          break;
+        case 'TouchableWithNativeFeedback': {
+          return (
+            <TouchableWithNativeFeedback {...props}>
+              {row.props.children}
+            </TouchableWithNativeFeedback>
+          );
+        }
+          break;
+        default:
+          break;
+      }
+    }
     return (
-      <TouchableHighlight key={key}
-                          onPress={() => {this._onRowPress(rowData, sectionID, rowID, highlightRow);}}>
+      <TouchableHighlight {...preservedProps}>
         {row}
@@ -297,3 +345,2 @@ </TouchableHighlight>
   _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
-    if (rowID === this.props.options.length - 1) return;
     let key = `spr_${rowID}`;
@@ -334,3 +381,3 @@ return (<View style={styles.separator}
     flex: 1,
-    marginHorizontal: 6,
+    paddingHorizontal: 6,
     fontSize: 11,
@@ -340,2 +387,3 @@ height: 32,
     color: 'gray',
+    backgroundColor: 'white',
     textAlignVertical: 'center',
@@ -342,0 +390,0 @@ },

package.json

 {
   "name": "react-native-modal-dropdown",
-  "version": "0.3.2",
+  "version": "0.4.0-rc.1",
   "description": "A react-native dropdown component for both iOS and Android.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/sohobloo/react-native-modal-dropdown.git"
-  },
-  "author": "sohobloo <[e-mail]> (https://github.com/sohobloo)",
-  "license": "MIT",
   "keywords": [
@@ -28,3 +18,18 @@ "react",
     "option"
-  ]
+  ],
+  "homepage": "https://github.com/sohobloo/react-native-modal-dropdown",
+  "bugs": {
+    "url": "https://github.com/sohobloo/react-native-modal-dropdown/issues",
+    "email": "[e-mail]"
+  },
+  "license": "MIT",
+  "author": "sohobloo <[e-mail]> (https://github.com/sohobloo)",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sohobloo/react-native-modal-dropdown.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
 }

README.md

@@ -24,2 +24,7 @@ [![npm version](https://badge.fury.io/js/react-native-modal-dropdown.svg)](https://badge.fury.io/js/react-native-modal-dropdown)
 
+### v0.4.0-rc.1
+- New feature: [\#11](https://github.com/sohobloo/react-native-modal-dropdown/issues/11) Open `renderSeparator` prop API.
+- New feature:
+[\#10](https://github.com/sohobloo/react-native-modal-dropdown/issues/10) Support touchable component in `renderRow`.
+
 ### v0.3.2
@@ -46,3 +51,3 @@ - Fix bug: [\#9](https://github.com/sohobloo/react-native-modal-dropdown/issues/9) *undefined is not an object (evaluating '_this.updatePosition.bind')* in v0.3.1.
 ```sh
-npm i react-native-modal-dropdown --save
+npm i react-native-modal-dropdown -S
 ```
@@ -73,3 +78,3 @@
 
-You can also render your option row by implement the `renderRow` function.
+You can also render your option row and row separator by implement `renderRow` and `renderSeparator` function.
 
@@ -88,2 +93,3 @@ ## API
 `renderRow`         | func     | Yes      |           | Customize render option rows. **Will render a default row if `null`/`undefined`.**
+`renderSeparator`   | func     | Yes      |           | Customize render dropdown list separators. **Will render a default thin gray line if `null`/`undefined`.**
 `onDropdownWillShow`| func     | Yes      |           | Trigger when dropdown will show by touching the button. **Return `false` can cancel the event.**
@@ -96,9 +102,7 @@ `onDropdownWillHide`| func     | Yes      |           | Trigger when dropdown will hide by touching the button. **Return `false` can cancel the event.**
 ----------------- |  -----------
-`updatePosition()`| ***Depreciated since v0.3.0. May be removed in next version.*** Manually update the position of the dropdown. ~~If your dropdown is within a scroll view, you have to call this method in `onScroll` function of the `scrollView`.~~
 `show()`          |  Show the dropdown. **Won't trigger `onDropdownWillShow`.**
 `hide()`          |  Hide the dropdown. **Won't trigger `onDropdownWillHide`.**
-`select(idx)`     |  Select the specified option of the `idx`. **Won't trigger `onSelect`.**
+`select(idx)`     |  Select the specified option of the `idx`. Select `-1` will reset it to display `defaultValue`. **Won't trigger `onSelect`.**
 
 ## Next version
 Any suggestion is welcome.
-Is this necessary to open `renderSeperator` function of the dropdown list? Please let me know if you have this request. Thank you.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Lines of code

354

increased by15.31%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

104

increased by4%

Worsened metrics

Total package byte prevSize

17363

decreased by-69.37%

Number of package files

5

decreased by-66.67%

No dependency changes