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

Comparing version 0.0.24 to 0.0.25

index.js

@@ -18,3 +18,2 @@ 'use strict';
 import styles from './style';
-import BaseComponent from './BaseComponent';
 
@@ -26,75 +25,72 @@ const ViewPropTypes = RNViewPropTypes || View.propTypes;
 const propTypes = {
-    data:                      PropTypes.array,
-    onChange:                  PropTypes.func,
-    initValue:                 PropTypes.string,
-    animationType:             Modal.propTypes.animationType,
-    style:                     ViewPropTypes.style,
-    selectStyle:               ViewPropTypes.style,
-    selectTextStyle:           Text.propTypes.style,
-    optionStyle:               ViewPropTypes.style,
-    optionTextStyle:           Text.propTypes.style,
-    optionContainerStyle:      ViewPropTypes.style,
-    sectionStyle:              ViewPropTypes.style,
-    sectionTextStyle:          Text.propTypes.style,
-    cancelContainerStyle:      ViewPropTypes.style,
-    cancelStyle:               ViewPropTypes.style,
-    cancelTextStyle:           Text.propTypes.style,
-    overlayStyle:              ViewPropTypes.style,
-    cancelText:                PropTypes.string,
-    disabled:                  PropTypes.bool,
-    supportedOrientations:     PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'landscape', 'portrait-upside-down', 'landscape-left', 'landscape-right'])),
-    keyboardShouldPersistTaps: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    backdropPressToClose:      PropTypes.bool,
+    data:                           PropTypes.array,
+    onChange:                       PropTypes.func,
+    initValue:                      PropTypes.string,
+    animationType:                  Modal.propTypes.animationType,
+    style:                          ViewPropTypes.style,
+    selectStyle:                    ViewPropTypes.style,
+    selectTextStyle:                Text.propTypes.style,
+    optionStyle:                    ViewPropTypes.style,
+    optionTextStyle:                Text.propTypes.style,
+    optionContainerStyle:           ViewPropTypes.style,
+    sectionStyle:                   ViewPropTypes.style,
+    childrenContainerStyle:         ViewPropTypes.style,
+    touchableStyle:                 ViewPropTypes.style,
+    sectionTextStyle:               Text.propTypes.style,
+    cancelContainerStyle:           ViewPropTypes.style,
+    cancelStyle:                    ViewPropTypes.style,
+    cancelTextStyle:                Text.propTypes.style,
+    overlayStyle:                   ViewPropTypes.style,
+    cancelText:                     PropTypes.string,
+    disabled:                       PropTypes.bool,
+    supportedOrientations:          Modal.propTypes.supportedOrientations,
+    keyboardShouldPersistTaps:      PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    backdropPressToClose:           PropTypes.bool,
+    accessible:                     PropTypes.bool,
+    scrollViewAccessibilityLabel:   PropTypes.string,
+    cancelButtonAccessibilityLabel: PropTypes.string,
 };
 
 const defaultProps = {
-    data:                      [],
-    onChange:                  () => {},
-    initValue:                 'Select me!',
-    animationType:             'slide',
-    style:                     {},
-    selectStyle:               {},
-    selectTextStyle:           {},
-    optionStyle:               {},
-    optionTextStyle:           {},
-    optionContainerStyle:      {},
-    sectionStyle:              {},
-    sectionTextStyle:          {},
-    cancelContainerStyle:      {},
-    cancelStyle:               {},
-    cancelTextStyle:           {},
-    overlayStyle:              {},
-    cancelText:                'cancel',
-    disabled:                  false,
-    supportedOrientations:     ['portrait', 'landscape'],
-    keyboardShouldPersistTaps: 'always',
-    backdropPressToClose:      false,
+    data:                           [],
+    onChange:                       () => {},
+    initValue:                      'Select me!',
+    animationType:                  'slide',
+    style:                          {},
+    selectStyle:                    {},
+    selectTextStyle:                {},
+    optionStyle:                    {},
+    optionTextStyle:                {},
+    optionContainerStyle:           {},
+    sectionStyle:                   {},
+    childrenContainerStyle:         {},
+    touchableStyle:                 {},
+    sectionTextStyle:               {},
+    cancelContainerStyle:           {},
+    cancelStyle:                    {},
+    cancelTextStyle:                {},
+    overlayStyle:                   {},
+    cancelText:                     'cancel',
+    disabled:                       false,
+    supportedOrientations:          ['portrait', 'landscape'],
+    keyboardShouldPersistTaps:      'always',
+    backdropPressToClose:           false,
+    accessible:                     false,
+    scrollViewAccessibilityLabel:   undefined,
+    cancelButtonAccessibilityLabel: undefined,
 };
 
