react-native-slider-picker - npm Package Compare versions

Comparing version 1.0.49 to 1.1.0

package.json

 {
   "name": "react-native-slider-picker",
-  "version": "1.0.49",
+  "version": "1.1.0",
   "description": "Custom range slide picker for React Native.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/components/SliderPicker.js

@@ -6,2 +6,4 @@ /**
  * @description Generic pre-styled slide picker input.
+ * @param {String} accessibilityLabel - Optional. Passed to accessibilityLabel prop on numeric TextInput if screen reader is enabled and convertToNumberInputOnScreenReader is `true`. Defaults to an empty string.
+ * @param {String} accessibilityHint - Optional. Passed to accessibilityHint prop on numeric TextInput if screen reader is enabled and convertToNumberInputOnScreenReader is `true`. Defaults to an empty string.
  * @param {String} buttonBackgroundColor - Optional. Sets background color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"white"`.
@@ -12,2 +14,3 @@ * @param {String} buttonBorderColor - Optional. Sets border color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"dimgrey"`.
  * @param {Function} callback - Optional. Called on change. Defaults to '() => {}'.
+ * @param {Boolean} convertToNumberInputOnScreenReader - Optional. Determines if the component should be converted to a numeric typed TextInput component. Defaults to true.
  * @param {Number} defaultValue - Optional. Default value. Defaults to `5`. If valued passed is greater than maxValue, the value will be set to that of maxValue.
@@ -40,3 +43,3 @@ * @param {String} fillColor - Optional. Sets fill color of inner slider. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"dodgerblue"`.
 import React, { Component } from 'react';
-import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, View } from 'react-native';
+import { AccessibilityInfo, Platform, StyleSheet, Text, TextInput, TouchableHighlight, TouchableOpacity, View } from 'react-native';
 import { vh, vw } from 'react-native-css-vh-vw';
@@ -137,2 +140,9 @@
     //
+    // AccessibilityInfo props checking
+    //
+    this.accessibilityLabel = this.props.accessibilityLabel ? String(this.props.accessibilityLabel) : '';
+    this.accessibilityHint = this.props.accessibilityHint ? String(this.props.accessibilityHint) : '';
+    this.convertToNumberInputOnScreenReader = this.props.convertToNumberInputOnScreenReader === false ? false : true;
+
+    //
     // Initialize state variables
@@ -143,3 +153,5 @@ //
       triggerNonDraggablePress: false,
-      nonDraggablePressLocation: null
+      nonDraggablePressLocation: null,
+      screenReaderEnabled: false,
+      numberInputValue: ""
     }
@@ -199,2 +211,21 @@
 
+    // If screen reader is enabled and convert to number input prop is true, return numeric TextInput
+    if (this.state.screenReaderEnabled && this.convertToNumberInputOnScreenReader) {
+      return (
+        <View style={this.numberInputValidationStyles()}
+              accessible={true}
+              accessibilityLabel={this.accessibilityLabel}
+              accessibilityHint={this.accessibilityHint}
+        >
+          <TextInput
+            keyboardType="numeric"
+            placeholder={String(this.defaultValue)}
+            onChangeText={(val) => this.handleNumberInputChange(val)}
+            value={this.state.numberInputValue}
+            style={styles.numberTextInput}
+          />
+        </View>
+      )
+    }
+
     return (
@@ -249,2 +280,83 @@ // Wrapper for slider
   /** 
+   * On componentDidMount()
+   * - Check if user's device has screen reader enabled.
+   * - If it does check if component should be convereted to a number input.
+   */
+  componentDidMount = async () => {
+    // Determine if user is using a screen reader
+    let screenReaderEnabled = await AccessibilityInfo.isScreenReaderEnabled()
+
+    this.setState({ screenReaderEnabled });
+  }
+
+  /** 
+   * Handler function called on value change of TextInput component for screen reader enabled. Updates value of this.state.numberInputValue and makes sure it is not greater than 10.
+   * @param {String} val - Value of TextInput component.
+   * @return {null} Updates local state
+   */
+  handleNumberInputChange = (val) => {
+    // Flag to determine if callback has already been called by end of function.
+    let callbackExecuted = false;
+
+    this.setState({ numberInputValue: val }, () => {
+      // Make sure value isn't greater than this.maxValue
+      if (Number(this.state.numberInputValue) > this.maxValue) {
+        this.setState({ 
+          numberInputValue: String(this.maxValue)
+        }, () => {
+          this.accessibilityCallback(this.state.numberInputValue);
+          // Flip callback flag
+          callbackExecuted = true;
+        });
+      }
+      // Make sure value isn't less than this.minValue
+      else if (Number(this.state.numberInputValue) < this.minValue) {
+        this.setState({ 
+          numberInputValue: String(this.minValue)
+        }, () => {
+          this.accessibilityCallback(this.state.numberInputValue);
+          // Flip callback flag
+          callbackExecuted = true;
+        });
+      }
+
+      // If callback hasn't been called already, call it
+      if (!callbackExecuted) {
+        this.accessibilityCallback(this.state.numberInputValue);
+      }
+    });
+  }
+
+  /** 
+   * Handler function to execute callback prop after a 750 millisecond delay. Called on change of of numeric TextInput. 
+   * @param {String} val - Current value of this.state.numberInputValue.
+   * @return {null} Executes callback
+   */
+  accessibilityCallback = (val) => {
+    setTimeout(() => {
+      this.callback(val);
+    }, 750);
+  }
+
+  /** 
+   * Helper function to determine styling of TextInput bottomBorder based on validation
+   * @return {Style} 'Red'/'Green' for valid/invalid inputs respectively, otherwise regular gray underline.
+   */
+  numberInputValidationStyles() {
+    
+    // If value is empty or isValid is null or if input is the same as the default, render regular styling
+    if (this.state.numberInputValue == "" || 
+        this.state.isValid === null || 
+        this.state.numberInputValue === this.defaultValue) {
+      return styles.noText;
+    }
+    // If isValid, render green feedback underline
+    if (this.state.numberInputValue !== true) {
+    // if (this.state.isValid === true && !this.state.isFocused) {
+      return styles.validatedText;
+    }
+
+  }
+
+  /** 
    * Adds a key/value pair to a style object if it does not already have a value for key passed.
@@ -602,3 +714,55 @@ * @return {null}
     color: 'dimgray',
+  },
+  //
+  // View component. Styling for the wrapper of the numeric TextInput when it's empty.
+  //
+  noText: {
+    width: vw(25),
+    flexDirection: 'row',
+    backgroundColor: '#f1f4f5',
+    borderBottomColor: "#889cb2",
+    borderBottomWidth: vh(1) / 3,
+    marginHorizontal: vw(5),
+    marginTop: vh(3),
+    padding: vw(4),
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    ... Platform.isPad ? ({
+      marginTop: vh(4)
+    }) : null
+  },
+  //
+  // View component. Wrapper for numeric TextInput
+  //
+  validatedText: {
+    width: vw(25),
+    flexDirection: 'row',
+    backgroundColor: '#f1f4f5',
+    borderBottomColor: 'green',
+    borderBottomWidth: vh(1) / 3,
+    marginHorizontal: vw(5),
+    marginTop: vh(3),
+    padding: vw(4),
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    ... Platform.isPad ? ({
+      marginTop: vh(4)
+    }) : null
+  },
+  //
+  // TextInput component. Numeric input for screen readers enabled.
+  //
+  numberTextInput: {
+    flex: 1,
+    fontSize: Math.ceil(vw(3) * 1.3),
+    ... Platform.select({
+      ios: {
+        marginTop: vw(2)
+      },
+      android: {
+        paddingBottom: 0,
+        paddingTop: 5
+      }
+    }),
   }
 });

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

Improved metrics

Total package byte prevSize

60441

increased by10.8%

Lines of code

958

increased by19.01%

No dependency changes