react-timeline-range-slider - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

package.json

 {
   "name": "react-timeline-range-slider",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Time Slider component for React",
@@ -5,0 +5,0 @@ "author": "Elizaveta Shkodkina <[e-mail]>",

README.md

@@ -17,2 +17,4 @@ ### react-timeline-range-slider
 |error|bool|false|Is the selected interval is not valid|
+|mode|int/function|3|The interaction mode. Value of 1 will allow handles to cross each other. Value of 2 will keep the sliders from crossing and separated by a step. Value of 3 will make the handles pushable and keep them a step apart. ADVANCED: You can also supply a function that will be passed the current values and the incoming update. Your function should return what the state should be set as.|
+|formatTick|function|ms => format(new Date(ms), 'HH:mm')|Function that determines the format in which the date will be displayed|
 |onUpdateCallback|function|||
@@ -24,3 +26,3 @@ |onChangeCallback|function|||
 import React from 'react'  
-import { endOfToday, format, set } from 'date-fns' 
+import { endOfToday, set } from 'date-fns' 
 import TimeRange from 'react-timeline-range-slider'  
@@ -27,0 +29,0 @@

src/index.js

@@ -24,4 +24,2 @@ import React from 'react'
 
-const formatTick = ms => format(new Date(ms), 'HH:mm')
-
 const getTimelineConfig = (timelineStart, timelineLength) => (date) => {
@@ -82,3 +80,4 @@ const percent = differenceInMilliseconds(date, timelineStart)/timelineLength * 100
 
-    if (startInterval > start && endInterval <= end || startInterval >= start && endInterval < end) return true
+    if (startInterval > start && endInterval <= end || startInterval >= start && endInterval < end)
+      return true
     if (start >= startInterval && end <= endInterval) return true
@@ -88,2 +87,3 @@
     const isEndInBlockedInterval = end < endInterval && end > startInterval && start <= startInterval
+
     return isStartInBlockedInterval || isEndInBlockedInterval
@@ -120,2 +120,4 @@ }
       showNow,
+      formatTick,
+      mode,
     } = this.props
@@ -130,3 +132,3 @@
         <Slider
-          mode={3}
+          mode={mode}
           step={step}
@@ -140,3 +142,4 @@ domain={domain}
           <Rail>
-            {({ getRailProps }) => <SliderRail className={sliderRailClassName} getRailProps={getRailProps} />}
+            {({ getRailProps }) =>
+              <SliderRail className={sliderRailClassName} getRailProps={getRailProps} />}
           </Rail>
@@ -235,2 +238,3 @@
   step: PropTypes.number,
+  formatTick: PropTypes.func,
 }
@@ -244,2 +248,3 @@
   timelineInterval: [startOfToday(), endOfToday()],
+  formatTick: ms => format(new Date(ms), 'HH:mm'),
   disabledIntervals: [],
@@ -249,4 +254,5 @@ step: 1000*60*30,
   error: false,
+  mode: 3,
 }
 
 export default TimeRange

No alert changes

Improved metrics

Lines of code

401

increased by1.52%

Number of lines in readme file

72

increased by2.86%

Worsened metrics

Total package byte prevSize

559955

decreased by-61.96%

Number of package files

14

decreased by-6.67%

No dependency changes