react-slider - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+### [1.1.4](https://github.com/zillow/react-slider/compare/v1.1.3...v1.1.4) (2021-01-22)
+
+
+### Bug Fixes
+
+* set position absolute for marks at render ([7d979e7](https://github.com/zillow/react-slider/commit/7d979e7f9e43b8ba94bebc82ac0081d111efecbd)), closes [#203](https://github.com/zillow/react-slider/issues/203)
+
 ### [1.1.3](https://github.com/zillow/react-slider/compare/v1.1.2...v1.1.3) (2021-01-21)
@@ -7,0 +14,0 @@

es/components/ReactSlider/ReactSlider.js

@@ -862,2 +862,10 @@ var _jsxFileName = "/Users/brians/git/react-slider/src/components/ReactSlider/ReactSlider.jsx";
 
+  _proto.buildMarkStyle = function buildMarkStyle(offset) {
+    var _ref;
+
+    return _ref = {
+      position: 'absolute'
+    }, _ref[this.posMinKey()] = offset, _ref;
+  };
+
   _proto.renderThumbs = function renderThumbs(offset) {
@@ -918,4 +926,2 @@ var length = offset.length;
     }).map(function (mark) {
-      var _ref, _ref2;
-
       var offset = _this3.calcOffset(mark);
@@ -925,5 +931,5 @@
         key: mark,
-        className: _this3.props.markClassName
+        className: _this3.props.markClassName,
+        style: _this3.buildMarkStyle(offset)
       };
-      props.style = _this3.props.orientation === 'vertical' ? (_ref = {}, _ref[_this3.props.invert ? 'bottom' : 'top'] = offset, _ref) : (_ref2 = {}, _ref2[_this3.props.invert ? 'right' : 'left'] = offset, _ref2);
       return _this3.props.renderMark(props);
@@ -930,0 +936,0 @@ });

es/styleguidist/ThemeWrapper.js

