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

Comparing version 1.1.1 to 1.1.2

package.json

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

README.md

@@ -67,2 +67,10 @@ ## React Native Slider Picker
 
+**Accessibility/Screen Reader Numeric Input Conversion Props:**
+| Name                                | Type    | Description                                                                                                                          | Default                                                                                                                                                                                                                                                                                                 | Notes |
+|-------------------------------------|---------|--------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------|
+| accessibilityLabel                  | String  | Passed to accessibilityLabel prop on numeric TextInput if screen reader is enabled and convertToNumberInputOnScreenReader is `true`  | `''`                                                                                                                                                                                                                                                                                                    |       |
+| accessibilityHint                   | String  | Passed to accessibilityHint prop on numeric TextInput if screen reader is enabled and convertToNumericInputOnScreenReader is `true`. | `''`                                                                                                                                                                                                                                                                                                    |       |
+| convertToNumericInputOnScreenReader | Boolean | Determines if the component should be converted to a numeric typed TextInput component.                                              | `true`                                                                                                                                                                                                                                                                                                  |       |
+| numericInputContainerStyles         | Object  | StyleSheet rules passed to the `<View>` component that wraps `<TextInput>` in numeric input for screen readers.                      | `{ width: vw(25), flexDirection: 'row',backgroundColor: '#f1f4f5', borderBottomColor: "#889cb2", borderBottomWidth: vh(1) / 3, marginHorizontal: vw(5), marginVertical: vh(2), padding: vw(4), borderTopLeftRadius: 10, borderTopRightRadius: 10, ... Platform.isPad ? ({  marginTop: vh(4)}) : null }` |       |
+| numericInputTextInputStyles         | Object  | StyleSheet rules passed to the `<TextInput>` component in numeric input for screen readers.                                          | `{ flex: 1, fontSize: Math.ceil(vw(3) * 1.3), ... Platform.select({ ios: {    marginTop: vw(2)  }, android: { paddingBottom: 0, paddingTop: 5  }}) }`                                                                                                                                                   |       |
    
@@ -69,0 +77,0 @@ **Basic, bare-bones usage:**

src/components/SliderPicker.js

@@ -6,4 +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} accessibilityLabel - Optional. Passed to accessibilityLabel prop on numeric TextInput if screen reader is enabled and convertToNumericInputOnScreenReader is `true`. Defaults to an empty string.
+ * @param {String} accessibilityHint - Optional. Passed to accessibilityHint prop on numeric TextInput if screen reader is enabled and convertToNumericInputOnScreenReader 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"`.
@@ -14,3 +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 {Boolean} convertToNumericInputOnScreenReader - 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.
@@ -26,2 +26,4 @@ * @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"`.
  * @param {String} minLabel - Optional. Label for the minimum value. Defaults to an empty `<View>` component.
+ * @param {Object} numericInputContainerStyles - Optional. StyleSheet rules passed to the `<View>` component that wraps `<TextInput>` in numeric input for screen readers. Defaults to `{ width: vw(25), flexDirection: 'row',backgroundColor: '#f1f4f5', borderBottomColor: "#889cb2", borderBottomWidth: vh(1) / 3, marginHorizontal: vw(5), marginVertical: vh(2), padding: vw(4), borderTopLeftRadius: 10, borderTopRightRadius: 10, ... Platform.isPad ? ({  marginTop: vh(4)}) : null }`
+ * @param {Object} numericInputTextInputStyles - Optional. StyleSheet rules passed to the `<TextInput>` component in numeric input for screen readers. Defaults to `{ flex: 1, fontSize: Math.ceil(vw(3) * 1.3), ... Platform.select({ ios: {    marginTop: vw(2)  }, android: { paddingBottom: 0, paddingTop: 5  }}) }`
  * @param {String} scaleNumberFontColor - Optional. Sets font color of scale numbers if they are displayed. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "dimgrey".
@@ -73,2 +75,34 @@ * @param {Number} scaleNumberFontSize - Optional. Sets font size of scale numbers if they are displayed. Defaults to `24`.
 
+    // Default styles for View container of accessibility/screen reader numeric input replacement
+    this.defaultNumericInputContainerStyles = {
+      width: vw(25),
+      flexDirection: 'row',
+      backgroundColor: '#f1f4f5',
+      borderBottomColor: "#889cb2",
+      borderBottomWidth: vh(1) / 3,
+      marginHorizontal: vw(5),
+      marginVertical: vh(2),
+      padding: vw(4),
+      borderTopLeftRadius: 10,
+      borderTopRightRadius: 10,
+      ... Platform.isPad ? ({
+        marginTop: vh(4)
+      }) : null
+    }
+
+    // Default styles for TextInput of accessibility/screen reader numeric input replacement
+    this.defaultNumericInputTextInputStyles = {
+      flex: 1,
+      fontSize: Math.ceil(vw(3) * 1.3),
+      ... Platform.select({
+        ios: {
+          marginTop: vw(2)
+        },
+        android: {
+          paddingBottom: 0,
+          paddingTop: 5
+        }
+      })
+    }
+
     //
