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

Comparing version 0.1.13 to 0.2.0

lib/index.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _tooltip = require('./cmp/tooltip');
+
+var _tooltip2 = _interopRequireDefault(_tooltip);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,3 +42,7 @@
       unfillWidth: 0,
-      active: false
+      active: false,
+      modalActive: false,
+      modalOffsetTop: 0,
+      modalOffsetLeft: 0,
+      modalPredictionValue: 0
     };
@@ -71,3 +79,4 @@ return _this;
         fillWidth: this.calculateFill(sliderWidth),
-        unfillWidth: sliderWidth - 20 - this.calculateFill(sliderWidth)
+        unfillWidth: sliderWidth - 20 - this.calculateFill(sliderWidth),
+        modalOffsetTop: -35
       });
@@ -84,13 +93,7 @@ }
     value: function calculateDiff(event) {
-      var _this2 = this;
-
       var sliderWidth = this.rangeElem.clientWidth - 20;
       var sliderWithOffset = sliderWidth + this.rangeElem.offsetLeft;
-      // console.log('sliderWithOffset', sliderWithOffset);
-      // console.log('pageX', event.pageX);
-      // console.log('offsetLeft', this.rangeElem.offsetLeft)
       if (event.pageX >= this.rangeElem.offsetLeft && event.pageX <= sliderWithOffset) {
         var diff = sliderWidth - (sliderWithOffset - event.pageX);
         var value = diff * 100 / sliderWidth * this.state.max / 100;
-        // if (this.state.fillWidth === diff) return;
         this.setState({
@@ -103,5 +106,3 @@ fillWidth: diff,
         typeof this.props.onChange === 'function' ? this.props.onChange(event, value) : null;
-        setTimeout(function () {
-          return _this2.removeTransitions(_this2.rangeElem);
-        }, 250);
+        //setTimeout(() => this.removeTransitions(this.rangeElem), 250);
       }
@@ -132,40 +133,62 @@ }
     }
-  }, {
-    key: 'addTransitions',
-    value: function addTransitions(elem) {
-      elem.style.transition = 'width 250ms';
-      for (var i = 0; elem.childNodes.length > i; i++) {
-        if (elem.childNodes[i].classList.contains('thumb')) {
-          elem.childNodes[i].style.transition = 'left 250ms';
-          continue;
-        }
-        elem.childNodes[i].style.transition = 'width 250ms';
-        if (elem.childNodes[i].childNodes) this.addTransitions(elem.childNodes[i]);
-      }
-    }
-  }, {
-    key: 'removeTransitions',
-    value: function removeTransitions(elem) {
-      elem.style.transition = 'width 0ms';
-      for (var i = 0; elem.childNodes.length > i; i++) {
 
-        if (elem.childNodes[i].classList.contains('thumb')) {
-          elem.childNodes[i].style.transition = 'left 0ms';
-          continue;
-        }
+    // addTransitions(elem) {
+    //   elem.style.transition = 'width 250ms';
+    //   for (let i=0; elem.childNodes.length > i; i++) {
+    //     if (elem.childNodes[i].classList && elem.childNodes[i].classList.contains('thumb')) {
+    //       elem.childNodes[i].style.transition = 'left 250ms';
+    //       continue;
+    //     }
+    //     elem.childNodes[i].style.transition = 'width 250ms';
+    //     if (elem.childNodes[i].childNodes) this.addTransitions(elem.childNodes[i]);
+    //   }
+    // }
+    //
+    // removeTransitions(elem) {
+    //   if (!this.props.onPreModal) return;
+    //   elem.style.transition = 'width 0ms';
+    //   for (let i=0; elem.childNodes.length > i; i++) {
+    //
+    //     if (elem.childNodes[i].classList && elem.childNodes[i].classList.contains('thumb')) {
+    //       elem.childNodes[i].style.transition = 'left 0ms';
+    //       continue;
+    //     }
+    //
+    //     elem.childNodes[i].style.transition = 'width 0ms';
+    //     if (elem.childNodes[i].childNodes) this.removeTransitions(elem.childNodes[i]);
+    //   }
+    // }
 
-        elem.childNodes[i].style.transition = 'width 0ms';
-        if (elem.childNodes[i].childNodes) this.removeTransitions(elem.childNodes[i]);
-      }
-    }
   }, {
     key: 'seekIntent',
     value: function seekIntent(event) {
-      this.addTransitions(this.rangeElem);
       this.calculateDiff(event);
     }
   }, {
+    key: 'seekPrediction',
+    value: function seekPrediction(event) {
+      event.stopPropagation();
+      var sliderWidth = this.rangeElem.clientWidth - 20;
+      var sliderWithOffset = sliderWidth + this.rangeElem.offsetLeft;
+      if (event.pageX >= this.rangeElem.offsetLeft && event.pageX <= sliderWithOffset) {
+        var diff = sliderWidth - (sliderWithOffset - event.pageX);
+        var value = diff * 100 / sliderWidth * this.state.max / 100;
+        this.setState({
+          modalOffsetLeft: event.pageX - 20,
+          modalActive: true,
+          modalPredictionValue: value
+        });
+      }
+    }
+  }, {
+    key: 'deactiveModal',
+    value: function deactiveModal() {
+      this.setState({
+        modalActive: false
+      });
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this3 = this,
+      var _this2 = this,
           _React$createElement2;
@@ -176,5 +199,11 @@
         { className: 'slider', style: this.props.style, ref: function ref(el) {
-            return _this3.rangeElem = el;
-          }, onMouseDown: function onMouseDown(e) {
-            return _this3.seekIntent(e);
+            return _this2.rangeElem = el;
+          },
+          onMouseDown: function onMouseDown(e) {
+            return _this2.seekIntent(e);
+          },
+          onMouseMove: function onMouseMove(e) {
+            return _this2.seekPrediction(e);
+          }, onMouseOut: function onMouseOut(e) {
+            return _this2.deactiveModal(e);
           } },
@@ -189,5 +218,5 @@ _react2.default.createElement(
           className: 'thumb' }, _defineProperty(_React$createElement2, 'style', { left: this.state.fillWidth }), _defineProperty(_React$createElement2, 'onMouseDown', function onMouseDown(e) {
-          return _this3.handleStart(e);
+          return _this2.handleStart(e);
         }), _defineProperty(_React$createElement2, 'onMouseUp', function onMouseUp(e) {
-          return _this3.handleEnd(e);
+          return _this2.handleEnd(e);
         }), _React$createElement2)),
