rc-slider - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

lib/Slider.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 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 rcUtil = require('rc-util');
-var DomUtils = rcUtil.Dom;
+var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
+var _rcTooltip = require('rc-tooltip');
+
+var _rcTooltip2 = _interopRequireDefault(_rcTooltip);
+
+var _rcUtil = require('rc-util');
+
+var _rcUtil2 = _interopRequireDefault(_rcUtil);
+
 function noop() {}
@@ -24,3 +39,6 @@
 function prefixClsFn(prefixCls) {
-  var args = Array.prototype.slice.call(arguments, 1);
+  for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
   return args.map(function (s) {
@@ -32,5 +50,5 @@ return prefixCls + '-' + s;
 function getValueFromIndex(props) {
-  var value;
+  var value = undefined;
   var marksLen = props.marks.length;
-  var index;
+  var index = undefined;
   if ('index' in props) {
@@ -48,20 +66,22 @@ index = props.index;
 
-var Slider = React.createClass({
+var Slider = _react2['default'].createClass({
   displayName: 'Slider',
 
   propTypes: {
-    min: React.PropTypes.number,
-    max: React.PropTypes.number,
-    step: React.PropTypes.number,
-    defaultValue: React.PropTypes.number,
-    defaultIndex: React.PropTypes.number,
-    value: React.PropTypes.number,
-    index: React.PropTypes.number,
-    marks: React.PropTypes.array,
-    isIncluded: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    onBeforeChange: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onAfterChange: React.PropTypes.func
+    min: _react2['default'].PropTypes.number,
+    max: _react2['default'].PropTypes.number,
+    step: _react2['default'].PropTypes.number,
+    defaultValue: _react2['default'].PropTypes.number,
+    defaultIndex: _react2['default'].PropTypes.number,
+    value: _react2['default'].PropTypes.number,
+    index: _react2['default'].PropTypes.number,
+    marks: _react2['default'].PropTypes.array,
+    isIncluded: _react2['default'].PropTypes.bool,
+    className: _react2['default'].PropTypes.string,
+    prefixCls: _react2['default'].PropTypes.string,
+    disabled: _react2['default'].PropTypes.bool,
+    children: _react2['default'].PropTypes.any,
+    onBeforeChange: _react2['default'].PropTypes.func,
+    onChange: _react2['default'].PropTypes.func,
+    onAfterChange: _react2['default'].PropTypes.func
   },
@@ -96,2 +116,4 @@
     return {
+      dragging: false,
+      showTooltip: false,
       value: value
@@ -113,117 +135,16 @@ };
 
-  getIndex: function getIndex() {
-    var props = this.props;
-    var value = this.state.value;
-
-    if (props.marks.length === 0) {
-      return Math.floor((value - props.min) / props.step);
-    } else {
-      var unit = ((props.max - props.min) / (props.marks.length - 1)).toFixed(5);
-      return Math.round(value / unit);
-    }
-  },
-
-  _trimAlignValue: function _trimAlignValue(val, props) {
-    props = props || this.props;
-
-    var step = props.marks.length > 0 ? (props.max - props.min) / (props.marks.length - 1) : props.step;
-
-    if (val <= props.min) {
-      val = props.min;
-    }
-    if (val >= props.max) {
-      val = props.max;
-    }
-
-    var valModStep = (val - props.min) % step;
-    var alignValue = val - valModStep;
-
-    if (Math.abs(valModStep) * 2 >= step) {
-      alignValue += valModStep > 0 ? step : -step;
-    }
-
-    return parseFloat(alignValue.toFixed(5));
-  },
-
-  _calcOffset: function _calcOffset(value) {
-    var ratio = (value - this.props.min) / (this.props.max - this.props.min);
-    return ratio * 100 + '%';
-  },
-
-  _calcValue: function _calcValue(offset) {
-    var ratio = offset / this.getSliderLength();
-    return ratio * (this.props.max - this.props.min) + this.props.min;
-  },
-
-  _calValueByPos: function _calValueByPos(position) {
-    var pixelOffset = position - this.getSliderStart();
-    // pixelOffset -= (this.state.handleSize / 2);
-    var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
-    // do not use setState
-    this.state.value = nextValue;
-    this.setState({
-      value: nextValue
-    });
-    return nextValue;
-  },
-
-  _getTouchPosition: function _getTouchPosition(e) {
-    var touch = e.touches[0];
-    return touch.pageX;
-  },
-
-  _triggerEvents: function _triggerEvents(event) {
-    var props = this.props;
-    var hasMarks = props.marks && props.marks.length > 0;
-    if (props[event]) {
-      props[event](hasMarks ? this.getIndex() : this.state.value);
-    }
-  },
-
-  _addEventHandles: function _addEventHandles(type) {
-    if (type === 'touch') {
-      // just work for chrome iOS Safari and Android Browser
-      this._onTouchMoveListener = DomUtils.addEventListener(document, 'touchmove', this._onTouchMove);
-      this._onTouchUpListener = DomUtils.addEventListener(document, 'touchend', this._onTouchUp);
-    } else if (type === 'mouse') {
-      this._onMouseMoveListener = DomUtils.addEventListener(document, 'mousemove', this._onMouseMove);
-      this._onMouseUpListener = DomUtils.addEventListener(document, 'mouseup', this._onMouseUp);
-    }
-  },
-
-  _removeEventHandles: function _removeEventHandles(type) {
-    if (type === 'touch') {
-      this._onTouchMoveListener.remove();
-      this._onTouchUpListener.remove();
-    } else if (type === 'mouse') {
-      this._onMouseMoveListener.remove();
-      this._onMouseUpListener.remove();
-    }
-  },
-
-  _start: function _start(position) {
-    this._triggerEvents('onBeforeChange');
-    this.startValue = this.state.value;
-    this.startPosition = position;
-  },
-
-  _end: function _end(type) {
-    this._removeEventHandles(type);
-    this._triggerEvents('onAfterChange');
-  },
-
-  _onMouseUp: function _onMouseUp() {
+  onMouseUp: function onMouseUp() {
     this._end('mouse');
   },
 
-  _onTouchUp: function _onTouchUp() {
+  onTouchUp: function onTouchUp() {
     this._end('touch');
   },
 
-  _onMouseMove: function _onMouseMove(e) {
+  onMouseMove: function onMouseMove(e) {
     var position = e.pageX;
-    this._handleMove(e, position);
+    this.onMove(e, position);
   },
 
-  _onTouchMove: function _onTouchMove(e) {
+  onTouchMove: function onTouchMove(e) {
     if (e.touches.length > 1 || e.type === 'touchend' && e.touches.length > 0) {
@@ -236,6 +157,6 @@ this._end('touch');
 
-    this._handleMove(e, position);
+    this.onMove(e, position);
   },
 
-  _handleMove: function _handleMove(e, position) {
+  onMove: function onMove(e, position) {
     pauseEvent(e);
@@ -251,12 +172,45 @@ var props = this.props;
     var diffValue = diffPosition / this.getSliderLength() * (props.max - props.min);
-    var newValue = this._trimAlignValue(this.startValue + diffValue);
+    value = this._trimAlignValue(this.startValue + diffValue);
 
-    value = newValue;
-
-    if (newValue !== oldValue) {
+    if (value !== oldValue && !('value' in props) && !('index' in props)) {
       this.setState({ value: value });
-      this._triggerEvents('onChange');
     }
+    if (value !== oldValue) {
+      this._triggerEvents('onChange', value);
+    }
   },
 
+  onTouchStart: function onTouchStart(e) {
+    if (e.touches.length > 1 || e.type.toLowerCase() === 'touchend' && e.touches.length > 0) {
+      return;
+    }
+
+    var position = this._getTouchPosition(e);
+    var value = this._calValueByPos(position);
+    this._triggerEvents('onChange', value);
+    this._start(position);
+    this._addDocumentEvents('touch');
+    pauseEvent(e);
+  },
+
+  onSliderMouseDown: function onSliderMouseDown(e) {
+    var position = e.pageX;
+    var value = this._calValueByPos(position);
+    this._triggerEvents('onChange', value);
+    this._start(position);
+    this._addDocumentEvents('mouse');
+    pauseEvent(e);
+  },
+
+  getIndex: function getIndex(v) {
+    var props = this.props;
+    var value = v === undefined ? this.state.value : v;
+
+    if (props.marks.length === 0) {
+      return Math.floor((value - props.min) / props.step);
+    }
+    var unit = ((props.max - props.min) / (props.marks.length - 1)).toFixed(5);
+    return Math.round(value / unit);
+  },
+
   getSliderLength: function getSliderLength() {
@@ -278,24 +232,2 @@ var slider = this.refs.slider;
 
-  handleTouchStart: function handleTouchStart(e) {
-    if (e.touches.length > 1 || e.type.toLowerCase() === 'touchend' && e.touches.length > 0) {
-      return;
-    }
-
-    var position = this._getTouchPosition(e);
-    this._calValueByPos(position);
-    this._triggerEvents('onChange');
-    this._start(position);
-    this._addEventHandles('touch');
-    pauseEvent(e);
-  },
-
-  handleSliderMouseDown: function handleSliderMouseDown(e) {
-    var position = e.pageX;
-    this._calValueByPos(position);
-    this._triggerEvents('onChange');
-    this._start(position);
-    this._addEventHandles('mouse');
-    pauseEvent(e);
-  },
-
   renderSteps: function renderSteps() {
@@ -325,6 +257,6 @@ var props = this.props;
 
-      elements[i] = React.createElement('span', { className: className, style: style, ref: 'step' + i });
+      elements[i] = _react2['default'].createElement('span', { className: className, style: style, ref: 'step' + i, key: 'step' + i });
     }
 
-    return React.createElement(
+    return _react2['default'].createElement(
       'div',
@@ -363,5 +295,5 @@ { className: stepClassName },
 
-    return React.createElement(
+    return _react2['default'].createElement(
       'span',
-      { className: className, style: style },
+      { className: className, style: style, key: i },
       this.props.marks[i]
@@ -382,3 +314,3 @@ );
 
-    return React.createElement(
+    return _react2['default'].createElement(
       'div',
@@ -390,4 +322,4 @@ { className: className },
 
-  renderHandle: function renderHandle(offset) {
-    var handleStyle = {
+  renderHandler: function renderHandler(offset) {
+    var onStyle = {
       left: offset
@@ -399,23 +331,38 @@ };
 
-    var handle = React.createElement('div', { className: className,
+    var events = {};
+
+    var tooltipVisible = undefined;
+
+    if (this.state.dragging) {
+      tooltipVisible = true;
+    } else {
+      events = {
+        onMouseEnter: this.showTooltip.bind(this, true),
+        onMouseLeave: this.showTooltip.bind(this, false)
+      };
+      tooltipVisible = this.state.showTooltip;
+    }
+
+    var handle = _react2['default'].createElement('div', _extends({ className: className
+    }, events, {
       ref: 'handle',
-      style: handleStyle });
+      style: onStyle }));
 
     if (this.props.marks.length > 0) {
       return handle;
-    } else {
-      return React.createElement(
-        Tooltip,
-        {
-          placement: 'top',
-          overlay: React.createElement(
-            'span',
-            null,
-            this.state.value
-          ),
-          delay: 0,
-          prefixCls: prefixClsFn(prefixCls, 'tooltip') },
-        handle
-      );
     }
+    return _react2['default'].createElement(
+      _rcTooltip2['default'],
+      {
+        placement: { points: ['bc', 'tc'] },
+        visible: tooltipVisible,
+        overlay: _react2['default'].createElement(
+          'span',
+          null,
+          this.state.value
+        ),
+        delay: 0,
+        prefixCls: prefixClsFn(prefixCls, 'tooltip') },
+      handle
+    );
   },
@@ -431,3 +378,3 @@
 
-    return React.createElement('div', { className: trackClassName, ref: 'track', style: style });
+    return _react2['default'].createElement('div', { className: trackClassName, ref: 'track', style: style });
   },
@@ -440,11 +387,8 @@
     var props = this.props;
-
     var value = state.value;
     var offset = this._calcOffset(value);
-
     var track = this.props.isIncluded ? this.renderTrack(offset) : null;
-    var handles = this.renderHandle(offset);
+    var ons = this.renderHandler(offset);
     var steps = props.step > 1 || props.marks.length > 0 ? this.renderSteps() : null;
     var sliderMarks = props.marks.length > 0 ? this.renderMarks() : null;
-
     var prefixCls = props.prefixCls;
@@ -454,9 +398,9 @@ var disabled = props.disabled;
 
-    return React.createElement(
+    return _react2['default'].createElement(
       'div',
-      { className: rcUtil.classSet(sliderClassName), ref: 'slider',
-        onTouchStart: disabled ? noop : this.handleTouchStart,
-        onMouseDown: disabled ? noop : this.handleSliderMouseDown },
+      { className: _rcUtil2['default'].classSet(sliderClassName), ref: 'slider',
+        onTouchStart: disabled ? noop : this.onTouchStart,
+        onMouseDown: disabled ? noop : this.onSliderMouseDown },
       track,
-      handles,
+      ons,
       steps,
@@ -466,5 +410,114 @@ sliderMarks,
     );
+  },
+
+  showTooltip: function showTooltip(show) {
+    this.setState({
+      showTooltip: show
+    });
+  },
+
+  _trimAlignValue: function _trimAlignValue(v, propsArg) {
+    var val = v;
+    var props = propsArg || this.props;
+    var step = props.marks.length > 0 ? (props.max - props.min) / (props.marks.length - 1) : props.step;
+
+    if (val <= props.min) {
+      val = props.min;
+    }
+    if (val >= props.max) {
+      val = props.max;
+    }
+
+    var valModStep = (val - props.min) % step;
+    var alignValue = val - valModStep;
+
+    if (Math.abs(valModStep) * 2 >= step) {
+      alignValue += valModStep > 0 ? step : -step;
+    }
+
+    return parseFloat(alignValue.toFixed(5));
+  },
+
+  _calcOffset: function _calcOffset(value) {
+    var ratio = (value - this.props.min) / (this.props.max - this.props.min);
+    return ratio * 100 + '%';
+  },
+
+  _calcValue: function _calcValue(offset) {
+    var ratio = offset / this.getSliderLength();
+    return ratio * (this.props.max - this.props.min) + this.props.min;
+  },
+
+  _calValueByPos: function _calValueByPos(position) {
+    var pixelOffset = position - this.getSliderStart();
+    // pixelOffset -= (this.state.onSize / 2);
+    var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
+    this.setState({
+      value: nextValue
+    });
+    return nextValue;
+  },
+
+  _getTouchPosition: function _getTouchPosition(e) {
+    var touch = e.touches[0];
+    return touch.pageX;
+  },
+
+  _triggerEvents: function _triggerEvents(event, v) {
+    var props = this.props;
+    var hasMarks = props.marks && props.marks.length > 0;
+    if (props[event]) {
+      var data = undefined;
+      if (hasMarks) {
+        data = this.getIndex(v);
+      } else if (v === undefined) {
+        data = this.state.value;
+      } else {
+        data = v;
+      }
+      props[event](data);
+    }
+  },
+
+  _addDocumentEvents: function _addDocumentEvents(type) {
+    if (type === 'touch') {
+      // just work for chrome iOS Safari and Android Browser
+      this.onTouchMoveListener = _rcUtil.Dom.addEventListener(document, 'touchmove', this.onTouchMove);
+      this.onTouchUpListener = _rcUtil.Dom.addEventListener(document, 'touchend', this.onTouchUp);
+    } else if (type === 'mouse') {
+      this.onMouseMoveListener = _rcUtil.Dom.addEventListener(document, 'mousemove', this.onMouseMove);
+      this.onMouseUpListener = _rcUtil.Dom.addEventListener(document, 'mouseup', this.onMouseUp);
+    }
+  },
+
+  _removeEventons: function _removeEventons(type) {
+    if (type === 'touch') {
+      this.onTouchMoveListener.remove();
+      this.onTouchUpListener.remove();
+    } else if (type === 'mouse') {
+      this.onMouseMoveListener.remove();
+      this.onMouseUpListener.remove();
+    }
+  },
+
+  _start: function _start(position) {
+    this._triggerEvents('onBeforeChange');
+    this.startValue = this.state.value;
+    this.startPosition = position;
+    this.setState({
+      dragging: true
+    });
+  },
+
+  _end: function _end(type) {
+    this._removeEventons(type);
+    this._triggerEvents('onAfterChange');
+    this.setState({
+      dragging: false,
+      showTooltip: false
+    });
   }
 });
 
-module.exports = Slider;
+exports['default'] = Slider;
+module.exports = exports['default'];

package.json

 {
   "name": "rc-slider",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "slider ui component for react",
@@ -20,2 +20,6 @@ "keywords": [
   },
+  "files": [
+    "assets/*.css",
+    "lib"
+  ],
   "licenses": "MIT",
@@ -28,9 +32,7 @@ "main": "./lib/index.js",
     "build": "rc-tools run build",
-    "precommit": "rc-tools run precommit",
-    "less": "rc-tools run less",
     "gh-pages": "rc-tools run gh-pages",
-    "history": "rc-tools run history",
     "start": "node --harmony node_modules/.bin/rc-server",
-    "publish": "rc-tools run tag",
+    "pub": "rc-tools run pub",
     "lint": "rc-tools run lint",
+    "karma": "rc-tools run karma",
     "saucelabs": "node --harmony node_modules/.bin/rc-tools run saucelabs",
@@ -44,3 +46,3 @@ "browser-test": "node --harmony node_modules/.bin/rc-tools run browser-test",
     "rc-server": "3.x",
-    "rc-tools": "3.x",
+    "rc-tools": "4.x",
     "react": "^0.13.x",
@@ -51,8 +53,8 @@ "node-dev": "2.x",
   "precommit": [
-    "precommit"
+    "lint"
   ],
   "dependencies": {
-    "rc-tooltip": "^2.4.0",
-    "rc-util": "^2.0.2"
+    "rc-tooltip": "2.x",
+    "rc-util": "2.x"
   }
 }

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

23202

increased by9.1%

Lines of code

567

increased by8.62%

Dependency changes

• Updatedrc-tooltip@2.x

• Updatedrc-util@2.x