@@ -145,5 +179,16 @@ // Props checking for overriding element styles
     this.accessibilityHint = this.props.accessibilityHint ? String(this.props.accessibilityHint) : '';
-    this.convertToNumberInputOnScreenReader = this.props.convertToNumberInputOnScreenReader === false ? false : true;
+    this.convertToNumericInputOnScreenReader = this.props.convertToNumericInputOnScreenReader === false ? false : true;
 
     //
+    // Styling props for screen reader numeric input container styles
+    //
+    this.numericInputContainerStyles = this.props.numericInputContainerStyles ? 
+      this.props.numericInputContainerStyles :
+      this.defaultNumericInputContainerStyles;
+
+    this.numericInputTextInputStyles = this.props.numericInputTextInputStyles ?
+      this.props.numericInputTextInputStyles :
+      this.defaultNumericInputTextInputStyles;
+
+    //
     // Initialize state variables
@@ -156,3 +201,3 @@ //
       screenReaderEnabled: false,
-      numberInputValue: ""
+      numericInputValue: ""
     }
@@ -186,3 +231,2 @@
     // Set backgroundColor of sliderInnerStyles based on props.heightPercentage
-    // selectionFillStyles['backgroundColor'] = this.fillColor;
     this.styleChecker(selectionFillStyles, 'backgroundColor', this.fillColor);
@@ -214,5 +258,5 @@
     // If screen reader is enabled and convert to number input prop is true, return numeric TextInput
-    if (this.state.screenReaderEnabled && this.convertToNumberInputOnScreenReader) {
+    if (this.state.screenReaderEnabled && this.convertToNumericInputOnScreenReader) {
       return (
-        <View style={this.numberInputValidationStyles()}
+        <View style={this.numericInputContainerStyles}
               accessible={true}
@@ -225,5 +269,5 @@ accessibilityLabel={this.accessibilityLabel}
             placeholder={String(this.defaultValue)}
-            onChangeText={(val) => this.handleNumberInputChange(val)}
-            value={this.state.numberInputValue}
-            style={styles.numberTextInput}
+            onChangeText={(val) => this.handleNumericInputChange(val)}
+            value={this.state.numericInputValue}
+            style={this.numericInputTextInputStyles}
           />
@@ -285,3 +329,3 @@ </View>
    * - Check if user's device has screen reader enabled.
-   * - If it does check if component should be convereted to a number input.
+   * - If it does check if component should be convereted to a numeric input.
    */
@@ -296,17 +340,17 @@ componentDidMount = async () => {
   /** 
-   * 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.
+   * Handler function called on value change of TextInput component for screen reader enabled. Updates value of this.state.numericInputValue and makes sure it is not greater than 10.
    * @param {String} val - Value of TextInput component.
    * @return {null} Updates local state
    */
-  handleNumberInputChange = (val) => {
+  handleNumericInputChange = (val) => {
     // Flag to determine if callback has already been called by end of function.
     let callbackExecuted = false;
 
-    this.setState({ numberInputValue: val }, () => {
+    this.setState({ numericInputValue: val }, () => {
       // Make sure value isn't greater than this.maxValue
-      if (Number(this.state.numberInputValue) > this.maxValue) {
+      if (Number(this.state.numericInputValue) > this.maxValue) {
         this.setState({ 
-          numberInputValue: String(this.maxValue)
+          numericInputValue: String(this.maxValue)
         }, () => {
-          this.accessibilityCallback(this.state.numberInputValue);
+          this.callback(this.state.numericInputValue);
           // Flip callback flag
@@ -317,7 +361,7 @@ callbackExecuted = true;
       // Make sure value isn't less than this.minValue
-      else if (Number(this.state.numberInputValue) < this.minValue) {
+      else if (Number(this.state.numericInputValue) < this.minValue) {
         this.setState({ 
-          numberInputValue: String(this.minValue)
+          numericInputValue: String(this.minValue)
         }, () => {
-          this.accessibilityCallback(this.state.numberInputValue);
+          this.callback(this.state.numericInputValue);
           // Flip callback flag
@@ -330,3 +374,3 @@ callbackExecuted = true;
       if (!callbackExecuted) {
-        this.accessibilityCallback(this.state.numberInputValue);
+        this.callback(this.state.numericInputValue);
       }
@@ -337,33 +381,2 @@ });
   /** 
-   * 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.
@@ -370,0 +383,0 @@ * @return {null}

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

64905

increased by7.37%

Lines of code

973

increased by1.57%

Number of lines in readme file

187

increased by4.47%

No dependency changes