rn-range-slider - npm Package Compare versions

Comparing version 1.2.9 to 1.3.0

index.js

@@ -9,7 +9,14 @@ import React, {PureComponent} from 'react';
 
+const dateToTimeStamp = date => date instanceof Date ? date.getTime() : date;
+
 class RangeSlider extends PureComponent {
 
     _handleValueChange = ({nativeEvent}) => {
-        const { onValueChanged } = this.props
-        onValueChanged && onValueChanged(nativeEvent.lowValue, nativeEvent.highValue, nativeEvent.fromUser);
+        const { onValueChanged, valueType } = this.props
+        let { lowValue, highValue, fromUser } = nativeEvent;
+        if (valueType === 'time') {
+            lowValue = new Date(lowValue);
+            highValue = new Date(highValue);
+        }
+        onValueChanged && onValueChanged(lowValue, highValue, fromUser);
     }
@@ -28,3 +35,3 @@
     render() {
-        let { initialHighValue, initialLowValue, min, max } = this.props;
+        let { valueType, initialHighValue, initialLowValue, min, max } = this.props;
         if (initialLowValue === undefined) {
@@ -36,3 +43,11 @@ initialLowValue = min;
         }
-        const sliderProps = {...this.props, initialLowValue, initialHighValue};
+
+        if (valueType === 'time') {
+            initialHighValue = dateToTimeStamp(initialHighValue);
+            initialLowValue = dateToTimeStamp(initialLowValue);
+            min = dateToTimeStamp(min);
+            max = dateToTimeStamp(max);
+        }
+
+        const sliderProps = {...this.props, initialLowValue, initialHighValue, min, max};
         return <NativeRangeSlider
@@ -48,2 +63,6 @@ {...sliderProps}
     setHighValue = value => {
+        const { valueType } = this.props;
+        if (valueType === 'time') {
+            value = dateToTimeStamp(value);
+        }
         this._slider.setNativeProps({ highValue: value });
@@ -53,2 +72,6 @@ }
     setLowValue = value => {
+        const { valueType } = this.props;
+        if (valueType === 'time') {
+            value = dateToTimeStamp(value);
+        }
         this._slider.setNativeProps({ lowValue: value });
@@ -58,14 +81,21 @@ }
 
+const numberOrDate = PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.instanceOf(Date),
+]);
+
 RangeSlider.propTypes = {
     rangeEnabled: PropTypes.bool,
-    gravity: PropTypes.string,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    step: PropTypes.number,
-    initialLowValue: PropTypes.number,
-    initialHighValue: PropTypes.number,
+    disabled: PropTypes.bool,
+    valueType: PropTypes.oneOf(['number', 'time']),
+    gravity: PropTypes.oneOf(['top', 'bottom', 'center']),
+    min: numberOrDate,
+    max: numberOrDate,
+    step: numberOrDate,
+    initialLowValue: numberOrDate,
+    initialHighValue: numberOrDate,
     lineWidth: PropTypes.number,
     thumbRadius: PropTypes.number,
     thumbBorderWidth: PropTypes.number,
-    labelStyle: PropTypes.string,
+    labelStyle: PropTypes.oneOf(['none', 'bubble']),
     labelGapHeight: PropTypes.number,
@@ -92,2 +122,4 @@ labelTailHeight: PropTypes.number,
     rangeEnabled: true,
+    disabled: false,
+    valueType: 'number',
     gravity: 'top',
@@ -94,0 +126,0 @@ min: 0,

package.json

 {
   "name": "rn-range-slider",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "author": "Tigran Sahakyan <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "React Native Range Slider for Android and iOS",

README.md

@@ -63,3 +63,5 @@ # RangeSlider
 |----------|-----------------------|------|:-------------:|
+| disabled | If true user won't be able to move the slider | Boolean | **false** |
 | rangeEnabled | Slider works as an ordinary slider with 1 control if false | Boolean | **true** |
+| valueType | Type of slider values | String<br/><br/>Currently supported values:<br/>- **number**<br/>- **time** | **number** |
 | lineWidth | Width of slider's line | Number | **4** |
@@ -74,3 +76,3 @@ | thumbRadius |  Radius of thumb (including border) | Number | **10** |
 | labelGapHeight |  Gap between label and slider | Number | **4** |
-| textFormat |  This string will be formatted with active value and shown in thumb | String<br/>**"Price: %d**" =><br/>"**Price: 75**"<br/>if the current value is 75 | **%d**<br/> (just the number) |
+| textFormat |  This string will be formatted with active value and shown in thumb.<br/>If `valueType` is set to **time** this prop will be considered as date formatter.<br/>Since this library uses native components and everything is rendered at native side, time on label text will be formatted by [`NSDateFormatter`](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/DataFormatting/Articles/dfDateFormatting10_4.html) for iOS and [`SimpleDateFormat`](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) for Android, so make sure you are passing valid format for both platforms. | String<br/>**"Price: %d**" =><br/>"**Price: 75**"<br/>if the current value is 75 | **%d**<br/> (just the number) |
 | labelStyle |  Style of the label.<br/>Label is not shown if **none** | String<br/><br/>Currently supported values:<br/>- **none**<br/>- **bubble** | **bubble** |
@@ -85,11 +87,18 @@ | gravity | Vertical gravity of drawn content | String<br/><br/>Currently supported values:<br/>- **top**<br/>- **bottom**<br/>- **center** | **top** |
 | labelTextColor |  Color label's text | String | **#ffffff** |
-| min |  Minimum value of slider | Number (integer) | **0** |
-| max |  Maximum value of slider | Number (integer) | **100** |
-| step |  Step of slider | Number (integer) | **1** |
-| initialLowValue |  Initial value of lower thumb | Number (integer) | **0** |
-| initialHighValue |  Initial value of higher thumb | Number (integer) | **100** |
+| step |  Step of slider. If `valueType` is set to **time**, this prop wil considered as milliseconds. | Number | **1** |
 
+Props below may have different types depending on `valueType` prop.<br/>
+If `valueType` is set to **number**, these props should be `Number`s (integer).<br/>
+If `valueType` is set to **time**, these props may be `Number` (integer) or `Date` and if a `Number` is passed the value will be considered as timestamp.
+
+| Name |      Description      | Type | Default Value |
+|----------|-----------------------|------|:-------------:|
+| min |  Minimum value of slider | Depends on `valueType` | **0** |
+| max |  Maximum value of slider | Depends on `valueType` | **100** |
+| initialLowValue |  Initial value of lower thumb | Depends on `valueType` | **0** |
+| initialHighValue |  Initial value of higher thumb | Depends on `valueType` | **100** |
+
 <br/>
 
-If **initialLowValue** ( or **initialHighValue**) is not provided, it's set to **min** (or **max**).
+If `initialLowValue` ( or `initialHighValue`) is not provided, it's set to `min` (or `max`).
 
@@ -119,8 +128,8 @@ ### Methods
 
-#### Available methos
+#### Available methods
 
 | Name |      Description      | Params |
 |---|---|---|
-| setLowValue | Set low value of slider | value: number |
-| setHighValue | Set high value of slider | value: number |
+| setLowValue | Set low value of slider | value: `Number` (or Date, if `valueType` is set to **time**) |
+| setHighValue | Set high value of slider | value: `Number` (or Date, if `valueType` is set to **time**) |
 
@@ -131,3 +140,3 @@ ### Callbacks
 |----------|---------------------|--------|
-| onValueChanged | A callback to be called when value was changed.<br/>**fromUser** parameter is true if the value was changed because of user's interaction (not by calling **setLowValue** or **setHighValue** methods). Just like android's [OnSeekbarChangeListener](https://developer.android.com/reference/android/widget/SeekBar.OnSeekBarChangeListener). | lowValue: number<br/><br/>highValue: number<br/><br/>fromUser: boolean |
+| onValueChanged | A callback to be called when value was changed.<br/><br/>Type of _lowValue_ and _highValue_ will be `Number` if `valueType` is **number** and `Date` if `valueType` is **time**<br/><br/>_fromUser_ parameter is true if the value was changed because of user's interaction (not by calling __setLowValue__ or __setHighValue__ methods). Just like android's [OnSeekbarChangeListener](https://developer.android.com/reference/android/widget/SeekBar.OnSeekBarChangeListener). | lowValue: number<br/><br/>highValue: number<br/><br/>fromUser: boolean |
 | onTouchStart | Nothing to explain I think :) | - |
@@ -139,2 +148,1 @@ | onTouchEnd | Nothing to explain here too | - |
 * Label's corner radius is not working on iOS
-* Problems with integration of react-native 0.60+

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

963206

increased by0.58%

Lines of code

129

increased by27.72%

Number of lines in readme file

143

increased by5.93%

No dependency changes