@@ -7,3 +7,3 @@ var _jsxFileName = "/Users/brians/git/react-slider/src/styleguidist/ThemeWrapper.jsx",
 function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n    .horizontal-slider {\n        width: 100%;\n        max-width: 500px;\n        height: 50px;\n        border: 1px solid grey;\n    }\n\n    .vertical-slider {\n        height: 380px;\n        width: 50px;\n        border: 1px solid grey;\n    }\n\n    .example-thumb {\n        font-size: 0.9em;\n        text-align: center;\n        background-color: black;\n        color: white;\n        cursor: pointer;\n        border: 5px solid gray;\n        box-sizing: border-box;\n    }\n\n    .example-thumb.active {\n        background-color: grey;\n    }\n\n    .example-track {\n        position: relative;\n        background: #ddd;\n    }\n\n    .example-track.example-track-1 {\n        background: #f00;\n    }\n\n    .example-track.example-track-2 {\n        background: #0f0;\n    }\n\n    .example-mark {\n        position: absolute;\n        width: 8px;\n        height: 8px;\n        border: 2px solid #000;\n        background-color: #fff;\n        cursor: pointer;\n        border-radius: 50%;\n        vertical-align: middle;\n    }\n\n    .horizontal-slider .example-track {\n        top: 20px;\n        height: 10px;\n    }\n\n    .horizontal-slider .example-thumb {\n        top: 1px;\n        width: 50px;\n        height: 48px;\n        line-height: 38px;\n    }\n\n    .horizontal-slider .example-mark {\n        margin: 0 calc(25px - 6px);\n        bottom: calc(50% - 6px);\n    }\n\n    .vertical-slider .example-thumb {\n        left: 1px;\n        width: 48px;\n        line-height: 40px;\n        height: 50px;\n    }\n\n    .vertical-slider .example-track {\n        left: 20px;\n        width: 10px;\n    }\n\n    .vertical-slider .example-mark {\n        margin: calc(25px - 6px) 0;\n        left: calc(50% - 6px);\n    }\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n    .horizontal-slider {\n        width: 100%;\n        max-width: 500px;\n        height: 50px;\n        border: 1px solid grey;\n    }\n\n    .vertical-slider {\n        height: 380px;\n        width: 50px;\n        border: 1px solid grey;\n    }\n\n    .example-thumb {\n        font-size: 0.9em;\n        text-align: center;\n        background-color: black;\n        color: white;\n        cursor: pointer;\n        border: 5px solid gray;\n        box-sizing: border-box;\n    }\n\n    .example-thumb.active {\n        background-color: grey;\n    }\n\n    .example-track {\n        position: relative;\n        background: #ddd;\n    }\n\n    .example-track.example-track-1 {\n        background: #f00;\n    }\n\n    .example-track.example-track-2 {\n        background: #0f0;\n    }\n\n    .example-mark {\n        width: 8px;\n        height: 8px;\n        border: 2px solid #000;\n        background-color: #fff;\n        cursor: pointer;\n        border-radius: 50%;\n        vertical-align: middle;\n    }\n\n    .horizontal-slider .example-track {\n        top: 20px;\n        height: 10px;\n    }\n\n    .horizontal-slider .example-thumb {\n        top: 1px;\n        width: 50px;\n        height: 48px;\n        line-height: 38px;\n    }\n\n    .horizontal-slider .example-mark {\n        margin: 0 calc(25px - 6px);\n        bottom: calc(50% - 6px);\n    }\n\n    .vertical-slider .example-thumb {\n        left: 1px;\n        width: 48px;\n        line-height: 40px;\n        height: 50px;\n    }\n\n    .vertical-slider .example-track {\n        left: 20px;\n        width: 10px;\n    }\n\n    .vertical-slider .example-mark {\n        margin: calc(25px - 6px) 0;\n        left: calc(50% - 6px);\n    }\n"]);
 
@@ -28,3 +28,3 @@ _templateObject = function _templateObject() {
       fileName: _jsxFileName,
-      lineNumber: 93,
+      lineNumber: 92,
       columnNumber: 5
@@ -36,3 +36,3 @@ }
       fileName: _jsxFileName,
-      lineNumber: 94,
+      lineNumber: 93,
       columnNumber: 9
@@ -44,3 +44,3 @@ }
       fileName: _jsxFileName,
-      lineNumber: 95,
+      lineNumber: 94,
       columnNumber: 9
@@ -47,0 +47,0 @@ }

lib/components/ReactSlider/ReactSlider.js

@@ -868,2 +868,10 @@ "use strict";
 
+  _proto.buildMarkStyle = function buildMarkStyle(offset) {
+    var _ref;
+
+    return _ref = {
+      position: 'absolute'
+    }, _ref[this.posMinKey()] = offset, _ref;
+  };
+
   _proto.renderThumbs = function renderThumbs(offset) {
@@ -924,4 +932,2 @@ var length = offset.length;
     }).map(function (mark) {
-      var _ref, _ref2;
-
       var offset = _this3.calcOffset(mark);
@@ -931,5 +937,5 @@
         key: mark,
-        className: _this3.props.markClassName
+        className: _this3.props.markClassName,
+        style: _this3.buildMarkStyle(offset)
       };
-      props.style = _this3.props.orientation === 'vertical' ? (_ref = {}, _ref[_this3.props.invert ? 'bottom' : 'top'] = offset, _ref) : (_ref2 = {}, _ref2[_this3.props.invert ? 'right' : 'left'] = offset, _ref2);
       return _this3.props.renderMark(props);
@@ -936,0 +942,0 @@ });

lib/styleguidist/ThemeWrapper.js