-export default class ModalSelector extends BaseComponent {
+export default class ModalSelector extends React.Component {
 
-    constructor() {
+    constructor(props) {
+        super(props);
 
-        super();
-
-        this._bind(
-            'onChange',
-            'open',
-            'close',
-            'renderChildren'
-        );
-
         this.state = {
-            modalVisible: false,
-            transparent:  false,
-            selected:     'please select',
-            changedItem:  undefined,
+            modalVisible:  false,
+            selected:      props.initValue,
+            cancelText:    props.cancelText,
+            changedItem:   undefined,
         };
     }
 
-    componentDidMount() {
-        this.setState({selected: this.props.initValue});
-        this.setState({cancelText: this.props.cancelText});
-    }
-
     componentWillReceiveProps(nextProps) {
@@ -106,3 +102,3 @@ if (nextProps.initValue !== this.props.initValue) {
 
-    onChange(item) {
+    onChange = (item) => {
         if (Platform.OS === 'android' || !Modal.propTypes.onDismiss) {
@@ -116,3 +112,3 @@ // RN >= 0.50 on iOS comes with the onDismiss prop for Modal which solves RN issue #10471
 
-    close() {
+    close = () => {
         this.setState({
@@ -123,3 +119,3 @@ modalVisible: false,
 
-    open() {
+    open = () => {
         this.setState({
@@ -131,3 +127,3 @@ modalVisible: true,
 
-    renderSection(section) {
+    renderSection = (section) => {
         return (
@@ -140,5 +136,5 @@ <View key={section.key} style={[styles.sectionStyle,this.props.sectionStyle]}>
 
-    renderOption(option, isLastItem) {
+    renderOption = (option, isLastItem) => {
         return (
-            <TouchableOpacity key={option.key} onPress={() => this.onChange(option)}>
+            <TouchableOpacity key={option.key} onPress={() => this.onChange(option)} accessible={this.props.accessible} accessibilityLabel={option.accessibilityLabel || undefined}>
                 <View style={[styles.optionStyle, this.props.optionStyle, isLastItem &&
@@ -151,3 +147,3 @@ {borderBottomWidth: 0}]}>
 
-    renderOptionList() {
+    renderOptionList = () => {
 
@@ -169,3 +165,3 @@ let options = this.props.data.map((item, index) => {
                     <View style={[styles.optionContainer, this.props.optionContainerStyle]}>
-                        <ScrollView keyboardShouldPersistTaps={this.props.keyboardShouldPersistTaps}>
+                        <ScrollView keyboardShouldPersistTaps={this.props.keyboardShouldPersistTaps} accessible={this.props.accessible} accessibilityLabel={this.props.scrollViewAccessibilityLabel}>
                             <View style={{paddingHorizontal: 10}}>
@@ -177,3 +173,3 @@ {options}
                     <View style={[styles.cancelContainer, this.props.cancelContainerStyle]}>
-                        <TouchableOpacity onPress={this.close}>
+                        <TouchableOpacity onPress={this.close} accessible={this.props.accessible} accessibilityLabel={this.props.cancelButtonAccessibilityLabel}>
                             <View style={[styles.cancelStyle, this.props.cancelStyle]}>
@@ -188,3 +184,3 @@ <Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
 
-    renderChildren() {
+    renderChildren = () => {
 
@@ -220,4 +216,4 @@ if(this.props.children) {
                 {dp}
-                <TouchableOpacity onPress={this.open} disabled={this.props.disabled}>
-                    <View pointerEvents="none">
+                <TouchableOpacity style={this.props.touchableStyle} onPress={this.open} disabled={this.props.disabled}>
+                    <View style={this.props.childrenContainerStyle} pointerEvents="none">
                         {this.renderChildren()}
@@ -224,0 +220,0 @@ </View>

package.json

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

@@ -43,3 +43,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)
             { key: index++, label: 'Cherries' },
-            { key: index++, label: 'Cranberries' },
+            { key: index++, label: 'Cranberries', accessibilityLabel: 'Tap here for cranberries' },
             // etc...
@@ -64,2 +64,5 @@ // Can also add additional custom keys which are passed to the onChange callback
                     supportedOrientations={['landscape']}
+                    accessible={true}
+                    scrollViewAccessibilityLabel={'Scrollable options'}
+                    cancelButtonAccessibilityLabel={'Cancel Button'}
                     onChange={(option)=>{ this.setState({textInputValue:option.label})}}>
@@ -90,2 +93,4 @@
 `disabled`          | bool     | Yes      | false        | `true` disables opening of the modal
+`childrenContainerStyle`| object   | Yes      | {}           | style definitions for the children container view
+`touchableStyle`    | object   | Yes      | {}           | style definitions for the touchable element
 `supportedOrientations`    | ['portrait', 'landscape'] | Yes      | both      | orientations the modal supports
@@ -104,2 +109,7 @@ `keyboardShouldPersistTaps`| `string` / `bool`         | Yes      | `always`  | passed to underlying ScrollView
 `cancelTextStyle`   | object   | Yes      | {}           | style definitions for the cancel text element
+`cancelContainerStyle`| object | Yes      | {}           | style definitions for the cancel container
 `backdropPressToClose`| bool   | Yes  | false        | `true` makes the modal close when the overlay is pressed
+`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

63025

increased by129.08%

Number of lines in readme file

112

increased by9.8%

Worsened metrics

Number of package files

9

decreased by-18.18%

Lines of code

254

decreased by-3.05%

No dependency changes