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.19 to 1.0.20
| { | ||
| "name": "react-native-slider-picker", | ||
| "version": "1.0.19", | ||
| "version": "1.0.20", | ||
| "description": "Custom range slide picker for React Native. 🚧 UNDER CONSTRUCTION 🚧", | ||
@@ -5,0 +5,0 @@ "main": "src/index.js", |
@@ -20,3 +20,3 @@ /** | ||
| * @param {Boolean} showFill - Optional. Boolean value to determine whether or not the slider inner shows a fill or if it is transparent. Defaults to `true`. | ||
| * @param {Boolean} showScale - Optional. Boolean value to determine whether or not to display scale of numbers for the Slider's range. Defaults to `false`. | ||
| * @param {Boolean} showNumberScale - Optional. Boolean value to determine whether or not to display scale of numbers for the Slider's range. Defaults to `false`. | ||
| * @param {Number} width - Optional. Percentage of device's viewport to set as component's width. TO DO: Set minimum and maximum | ||
@@ -110,3 +110,4 @@ */ | ||
| this.showFill = this.props.showFill === false ? false : true; | ||
| this.showScale = this.props.showScale ? this.props.showScale : false; | ||
| 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; | ||
@@ -123,3 +124,3 @@ | ||
| this.setStyles(); | ||
| this.setPreRenderStyles(); | ||
| } | ||
@@ -129,5 +130,2 @@ | ||
| * Render | ||
| * - Generate separator lines | ||
| * - Generate numbers for slider scale | ||
| * - Set prop-dependent styles | ||
| */ | ||
@@ -137,43 +135,5 @@ render() { | ||
| // | ||
| // Render line-separators and numbers | ||
| // Dynamic styles that update with state | ||
| // | ||
| // Initialize empty array to push separators into below | ||
| let separators = []; | ||
| // For 0 through 10, push a styled separator into separators array via helper | ||
| // method, this.separatorGenerator(). Will be rendered in JSX below. | ||
| for (let i = 0; i <= 10; i++) { | ||
| separators.push(this.separatorGenerator(i)); | ||
| } | ||
| // Initialize empty array to push buttons into below | ||
| let numbers = []; | ||
| // For 0 through 10, push a styled button into numbers. | ||
| // Will be rendered in JSX below. | ||
| for (let i = 0; i <= 10; i++) { | ||
| // Initialize width variable to set the width of each TouchableHighlight. | ||
| // Default value is the rounded down - numbersContainers width divided by 10. | ||
| let width = Math.floor(vw(this.widthPercentage) / 10) | ||
| // If first TouchableHighlight, add extra width to account for the width of separatorLine. | ||
| width = i === 0 ? width + ((vw(1) / 3) * 2) : width; | ||
| // Push styled TouchableHighlight | ||
| numbers.push( | ||
| <TouchableHighlight | ||
| key={i} | ||
| style={[styles.buttonTouchable, { width: width }]} // Add width here | ||
| > | ||
| <Text style={[styles.buttonNumber]}>{i !== 10 ? i : `${i}+`}</Text> | ||
| </TouchableHighlight> | ||
| ) | ||
| } | ||
| // | ||
| // Prop-dependent styles | ||
| // | ||
| // | ||
@@ -224,10 +184,6 @@ // Work on a copy of styles.selection to modify programmatically below | ||
| { /* Lines between the numbers */ } | ||
| <View style={styles.separatorContainer}> | ||
| {separators} | ||
| </View> | ||
| {this.generateSeparators()} | ||
| { /* Buttons for picking a value */ } | ||
| <View style={styles.numberContainer}> | ||
| {numbers} | ||
| </View> | ||
| {this.generateNumbers()} | ||
@@ -238,3 +194,6 @@ </TouchableOpacity> | ||
| setStyles = () => { | ||
| /** | ||
| * Helper method to call any other styling-related helper methods that must be called before component is rendered. | ||
| */ | ||
| setPreRenderStyles = () => { | ||
| this.setLabelAndLabelContainerStyles(); | ||
@@ -349,3 +308,3 @@ } | ||
| * @param {Number} index - The index of event target. | ||
| * @return {Number} Returns new width of selectionFill based on this.state.currentValue | ||
| * @return {Component} View component with nested Text component | ||
| */ | ||
@@ -360,3 +319,71 @@ separatorGenerator = (index) => { | ||
| /** | ||
| * If props.showSeparatorScale is true, calls this.separatorGenerator() for props.maxValue times. Pushes these into an array and returns array wrapped in a View component. | ||
| * @return {Component} View component with nested View separators | ||
| */ | ||
| generateSeparators = () => { | ||
| // Don't return anything if props.showSeparatorScale is false. | ||
| if (!this.showSeparatorScale) { | ||
| return null; | ||
| } | ||
| // Initialize empty array to push separators and number push buttons into below | ||
| let separators = []; | ||
| // For 0 through 10, push a styled separator into separators array via helper | ||
| // method, this.separatorGenerator(). Will be rendered in JSX below. | ||
| for (let i = 0; i <= 10; i++) { | ||
| separators.push(this.separatorGenerator(i)); | ||
| } | ||
| return ( | ||
| <View style={styles.separatorContainer}> | ||
| {separators} | ||
| </View> | ||
| ) | ||
| } | ||
| /** | ||
| * If props.showNumberScale is true, generates a TouchableHighlight for each number in slider's range. | ||
| * @return {Component} View component with nested View separators | ||
| */ | ||
| generateNumbers = () => { | ||
| // Don't return anything if props.showNumberScale is false. | ||
| if (!this.showNumberScale) { | ||
| return null; | ||
| } | ||
| // Initialize empty array to push numbers into | ||
| let numbers = []; | ||
| if (this.showNumberScale) { | ||
| // For 0 through 10, push a styled button into numbers. | ||
| // Will be rendered in JSX below. | ||
| for (let i = 0; i <= 10; i++) { | ||
| // Initialize width variable to set the width of each TouchableHighlight. | ||
| // Default value is the rounded down - numbersContainers width divided by 10. | ||
| let width = Math.floor(vw(this.widthPercentage) / 10) | ||
| // If first TouchableHighlight, add extra width to account for the width of separatorLine. | ||
| width = i === 0 ? width + ((vw(1) / 3) * 2) : width; | ||
| // Push styled TouchableHighlight | ||
| numbers.push( | ||
| <TouchableHighlight | ||
| key={i} | ||
| style={[styles.buttonTouchable, { width: width }]} // Add width here | ||
| > | ||
| <Text style={[styles.buttonNumber]}>{i !== 10 ? i : `${i}+`}</Text> | ||
| </TouchableHighlight> | ||
| ) | ||
| } | ||
| } | ||
| return ( | ||
| <View style={styles.numberContainer}> | ||
| {numbers} | ||
| </View> | ||
| ) | ||
| } | ||
| } | ||
@@ -363,0 +390,0 @@ |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by3.67%
29702
- Lines of code
- increased by4.31%
629
No dependency changes