rc-slider - npm Package Compare versions

Comparing version 1.2.10 to 1.3.0

lib/Slider.js

 'use strict';
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var React = require('react');
 var Tooltip = require('rc-tooltip');
-var DomUtils = require('rc-util').Dom;
+var rcUtil = require('rc-util');
+var DomUtils = rcUtil.Dom;
 
+function noop() {}
+
 function pauseEvent(e) {
+  e.cancelBubble = true;
+  e.returnValue = false;
   if (e.stopPropagation) {
@@ -30,4 +37,4 @@ e.stopPropagation();
     step: React.PropTypes.number,
-    value: React.PropTypes.number,
-    index: React.PropTypes.number,
+    defaultValue: React.PropTypes.number,
+    defaultIndex: React.PropTypes.number,
     marks: React.PropTypes.array,
@@ -47,8 +54,9 @@ isIncluded: React.PropTypes.bool,
       step: 1,
-      value: 0,
+      defaultValue: 0,
       marks: [],
       isIncluded: true,
-      className: 'rc-slider',
+      className: '',
+      prefixCls: 'rc-slider',
       disabled: false,
-      index: 0
+      defaultIndex: 0
     };
@@ -59,6 +67,7 @@ },
     var props = this.props;
-    var value = this._trimAlignValue(props.value);
+    var value = props.defaultValue;
+    value = this._trimAlignValue(value);
     var marksLen = props.marks.length;
     if (marksLen > 0) {
-      value = (props.max - props.min) / (marksLen - 1) * props.index;
+      value = (props.max - props.min) / (marksLen - 1) * props.defaultIndex;
       value = value.toFixed(5);
@@ -68,16 +77,6 @@ }
     return {
-      value: value,
-      active: props.disabled ? '' : value > props.min || props.index > 0 ? 'active' : ''
+      value: value
     };
   },
 
