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

Comparing version 0.0.25 to 0.0.26

index.js

@@ -26,2 +26,4 @@ 'use strict';
     onChange:                       PropTypes.func,
+    keyExtractor:                   PropTypes.func,
+    labelExtractor:                 PropTypes.func,
     initValue:                      PropTypes.string,
@@ -38,2 +40,3 @@ animationType:                  Modal.propTypes.animationType,
     touchableStyle:                 ViewPropTypes.style,
+    touchableActiveOpacity:         PropTypes.number,
     sectionTextStyle:               Text.propTypes.style,
@@ -52,2 +55,3 @@ cancelContainerStyle:           ViewPropTypes.style,
     cancelButtonAccessibilityLabel: PropTypes.string,
+    passThruProps:                  PropTypes.object,
 };
@@ -58,2 +62,4 @@
     onChange:                       () => {},
+    keyExtractor:                   (item) => item.key,
+    labelExtractor:                 (item) => item.label,
     initValue:                      'Select me!',
@@ -70,2 +76,3 @@ animationType:                  'slide',
     touchableStyle:                 {},
+    touchableActiveOpacity:         0.2,
     sectionTextStyle:               {},
@@ -84,2 +91,3 @@ cancelContainerStyle:           {},
     cancelButtonAccessibilityLabel: undefined,
+    passThruProps:                  {},
 };
@@ -111,3 +119,3 @@
         }
-        this.setState({selected: item.label, changedItem: item });
+        this.setState({selected: this.props.labelExtractor(item), changedItem: item });
         this.close();
@@ -131,4 +139,4 @@ }
         return (
-            <View key={section.key} style={[styles.sectionStyle,this.props.sectionStyle]}>
-                <Text style={[styles.sectionTextStyle,this.props.sectionTextStyle]}>{section.label}</Text>
+            <View key={this.props.keyExtractor(section)} style={[styles.sectionStyle,this.props.sectionStyle]}>
+                <Text style={[styles.sectionTextStyle,this.props.sectionTextStyle]}>{this.props.labelExtractor(section)}</Text>
             </View>
@@ -140,6 +148,13 @@ );
         return (
-            <TouchableOpacity key={option.key} onPress={() => this.onChange(option)} accessible={this.props.accessible} accessibilityLabel={option.accessibilityLabel || undefined}>
+            <TouchableOpacity
+              key={this.props.keyExtractor(option)}
+              onPress={() => this.onChange(option)}
+              activeOpacity={this.props.touchableActiveOpacity}
+              accessible={this.props.accessible}
+              accessibilityLabel={option.accessibilityLabel || undefined}
+              {...this.props.passThruProps}
+            >
                 <View style={[styles.optionStyle, this.props.optionStyle, isLastItem &&
                 {borderBottomWidth: 0}]}>
-                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
+                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{this.props.labelExtractor(option)}</Text>
                 </View>
@@ -173,3 +188,3 @@ </TouchableOpacity>);
                     <View style={[styles.cancelContainer, this.props.cancelContainerStyle]}>
-                        <TouchableOpacity onPress={this.close} accessible={this.props.accessible} accessibilityLabel={this.props.cancelButtonAccessibilityLabel}>
+                        <TouchableOpacity onPress={this.close} activeOpacity={this.props.touchableActiveOpacity} accessible={this.props.accessible} accessibilityLabel={this.props.cancelButtonAccessibilityLabel}>
                             <View style={[styles.cancelStyle, this.props.cancelStyle]}>
@@ -213,5 +228,5 @@ <Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
         return (
-            <View style={this.props.style}>
+            <View style={this.props.style} {...this.props.passThruProps}>
                 {dp}
-                <TouchableOpacity style={this.props.touchableStyle} onPress={this.open} disabled={this.props.disabled}>
+                <TouchableOpacity activeOpacity={this.props.touchableActiveOpacity} style={this.props.touchableStyle} onPress={this.open} disabled={this.props.disabled}>
                     <View style={this.props.childrenContainerStyle} pointerEvents="none">
@@ -218,0 +233,0 @@ {this.renderChildren()}

package.json

 {
   "name": "react-native-modal-selector",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -81,2 +81,22 @@ # react-native-modal-selector [![npm version](https://badge.fury.io/js/react-native-modal-selector.svg)](https://badge.fury.io/js/react-native-modal-selector)
 
+## Data Format
+
+The selector accept a specific format of data:
+```javascript
+[{ key: 5, label: 'Red Apples' }]
+```
+
+If your data has a specific format, you can define extractors of data, example:
+```javascript
+this.setState({data: [{ id: 5, name: 'Red Apples' }]});
+
+return (
+  <ModalSelector
+     data={this.state.data}
+     keyExtractor= {(item) => item.id}
+     labelExtractor= {(item) => item.name}/>
+);
+```
+
+
 ## API
@@ -88,2 +108,4 @@ ### Props
 `onChange`          | function | Yes      | () => {}     | callback function, when the users has selected an option
+`keyExtractor       | function | Yes      | (data) => data.key   | extract the key from the data item
+`labelExtractor     | function | Yes      | (data) => data.label | extract the label from the data item
 `initValue`         | string   | Yes      | `Select me!` | text that is initially shown on the button
@@ -95,2 +117,3 @@ `cancelText`        | string   | Yes      | `cancel`     | text of the cancel button
 `touchableStyle`    | object   | Yes      | {}           | style definitions for the touchable element
+`touchableActiveOpacity`    | number   | Yes      | 0.2           | opacity for the touchable element on touch
 `supportedOrientations`    | ['portrait', 'landscape'] | Yes      | both      | orientations the modal supports
@@ -111,5 +134,5 @@ `keyboardShouldPersistTaps`| `string` / `bool`         | Yes      | `always`  | passed to underlying ScrollView
 `backdropPressToClose`| bool   | Yes  | false        | `true` makes the modal close when the overlay is pressed
+`passThruProps`| object   | Yes  | {}        | props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
 `accessible`| bool   | Yes  | false        | `true` enables accessibility for modal and options. Note: data items should have an `accessibilityLabel` property if this is enabled
 `scrollViewAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the modal ScrollView
 `cancelButtonAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the cancel button
-

No alert changes

Improved metrics

Total package byte prevSize

66109

increased by4.89%

Number of package files

10

increased by11.11%

Lines of code

269

increased by5.91%

Number of lines in readme file

135

increased by20.54%

No dependency changes