@@ -15,3 +15,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n    .horizontal-slider {\n        width: 100%;\n        max-width: 500px;\n        height: 50px;\n        border: 1px solid grey;\n    }\n\n    .vertical-slider {\n        height: 380px;\n        width: 50px;\n        border: 1px solid grey;\n    }\n\n    .example-thumb {\n        font-size: 0.9em;\n        text-align: center;\n        background-color: black;\n        color: white;\n        cursor: pointer;\n        border: 5px solid gray;\n        box-sizing: border-box;\n    }\n\n    .example-thumb.active {\n        background-color: grey;\n    }\n\n    .example-track {\n        position: relative;\n        background: #ddd;\n    }\n\n    .example-track.example-track-1 {\n        background: #f00;\n    }\n\n    .example-track.example-track-2 {\n        background: #0f0;\n    }\n\n    .example-mark {\n        position: absolute;\n        width: 8px;\n        height: 8px;\n        border: 2px solid #000;\n        background-color: #fff;\n        cursor: pointer;\n        border-radius: 50%;\n        vertical-align: middle;\n    }\n\n    .horizontal-slider .example-track {\n        top: 20px;\n        height: 10px;\n    }\n\n    .horizontal-slider .example-thumb {\n        top: 1px;\n        width: 50px;\n        height: 48px;\n        line-height: 38px;\n    }\n\n    .horizontal-slider .example-mark {\n        margin: 0 calc(25px - 6px);\n        bottom: calc(50% - 6px);\n    }\n\n    .vertical-slider .example-thumb {\n        left: 1px;\n        width: 48px;\n        line-height: 40px;\n        height: 50px;\n    }\n\n    .vertical-slider .example-track {\n        left: 20px;\n        width: 10px;\n    }\n\n    .vertical-slider .example-mark {\n        margin: calc(25px - 6px) 0;\n        left: calc(50% - 6px);\n    }\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n    .horizontal-slider {\n        width: 100%;\n        max-width: 500px;\n        height: 50px;\n        border: 1px solid grey;\n    }\n\n    .vertical-slider {\n        height: 380px;\n        width: 50px;\n        border: 1px solid grey;\n    }\n\n    .example-thumb {\n        font-size: 0.9em;\n        text-align: center;\n        background-color: black;\n        color: white;\n        cursor: pointer;\n        border: 5px solid gray;\n        box-sizing: border-box;\n    }\n\n    .example-thumb.active {\n        background-color: grey;\n    }\n\n    .example-track {\n        position: relative;\n        background: #ddd;\n    }\n\n    .example-track.example-track-1 {\n        background: #f00;\n    }\n\n    .example-track.example-track-2 {\n        background: #0f0;\n    }\n\n    .example-mark {\n        width: 8px;\n        height: 8px;\n        border: 2px solid #000;\n        background-color: #fff;\n        cursor: pointer;\n        border-radius: 50%;\n        vertical-align: middle;\n    }\n\n    .horizontal-slider .example-track {\n        top: 20px;\n        height: 10px;\n    }\n\n    .horizontal-slider .example-thumb {\n        top: 1px;\n        width: 50px;\n        height: 48px;\n        line-height: 38px;\n    }\n\n    .horizontal-slider .example-mark {\n        margin: 0 calc(25px - 6px);\n        bottom: calc(50% - 6px);\n    }\n\n    .vertical-slider .example-thumb {\n        left: 1px;\n        width: 48px;\n        line-height: 40px;\n        height: 50px;\n    }\n\n    .vertical-slider .example-track {\n        left: 20px;\n        width: 10px;\n    }\n\n    .vertical-slider .example-mark {\n        margin: calc(25px - 6px) 0;\n        left: calc(50% - 6px);\n    }\n"]);
 
@@ -18,0 +18,0 @@ _templateObject = function _templateObject() {

package.json

 {
   "name": "react-slider",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Slider component for React",
@@ -5,0 +5,0 @@ "main": "lib/components/ReactSlider/ReactSlider.js",

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

124426

increased by0.18%

Lines of code

2490

increased by0.4%

No dependency changes