Merge pull request #16 from fundlg/add-on-item-press-event

Add onItemPress event for Select component
ardas · Oct 17, 2019 · 218b416 · 218b416
2 parents 781d4e1 + 18f8a9d
commit 218b416
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,7 @@ Select based on modal
 | **`items`**                | array    | +        |            | Select options                                                                                                                               |
 | **`selected`**             | any      |          | _null_     | Selected items                                                                                                                               |
 | **`onSelect`**             | function |          |            | Called on selection change with selected items as a param                                                                                    |
+| **`onItemPress`**          | function |          |            | Called on item component press event with item as a param                                                                                    |
 | **`keyExtractor`**         | function |          |            | Should return uniq item identifier                                                                                                           |
 | **`labelExtractor`**       | function |          |            | Should return item label to show                                                                                                             |
 | **`renderHeader`**         | function |          |            | Render custom select header. Input params: { `onCancel`: _function_, `onSubmit`: _function_, `onSearch`: _function_, `onClear`: _function_ } |

diff --git a/lib/Select/Select.js b/lib/Select/Select.js
@@ -22,6 +22,7 @@ export default class Select extends PureComponent {
     items: PropTypes.array.isRequired,
     selected: PropTypes.any,
     onSelect: PropTypes.func,
+    onItemPress: PropTypes.func,
     keyExtractor: PropTypes.func,
     labelExtractor: PropTypes.func,
     renderHeader: PropTypes.func,
@@ -51,6 +52,7 @@ export default class Select extends PureComponent {
     renderDivider: () => null,
     renderSelectedMarker: () => null,
     renderSelectControls: () => null,
+    onItemPress: () => null,
     ItemsContainer: FlatList,
     disabled: false,
     autoClose: false,
@@ -138,6 +140,14 @@ export default class Select extends PureComponent {
     }
   };
 
+  _generateOnItemPressHandler = item => () => {
+    const { onItemPress } = this.props;
+    this.toggleSelection(item);
+    if (onItemPress) {
+      onItemPress(item);
+    }
+  };
+
   _renderItem = ({ item }) => {
     const {
       labelExtractor,
@@ -150,7 +160,7 @@ export default class Select extends PureComponent {
 
     return (
       <TouchableOpacity
-        onPress={() => this.toggleSelection(item)}
+        onPress={this._generateOnItemPressHandler(item)}
         style={[style.item, itemStyle]}
       >
         <Text style={textStyle}>{label}</Text>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-controls",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "main": "index.js",
   "keywords": [
     "react",