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

Comparing version 0.0.27 to 0.0.28

index.js

@@ -31,2 +31,3 @@ 'use strict';
     visible:                        PropTypes.bool,
+    closeOnChange:                  PropTypes.bool,
     initValue:                      PropTypes.string,
@@ -45,2 +46,3 @@ animationType:                  Modal.propTypes.animationType,
     sectionTextStyle:               Text.propTypes.style,
+    selectedItemTextStyle:          Text.propTypes.style,
     cancelContainerStyle:           ViewPropTypes.style,
@@ -59,2 +61,4 @@ cancelStyle:                    ViewPropTypes.style,
     passThruProps:                  PropTypes.object,
+    modalOpenerHitSlop:             PropTypes.object,
+    customSelector:                 PropTypes.node,
 };
@@ -70,2 +74,3 @@
     visible:                        false,
+    closeOnChange:                  true,
     initValue:                      'Select me!',
@@ -84,2 +89,3 @@ animationType:                  'slide',
     sectionTextStyle:               {},
+    selectedItemTextStyle:          {},
     cancelContainerStyle:           {},
@@ -98,2 +104,4 @@ cancelStyle:                    {},
     passThruProps:                  {},
+    modalOpenerHitSlop:             {top: 0, bottom: 0, left: 0, right: 0},
+    customSelector:                 undefined,
 };
@@ -135,4 +143,6 @@
         }
-        this.setState({selected: this.props.labelExtractor(item), changedItem: item });
-        this.close();
+        this.setState({ selected: this.props.labelExtractor(item), changedItem: item });
+        
+        if (this.props.closeOnChange)
+            this.close();
     }
@@ -164,2 +174,5 @@
     renderOption = (option, isLastItem) => {
+        const optionLabel = this.props.labelExtractor(option);
+        const isSelectedItem = optionLabel === this.state.selected;
+
         return (
@@ -176,3 +189,6 @@ <TouchableOpacity
                 {borderBottomWidth: 0}]}>
-                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{this.props.labelExtractor(option)}</Text>
+                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle,
+                                 isSelectedItem && this.props.selectedItemTextStyle]}>
+                        {optionLabel}
+                    </Text>
                 </View>
@@ -194,3 +210,3 @@ </TouchableOpacity>);
         return (
-            <TouchableWithoutFeedback key={'modalSelector' + (componentIndex++)} onPress={() => {
+            <TouchableWithoutFeedback key={'modalSelector' + (componentIndex++)}  accessible={false} onPress={() => {
                 closeOverlay && this.close();
@@ -248,7 +264,17 @@ }}>
                 {dp}
-                <TouchableOpacity activeOpacity={this.props.touchableActiveOpacity} style={this.props.touchableStyle} onPress={this.open} disabled={this.props.disabled}>
-                    <View style={this.props.childrenContainerStyle} pointerEvents="none">
-                        {this.renderChildren()}
-                    </View>
-                </TouchableOpacity>
+                {this.props.customSelector ?
+                    this.props.customSelector
+                    :
+                    <TouchableOpacity
+                        hitSlop={this.props.modalOpenerHitSlop}
+                        activeOpacity={this.props.touchableActiveOpacity}
+                        style={this.props.touchableStyle}
+                        onPress={this.open}
+                        disabled={this.props.disabled}
+                    >
+                        <View style={this.props.childrenContainerStyle} pointerEvents="none">
+                            {this.renderChildren()}
+                        </View>
+                    </TouchableOpacity>
+                }
             </View>
@@ -255,0 +281,0 @@ );

package.json

 {
   "name": "react-native-modal-selector",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "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

@@ -113,2 +113,3 @@ # 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)
 `visible`           | bool     | Yes      | false        | control open/close state of modal
+`closeOnChange`´    | bool     | Yes      | true         | control if modal closes on select
 `initValue`         | string   | Yes      | `Select me!` | text that is initially shown on the button
@@ -129,2 +130,3 @@ `cancelText`        | string   | Yes      | `cancel`     | text of the cancel button
 `sectionTextStyle`  | object   | Yes      | {}           | style definitions for the select text element
+`selectedItemTextStyle` | object | Yes    | {}           | style definitions for the currently selected text element
 `optionStyle`       | object   | Yes      | {}           | style definitions for the option element
@@ -141,1 +143,3 @@ `optionTextStyle`   | object   | Yes      | {}           | style definitions for the option text element
 `cancelButtonAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the cancel button
+`modalOpenerHitSlop` | object | Yes | {} | How far touch can stray away from touchable that opens modal ([RN docs](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#hitslop))
+`customSelector`     | node   | Yes | undefined          | Render a custom node instead of the built-in select box.

No alert changes

Improved metrics

Total package byte prevSize

68746

increased by4.53%

Number of package files

10

increased by11.11%

Lines of code

311

increased by8.36%

Number of lines in readme file

143

increased by2.88%

No dependency changes