@@ -198,3 +227,5 @@ _react2.default.createElement(
           _react2.default.createElement('div', { style: { backgroundColor: this.props.colorPalette.toFill }, className: 'unfill-child' })
-        )
+        ),
+        this.props.onPreModal && this.state.modalActive ? _react2.default.createElement(_tooltip2.default, { offsetTop: this.state.modalOffsetTop,
+          offsetLeft: this.state.modalOffsetLeft, text: String(this.props.onPreModal(this.state.modalPredictionValue)) }) : null
       );
@@ -201,0 +232,0 @@ }

package.json

 {
   "name": "react-metro-range-slider",
-  "version": "0.1.13",
+  "version": "0.2.0",
   "description": "Metro range slider",
@@ -9,2 +9,3 @@ "main": "lib/index.js",
     "start": "webpack-dev-server",
+    "clean": "rm ./lib/App.js",
     "build:lib": "babel ./src --stage 2 -d ./lib",
@@ -14,5 +15,5 @@ "build:less": "lessc ./src/styles/style.less ./lib/index.css",
     "postpublish": "git push origin master --follow-tags",
-    "minor": "npm version minor && npm publish",
-    "major": "npm version major && npm publish",
-    "patch": "npm version patch && npm publish"
+    "minor": "npm version minor && npm publish && npm run clean",
+    "major": "npm version major && npm publish && npm run clean",
+    "patch": "npm version patch && npm publish && npm run clean"
   },
@@ -47,4 +48,7 @@ "files": [
     "extract-text-webpack-plugin": "^3.0.2",
+    "html-webpack-plugin": "^2.30.1",
     "less": "^2.7.3",
     "less-loader": "^4.0.5",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "style-loader": "^0.19.1",
@@ -51,0 +55,0 @@ "webpack": "^3.10.0"

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

13385

increased by21.6%

Number of package files

4

increased by33.33%

Lines of code

304

increased by26.67%

Worsened metrics

Dev dependency count

20

increased by17.65%

No dependency changes