react-video-timelines-slider - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

package.json

 {
   "name": "react-video-timelines-slider",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Time Slider component for React",
@@ -5,0 +5,0 @@ "author": "Prakhar Shukla <[e-mail]>",

README.md

@@ -25,3 +25,3 @@ ### react-video-timelines-slider
 |formatTooltip|function|ms => format(new Date(ms), 'HH:mm:ss')|Function that determines the format in which the tooltip will be displayed|
-|showToolTip|bool|true|enable-disable the tooltip|
+|showTooltip|bool|true|enable-disable the tooltip|
 |showTimelineError|bool|false|Turn timeline red if range with gap is selected|
@@ -76,3 +76,3 @@ |onUpdateCallback|function|||
           formatTooltip={(ms) => format(new Date(ms), 'HH:mm:ss.SSS')}
-          showToolTip={true}
+          showTooltip={true}
           showTimelineError={false}
@@ -79,0 +79,0 @@ />

src/components/Handle.js

@@ -14,3 +14,4 @@ import PropTypes from "prop-types";
   isActive,
-  showToolTip,
+  showTooltip,
+  tooltipTag,
 }) => {
@@ -21,3 +22,3 @@ const leftPosition = `${percent}%`;
     <>
-      {(mouseOver || isActive) && !disabled && showToolTip ? (
+      {(mouseOver || isActive) && !disabled && showTooltip ? (
         <div
@@ -32,3 +33,5 @@ style={{
           <div className='tooltip'>
-            <span className='tooltiptext'>Value: {formatTooltip(value)}</span>
+            <span className='tooltiptext'>
+              {tooltipTag + " " + formatTooltip(value)}
+            </span>
           </div>
@@ -75,5 +78,6 @@ </div>
   style: PropTypes.object,
-  formatTooltip: PropTypes.func,
+  formatTooltip: PropTypes.func.isRequired,
   isActive: PropTypes.bool.isRequired,
-  showToolTip: PropTypes.bool,
+  showTooltip: PropTypes.bool.isRequired,
+  tooltipTag: PropTypes.string.isRequired,
 };
@@ -80,0 +84,0 @@

src/components/SliderRail.js

@@ -10,3 +10,4 @@ import React, { useState, useCallback } from "react";
   activeHandleID,
-  showToolTip,
+  showTooltip,
+  tooltipTag,
 }) => {
@@ -39,3 +40,3 @@ const [percent, setPercent] = useState(null);
     <>
-      {!activeHandleID && showToolTip && value ? (
+      {!activeHandleID && showTooltip && value ? (
         <div
@@ -50,3 +51,5 @@ style={{
           <div className='tooltip'>
-            <span className='tooltiptext'>Value: {formatTooltip(value)}</span>
+            <span className='tooltiptext'>
+              {tooltipTag + " " + formatTooltip(value)}
+            </span>
           </div>
@@ -70,7 +73,8 @@ </div>
   getRailProps: PropTypes.func.isRequired,
-  formatTooltip: PropTypes.func,
-  activeHandleID: PropTypes.string,
-  showToolTip: PropTypes.bool,
+  formatTooltip: PropTypes.func.isRequired,
+  activeHandleID: PropTypes.string.isRequired,
+  showTooltip: PropTypes.bool.isRequired,
+  tooltipTag: PropTypes.string.isRequired,
 };
 
 export default SliderRail;

src/index.js

@@ -139,3 +139,4 @@ import React from "react";
       showTimelineError,
-      showToolTip,
+      showTooltip,
+      tooltipTag,
     } = this.props;
@@ -170,3 +171,4 @@
                 formatTooltip={formatTooltip}
-                showToolTip={showToolTip}
+                showTooltip={showTooltip}
+                tooltipTag={tooltipTag}
               />
@@ -189,3 +191,4 @@ )}
                     isActive={handle.id === activeHandleID}
-                    showToolTip={showToolTip}
+                    showTooltip={showTooltip}
+                    tooltipTag={tooltipTag}
                   />
@@ -278,3 +281,4 @@ ))}
   showTimelineError: PropTypes.bool,
-  showToolTip: PropTypes.bool,
+  showTooltip: PropTypes.bool,
+  tooltipTag: PropTypes.string,
 };
@@ -296,5 +300,6 @@
   showTimelineError: false,
-  showToolTip: true,
+  showTooltip: true,
+  tooltipTag: "Value: ",
 };
 
 export default TimeRange;

No alert changes

Improved metrics

Total package byte prevSize

570369

increased by0.11%

Lines of code

579

increased by2.3%

No dependency changes