-  componentWillReceiveProps: function componentWillReceiveProps(newProps) {
-    var value = newProps.value;
-    this.state.value = this._trimAlignValue(value, newProps);
-  },
-
-  getValue: function getValue() {
-    return this.state.value;
-  },
-
   getIndex: function getIndex() {
@@ -127,14 +126,14 @@ var props = this.props;
 
-  _calValueByPos: function _calValueByPos(position, callback) {
+  _calValueByPos: function _calValueByPos(position) {
     var pixelOffset = position - this.getSliderStart();
     // pixelOffset -= (this.state.handleSize / 2);
     var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
-
-    this.setState({ value: nextValue, active: 'active' }, callback);
+    // do not use setState
+    this.state.value = nextValue;
+    this.setState({
+      value: nextValue
+    });
+    return nextValue;
   },
 
-  _getMousePosition: function _getMousePosition(e) {
-    return e.pageX || e.clientX + document.documentElement.scrollLeft;
-  },
-
   _getTouchPosition: function _getTouchPosition(e) {
@@ -158,5 +157,3 @@ var touch = e.touches[0];
       this._onTouchUpListener = DomUtils.addEventListener(document, 'touchend', this._onTouchUp);
-    }
-
-    if (type === 'mouse') {
+    } else if (type === 'mouse') {
       this._onMouseMoveListener = DomUtils.addEventListener(document, 'mousemove', this._onMouseMove);
@@ -171,5 +168,3 @@ this._onMouseUpListener = DomUtils.addEventListener(document, 'mouseup', this._onMouseUp);
       this._onTouchUpListener.remove();
-    }
-
-    if (type === 'mouse') {
+    } else if (type === 'mouse') {
       this._onMouseMoveListener.remove();
@@ -181,12 +176,5 @@ this._onMouseUpListener.remove();
   _start: function _start(position) {
-    if (document.activeElement) {
-      document.activeElement.blur();
-    }
-
     this._triggerEvents('onBeforeChange');
-
-    this.setState({
-      startValue: this.state.value,
-      startPosition: position
-    });
+    this.startValue = this.state.value;
+    this.startPosition = position;
   },
@@ -196,3 +184,3 @@
     this._removeEventHandles(type);
-    this.setState(this._triggerEvents.bind(this, 'onAfterChange'));
+    this._triggerEvents('onAfterChange');
   },
@@ -209,3 +197,3 @@
   _onMouseMove: function _onMouseMove(e) {
-    var position = this._getMousePosition(e);
+    var position = e.pageX;
     this._handleMove(e, position);
@@ -216,2 +204,3 @@ },
     if (e.touches.length > 1 || e.type === 'touchend' && e.touches.length > 0) {
+      this._end('touch');
       return;
@@ -227,3 +216,2 @@ }
     pauseEvent(e);
-    // var position = this._getMousePosition(e);
     var props = this.props;
@@ -235,6 +223,6 @@ var state = this.state;
 
-    var diffPosition = position - state.startPosition;
+    var diffPosition = position - this.startPosition;
 
     var diffValue = diffPosition / this.getSliderLength() * (props.max - props.min);
-    var newValue = this._trimAlignValue(state.startValue + diffValue);
+    var newValue = this._trimAlignValue(this.startValue + diffValue);
 
@@ -244,3 +232,4 @@ value = newValue;
     if (newValue !== oldValue) {
-      this.setState({ value: value, active: 'active' }, this._triggerEvents.bind(this, 'onChange'));
+      this.setState({ value: value });
+      this._triggerEvents('onChange');
     }
@@ -266,3 +255,3 @@ },
   handleTouchStart: function handleTouchStart(e) {
-    if (this.props.disabled || e.touches.length > 1 || e.type === 'touchend' && e.touches.length > 0) {
+    if (e.touches.length > 1 || e.type.toLowerCase() === 'touchend' && e.touches.length > 0) {
       return;
@@ -272,3 +261,4 @@ }
     var position = this._getTouchPosition(e);
-    this.startPosition = position;
+    this._calValueByPos(position);
+    this._triggerEvents('onChange');
     this._start(position);
@@ -279,29 +269,8 @@ this._addEventHandles('touch');
 
-  handleMouseDown: function handleMouseDown() {
-    var _this = this;
-
-    return function (e) {
-      if (_this.props.disabled) {
-        return;
-      }
-      var position = _this._getMousePosition(e);
-      _this._start(position);
-      _this._addEventHandles('mouse');
-      pauseEvent(e);
-    };
-  },
-
   handleSliderMouseDown: function handleSliderMouseDown(e) {
-    var _this2 = this;
-
-    if (this.props.disabled) {
-      return;
-    }
-    var position = this._getMousePosition(e);
-    this._calValueByPos(position, function () {
-      _this2._triggerEvents('onChange');
-      _this2._start(position);
-      _this2._addEventHandles('mouse');
-    });
-
+    var position = e.pageX;
+    this._calValueByPos(position);
+    this._triggerEvents('onChange');
+    this._start(position);
+    this._addEventHandles('mouse');
     pauseEvent(e);
@@ -316,3 +285,3 @@ },
 
-    var prefixCls = props.className;
+    var prefixCls = props.prefixCls;
     var stepClassName = prefixClsFn(prefixCls, 'step');
@@ -361,3 +330,3 @@
 
-    var prefixCls = this.props.className;
+    var prefixCls = this.props.prefixCls;
     var className = prefixClsFn(prefixCls, 'mark-text');
@@ -388,3 +357,3 @@
 
-    var prefixCls = this.props.className;
+    var prefixCls = this.props.prefixCls;
     var className = prefixClsFn(prefixCls, 'mark');
@@ -404,15 +373,8 @@
 
-    var prefixCls = this.props.className;
+    var prefixCls = this.props.prefixCls;
     var className = prefixClsFn(prefixCls, 'handle');
 
-    if (this.state.active) {
-      className = prefixClsFn(prefixCls, 'handle', 'handle-active');
-    }
-
     var handle = React.createElement('div', { className: className,
       ref: 'handle',
-      style: handleStyle,
-      href: '#',
-      onMouseDown: this.handleMouseDown,
-      onTouchStart: this.handleTouchStart });
+      style: handleStyle });
 
@@ -443,3 +405,3 @@ if (this.props.marks.length > 0) {
 
-    var prefixCls = this.props.className;
+    var prefixCls = this.props.prefixCls;
     var trackClassName = prefixClsFn(prefixCls, 'track');
@@ -451,2 +413,4 @@
   render: function render() {
+    var _sliderClassName;
+
     var state = this.state;
@@ -463,8 +427,11 @@ var props = this.props;
 
-    var prefixCls = props.className;
-    var sliderClassName = props.disabled ? prefixCls + ' ' + prefixClsFn(prefixCls, 'disabled') : prefixCls;
+    var prefixCls = props.prefixCls;
+    var disabled = props.disabled;
+    var sliderClassName = (_sliderClassName = {}, _defineProperty(_sliderClassName, prefixCls, 1), _defineProperty(_sliderClassName, props.className, !!props.className), _defineProperty(_sliderClassName, prefixCls + '-disabled', disabled), _sliderClassName);
 
     return React.createElement(
       'div',
-      { className: sliderClassName, ref: 'slider', onMouseDown: this.handleSliderMouseDown },
+      { className: rcUtil.classSet(sliderClassName), ref: 'slider',
+        onTouchStart: disabled ? noop : this.handleTouchStart,
+        onMouseDown: disabled ? noop : this.handleSliderMouseDown },
       track,
@@ -471,0 +438,0 @@ handles,

package.json

 {
   "name": "rc-slider",
-  "version": "1.2.10",
+  "version": "1.3.0",
   "description": "slider ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -98,3 +98,3 @@ # rc-slider
          <tr>
-          <td>value</td>
+          <td>defaultValue</td>
           <td>number</td>
@@ -117,3 +117,3 @@ <td>0</td>
         <tr>
-          <td>index</td>
+          <td>defaultIndex</td>
           <td>number</td>
@@ -120,0 +120,0 @@ <td>0</td>

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Worsened metrics

Total package byte prevSize

20573

decreased by-2.36%

Lines of code

492

decreased by-4.47%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes