Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-slider-picker
Advanced tools
react-native-slider-picker - npm Package Compare versions
Comparing version 1.0.41 to 1.0.42
| { | ||
| "name": "react-native-slider-picker", | ||
| "version": "1.0.41", | ||
| "version": "1.0.42", | ||
| "description": "Custom range slide picker for React Native. 🚧 UNDER CONSTRUCTION 🚧", | ||
@@ -5,0 +5,0 @@ "main": "src/index.js", |
@@ -21,26 +21,37 @@ ## React Native Slider Picker | ||
| | Name | Type | Description | Default | Notes | | ||
| |----------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------| | ||
| | `buttonBackgroundColor` | String | Sets background color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | `"white"` | | | ||
| | `buttonBorderColor` | String | Sets border color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | `"dimgrey"` | | | ||
| | `buttonBorderWidth` | Number | Sets border width of Slider's button. | `1` | | | ||
| | `buttonDimensionsPercentage` | Number | Sets height and width of Slider's button as percentage of viewport width. | `1` | | | ||
| | `callback` | Function | Called on change. | `() => {}` | | | ||
| | `defaultValue` | Number | Default value for slider on load. | `5` | If valued passed is greater than maxValue, the value will be set to that of maxValue. | | ||
| | `fillColor` | String | Sets fill color of inner slider. | `"dodgerblue"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `heightPercentage` | Number | Percentage of device's viewport to set as component's height. | `1` | Value passed to `vh()` | | ||
| | `labelFontColor` | String | Sets font color of labels if they are displayed. | `"dimgrey"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `labelFontWeight` | String | Sets font weight of labels if they are displayed. | `""` -> the default `fontWeight` value in React Native. | | | ||
| | `maxLabel` | String | Label for the maximum value. | Empty `<View>` component. | Empty `<View>` has a `flex : 1` value. | | ||
| | `maxValue` | Number | The maximum value/high end of range for the Slider. | `10` | | | ||
| | `midLabel` | String | Label for the medium value. | Empty `<View>` component. | Empty `<View>` has a `flex : 1` value. | | ||
| | `minLabel` | String | Label for the minimum value. | Empty `<View>` component. | Empty `<View>` has a `flex: 1` value. | | ||
| | `scaleNumberFontColor` | String | Sets font color of scale numbers if they are displayed. | `"dimgrey"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `scaleNumberFontWeight` | String | Sets font weight of scale numbers if they are displayed. | `""` -> the default `fontWeight` value in React Native. | | | ||
| | `showFill` | Boolean | Boolean value to determine whether or not the slider inner shows a fill or if it is transparent. | `true` | | | ||
| | `showNumberScale` | Boolean | Boolean value to determine whether or not to display scale of numbers for the Slider's range. | `false` | | | ||
| | `showSeparatorScale` | Boolean | Boolean value to determine whether or not to display lines dividing the slider into different sections. | `false` | | | ||
| | `sliderInnerBackgroundColor` | String | Sets background color of inner slider View. | `"white"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `sliderInnerBorderStyles` | Object | An object of StyleSheet properties to set border-related styles of sliderInner View component. | `{ borderWidth: vw(1) / 2, borderColor: '#d9dce4', borderBottomColor: '#f1f4f5', borderRadius: 50 }` | If passed, the object is filtered to remove any key/value properties that are not for component's border. | | ||
| | `widthPercentage` | Number | Percentage of device's viewport to set as component's width. | `85` | Value passed to `vw()` | | ||
| **Functional Props:** | ||
| | Name | Type | Description | Default | Notes | | ||
| |----------------|----------|-----------------------------------------------------|------------|---------------------------------------------------------------------------------------| | ||
| | `callback` | Function | Called on change. | `() => {}` | | | ||
| | `defaultValue` | Number | Default value for slider on load | `5` | If valued passed is greater than maxValue, the value will be set to that of maxValue. | | ||
| | `maxValue` | Number | The maximum value/high end of range for the Slider. | `10` | | | ||
| **General Style Props:** | ||
| | Name | Type | Description | Default | Notes | | ||
| |----------------------|---------|---------------------------------------------------------------------------------------------------------|---------------------------|-----------------------------------------------------------------------------------| | ||
| | `fillColor` | String | Sets fill color of inner slider. | `"dodgerblue"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `heightPercentage` | Number | Percentage of device's viewport to set as component's height. | `1` | Value passed to `vh()` | | ||
| | `maxLabel` | String | Label for the maximum value. | Empty `<View>` component. | Empty `<View>` has a `flex : 1` value. | | ||
| | `midLabel` | String | Label for the medium value. | Empty `<View>` component. | Empty `<View>` has a `flex : 1` value. | | ||
| | `minLabel` | String | Label for the minimum value. | Empty `<View>` component. | Empty `<View>` has a `flex : 1` value. | | ||
| | `showFill` | Boolean | Boolean value to determine whether or not the slider inner shows a fill or if it is transparent. | `true` | | | ||
| | `showNumberScale` | Boolean | Boolean value to determine whether or not to display scale of numbers for the Slider's range. | `false` | | | ||
| | `showSeparatorScale` | Boolean | Boolean value to determine whether or not to display lines dividing the slider into different sections. | `false` | | | ||
| | `widthPercentage` | Number | Percentage of device's viewport to set as component's width. | `85` | Value passed to `vw()` | | ||
| **Specific Style Props:** | ||
| | Name | Type | Description | Default | Notes | | ||
| |------------------------------|--------|------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------| | ||
| | `buttonBackgroundColor` | String | Sets background color of Slider's button. | `"white"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `buttonBorderColor` | String | Sets border color of Slider's button. | `"dimgrey"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `buttonBorderWidth` | Number | Sets border width of Slider's button. | `1` | | | ||
| | `buttonDimensionsPercentage` | Number | Sets height and width of Slider's button as percentage of viewport width. | `1` | | | ||
| | `labelFontColor` | String | Sets font color of labels if they are displayed. | `"dimgrey"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `labelFontWeight` | String | Sets font weight of labels if they are displayed. | `""` -> the default `fontWeight` value in React Native. | | | ||
| | `scaleNumberFontColor` | String | Sets font color of scale numbers if they are displayed. | `"dimgrey"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `scaleNumberFontWeight` | String | Sets font weight of scale numbers if they are displayed. | `""` -> the default `fontWeight` value in React Native. | | | ||
| | `sliderInnerBackgroundColor` | String | Sets background color of inner slider View. | `"white"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | `sliderInnerBorderStyles` | Object | An object of StyleSheet properties to set border-related styles of sliderInner View component. | `{ borderWidth: vw(1) / 2, borderColor: '#d9dce4', borderBottomColor: '#f1f4f5', borderRadius: 50 }` | If passed, the object is filtered to remove any key/value properties that are not for component's border. | | ||
@@ -47,0 +58,0 @@ **Basic, bare-bones usage:** |
@@ -82,26 +82,34 @@ /** | ||
| // | ||
| // Props checking | ||
| // Functional Props checking | ||
| // | ||
| this.buttonBackgroundColor = this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : 'white'; | ||
| this.buttonBorderColor = this.props.buttonBorderColor ? this.props.buttonBorderColor : 'dimgrey'; | ||
| this.buttonBorderWidth = this.props.buttonBorderWidth ? this.props.buttonBorderWidth : 1; | ||
| this.buttonDimensionsPercentage = this.props.buttonDimensionsPercentage ? this.props.buttonDimensionsPercentage : 6; | ||
| this.callback = this.props.callback ? this.props.callback : () => {}; | ||
| this.defaultValue = this.defaultValueCheckHandler(this.props.defaultValue) ? this.props.defaultValue : 5; | ||
| this.maxValue = this.props.maxValue ? this.props.maxValue : 10; | ||
| // | ||
| // General Styling Props checking | ||
| // | ||
| this.fillColor = this.props.fillColor ? this.props.fillColor : 'dodgerblue'; | ||
| this.heightPercentage = this.props.heightPercentage ? this.props.heightPercentage : 1; | ||
| this.labelFontColor = this.props.labelFontColor ? this.props.labelFontColor : 'dimgrey'; | ||
| this.labelFontWeight = this.props.labelFontWeight ? this.props.labelFontWeight : ''; | ||
| this.maxLabel = this.props.maxLabel ? this.labelGenerator(this.props.maxLabel, 'right') : this.emptyLabel; | ||
| this.maxValue = this.props.maxValue ? this.props.maxValue : 10; | ||
| this.midLabel = this.props.midLabel ? this.labelGenerator(this.props.midLabel, 'center') : this.emptyLabel; | ||
| this.minLabel = this.props.minLabel ? this.labelGenerator(this.props.minLabel, 'left') : this.emptyLabel; | ||
| this.scaleNumberFontColor = this.props.scaleNumberFontColor ? this.props.scaleNumberFontColor : 'dimgrey'; | ||
| this.scaleNumberFontWeight = this.props.scaleNumberFontWeight ? this.props.scaleNumberFontWeight : ''; | ||
| this.showFill = this.props.showFill === false ? false : true; | ||
| this.showNumberScale = this.props.showNumberScale ? this.props.showNumberScale : false; | ||
| this.showSeparatorScale = this.props.showSeparatorScale ? this.props.showSeparatorScale : false; | ||
| this.widthPercentage = this.props.widthPercentage ? this.props.widthPercentage : 85; | ||
| // | ||
| // Specific Styling Props checking | ||
| // | ||
| this.buttonBackgroundColor = this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : 'white'; | ||
| this.buttonBorderColor = this.props.buttonBorderColor ? this.props.buttonBorderColor : 'dimgrey'; | ||
| this.buttonBorderWidth = this.props.buttonBorderWidth ? this.props.buttonBorderWidth : 1; | ||
| this.buttonDimensionsPercentage = this.props.buttonDimensionsPercentage ? this.props.buttonDimensionsPercentage : 6; | ||
| this.labelFontColor = this.props.labelFontColor ? this.props.labelFontColor : 'dimgrey'; | ||
| this.labelFontWeight = this.props.labelFontWeight ? this.props.labelFontWeight : ''; | ||
| this.scaleNumberFontColor = this.props.scaleNumberFontColor ? this.props.scaleNumberFontColor : 'dimgrey'; | ||
| this.scaleNumberFontWeight = this.props.scaleNumberFontWeight ? this.props.scaleNumberFontWeight : ''; | ||
| this.sliderInnerBackgroundColor = this.props.sliderInnerBackgroundColor ? this.props.sliderInnerBackgroundColor : 'white'; | ||
| this.sliderInnerBorderStyles = this.props.sliderInnerBorderStyles ? this.props.sliderInnerBorderStyles : this.defaultSliderInnerBorderStyles; | ||
| this.widthPercentage = this.props.widthPercentage ? this.props.widthPercentage : 85; | ||
@@ -108,0 +116,0 @@ // If maxValue is greater than 10 or if slider will take up less than 50% of |
No alert changes
Improved metrics
- Lines of code
- increased by0.77%
782
- Number of lines in readme file
- increased by7.01%
168
Worsened metrics
- Total package byte prevSize
- decreased by-1.99%
50923
No dependency changes