rc-slider - npm Package Compare versions

Comparing version 8.6.13 to 8.7.0

es/common/createSlider.js

@@ -172,5 +172,11 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
         var slider = this.sliderRef;
+        var _props2 = this.props,
+            vertical = _props2.vertical,
+            reverse = _props2.reverse;
+
         var rect = slider.getBoundingClientRect();
-
-        return this.props.vertical ? rect.top : rect.left + window.pageXOffset;
+        if (vertical) {
+          return reverse ? rect.bottom : rect.top;
+        }
+        return window.pageXOffset + (reverse ? rect.right : rect.left);
       }
@@ -235,6 +241,6 @@ }, {
       value: function calcValue(offset) {
-        var _props2 = this.props,
-            vertical = _props2.vertical,
-            min = _props2.min,
-            max = _props2.max;
+        var _props3 = this.props,
+            vertical = _props3.vertical,
+            min = _props3.min,
+            max = _props3.max;
 
@@ -248,3 +254,4 @@ var ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength());
       value: function calcValueByPos(position) {
-        var pixelOffset = position - this.getSliderStart();
+        var sign = this.props.reverse ? -1 : +1;
+        var pixelOffset = sign * (position - this.getSliderStart());
         var nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
@@ -256,5 +263,5 @@ return nextValue;
       value: function calcOffset(value) {
-        var _props3 = this.props,
-            min = _props3.min,
-            max = _props3.max;
+        var _props4 = this.props,
+            min = _props4.min,
+            max = _props4.max;
 
@@ -274,19 +281,20 @@ var ratio = (value - min) / (max - min);
 
-        var _props4 = this.props,
-            prefixCls = _props4.prefixCls,
-            className = _props4.className,
-            marks = _props4.marks,
-            dots = _props4.dots,
-            step = _props4.step,
-            included = _props4.included,
-            disabled = _props4.disabled,
-            vertical = _props4.vertical,
-            min = _props4.min,
-            max = _props4.max,
-            children = _props4.children,
-            maximumTrackStyle = _props4.maximumTrackStyle,
-            style = _props4.style,
-            railStyle = _props4.railStyle,
-            dotStyle = _props4.dotStyle,
-            activeDotStyle = _props4.activeDotStyle;
+        var _props5 = this.props,
+            prefixCls = _props5.prefixCls,
+            className = _props5.className,
+            marks = _props5.marks,
+            dots = _props5.dots,
+            step = _props5.step,
+            included = _props5.included,
+            disabled = _props5.disabled,
+            vertical = _props5.vertical,
+            reverse = _props5.reverse,
+            min = _props5.min,
+            max = _props5.max,
+            children = _props5.children,
+            maximumTrackStyle = _props5.maximumTrackStyle,
+            style = _props5.style,
+            railStyle = _props5.railStyle,
+            dotStyle = _props5.dotStyle,
+            activeDotStyle = _props5.activeDotStyle;
 
@@ -319,2 +327,3 @@ var _get$call = _get(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'render', this).call(this),
             vertical: vertical,
+            reverse: reverse,
             marks: marks,
@@ -341,3 +350,4 @@ dots: dots,
             max: max,
-            min: min
+            min: min,
+            reverse: reverse
           }),
@@ -367,2 +377,3 @@ children
     style: PropTypes.object,
+    reverse: PropTypes.bool,
     minimumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
@@ -404,2 +415,3 @@ maximumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
     vertical: false,
+    reverse: false,
     trackStyle: [{}],
@@ -406,0 +418,0 @@ handleStyle: [{}],

es/common/Marks.js

@@ -10,2 +10,3 @@ import _extends from 'babel-runtime/helpers/extends';
       vertical = _ref.vertical,
+      reverse = _ref.reverse,
       marks = _ref.marks,
@@ -37,12 +38,10 @@ included = _ref.included,
 
-    var bottomStyle = {
-      marginBottom: '-50%',
-      bottom: (point - min) / range * 100 + '%'
-    };
+    var bottomStyle = _defineProperty({
+      marginBottom: '-50%'
+    }, reverse ? 'top' : 'bottom', (point - min) / range * 100 + '%');
 
-    var leftStyle = {
-      left: (point - min) / range * 100 + '%',
+    var leftStyle = _defineProperty({
       transform: 'translateX(-50%)',
       msTransform: 'translateX(-50%)'
-    };
+    }, reverse ? 'right' : 'left', reverse ? (point - min / 4) / range * 100 + '%' : (point - min) / range * 100 + '%');
 
@@ -78,2 +77,3 @@ var style = vertical ? bottomStyle : leftStyle;
   vertical: PropTypes.bool,
+  reverse: PropTypes.bool,
   marks: PropTypes.object,
@@ -80,0 +80,0 @@ included: PropTypes.bool,

es/common/Steps.js

@@ -26,2 +26,3 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
       vertical = _ref.vertical,
+      reverse = _ref.reverse,
       marks = _ref.marks,
@@ -45,3 +46,3 @@ dots = _ref.dots,
     var isActived = !included && point === upperBound || included && point <= upperBound && point >= lowerBound;
-    var style = vertical ? _extends({ bottom: offset }, dotStyle) : _extends({ left: offset }, dotStyle);
+    var style = vertical ? _extends({}, dotStyle, _defineProperty({}, reverse ? 'top' : 'bottom', offset)) : _extends({}, dotStyle, _defineProperty({}, reverse ? 'right' : 'left', offset));
     if (isActived) {
@@ -51,3 +52,3 @@ style = _extends({}, style, activeDotStyle);
 
-    var pointClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls + '-dot', true), _defineProperty(_classNames, prefixCls + '-dot-active', isActived), _classNames));
+    var pointClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls + '-dot', true), _defineProperty(_classNames, prefixCls + '-dot-active', isActived), _defineProperty(_classNames, prefixCls + '-dot-reverse', reverse), _classNames));
 
@@ -76,5 +77,6 @@ return React.createElement('span', { className: pointClassName, style: style, key: point });
   marks: PropTypes.object,
-  vertical: PropTypes.bool
+  vertical: PropTypes.bool,
+  reverse: PropTypes.bool
 };
 
 export default Steps;

es/common/Track.js

 import _extends from 'babel-runtime/helpers/extends';
+import _defineProperty from 'babel-runtime/helpers/defineProperty';
 /* eslint-disable react/prop-types */
@@ -6,2 +7,4 @@ import React from 'react';
 var Track = function Track(props) {
+  var _ref, _ref2;
+
   var className = props.className,
@@ -12,13 +15,7 @@ included = props.included,
       length = props.length,
-      style = props.style;
+      style = props.style,
+      reverse = props.reverse;
 
+  var positonStyle = vertical ? (_ref = {}, _defineProperty(_ref, reverse ? 'top' : 'bottom', offset + '%'), _defineProperty(_ref, reverse ? 'bottom' : 'top', 'auto'), _defineProperty(_ref, 'height', length + '%'), _ref) : (_ref2 = {}, _defineProperty(_ref2, reverse ? 'right' : 'left', offset + '%'), _defineProperty(_ref2, reverse ? 'left' : 'right', 'auto'), _defineProperty(_ref2, 'width', length + '%'), _ref2);
 
-  var positonStyle = vertical ? {
-    bottom: offset + '%',
-    height: length + '%'
-  } : {
-    left: offset + '%',
-    width: length + '%'
-  };
-
   var elStyle = _extends({}, style, positonStyle);
@@ -25,0 +22,0 @@ return included ? React.createElement('div', { className: className, style: elStyle }) : null;

es/Handle.js

@@ -83,5 +83,8 @@ import _extends from 'babel-runtime/helpers/extends';
     value: function render() {
+      var _ref2, _ref3;
+
       var _props = this.props,
           prefixCls = _props.prefixCls,
           vertical = _props.vertical,
+          reverse = _props.reverse,
           offset = _props.offset,
@@ -94,9 +97,8 @@ style = _props.style,
           tabIndex = _props.tabIndex,
-          restProps = _objectWithoutProperties(_props, ['prefixCls', 'vertical', 'offset', 'style', 'disabled', 'min', 'max', 'value', 'tabIndex']);
+          restProps = _objectWithoutProperties(_props, ['prefixCls', 'vertical', 'reverse', 'offset', 'style', 'disabled', 'min', 'max', 'value', 'tabIndex']);
 
       var className = classNames(this.props.className, _defineProperty({}, prefixCls + '-handle-click-focused', this.state.clickFocused));
+      var positionStyle = vertical ? (_ref2 = {}, _defineProperty(_ref2, reverse ? 'top' : 'bottom', offset + '%'), _defineProperty(_ref2, reverse ? 'bottom' : 'top', 'auto'), _defineProperty(_ref2, 'transform', 'translateY(+50%)'), _ref2) : (_ref3 = {}, _defineProperty(_ref3, reverse ? 'right' : 'left', offset + '%'), _defineProperty(_ref3, reverse ? 'left' : 'right', 'auto'), _defineProperty(_ref3, 'transform', 'translateX(' + (reverse ? '+' : '-') + '50%)'), _ref3);
+      var elStyle = _extends({}, style, positionStyle);
 
-      var postionStyle = vertical ? { bottom: offset + '%' } : { left: offset + '%' };
-      var elStyle = _extends({}, style, postionStyle);
-
       var _tabIndex = tabIndex || 0;
@@ -143,3 +145,4 @@ if (disabled || tabIndex === null) {
   value: PropTypes.number,
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  reverse: PropTypes.bool
 };

es/Range.js

@@ -159,4 +159,8 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
     value: function onKeyboard(e) {
-      var valueMutator = utils.getKeyboardValueMutator(e);
+      var _props = this.props,
+          reverse = _props.reverse,
+          vertical = _props.vertical;
 
+      var valueMutator = utils.getKeyboardValueMutator(e, vertical, reverse);
+
       if (valueMutator) {
@@ -238,7 +242,7 @@ utils.pauseEvent(e);
     value: function getPoints() {
-      var _props = this.props,
-          marks = _props.marks,
-          step = _props.step,
-          min = _props.min,
-          max = _props.max;
+      var _props2 = this.props,
+          marks = _props2.marks,
+          step = _props2.step,
+          min = _props2.min,
+          max = _props2.max;
 
@@ -406,13 +410,14 @@ var cache = this._getPointsCache;
           bounds = _state2.bounds;
-      var _props2 = this.props,
-          prefixCls = _props2.prefixCls,
-          vertical = _props2.vertical,
-          included = _props2.included,
-          disabled = _props2.disabled,
-          min = _props2.min,
-          max = _props2.max,
-          handleGenerator = _props2.handle,
-          trackStyle = _props2.trackStyle,
-          handleStyle = _props2.handleStyle,
-          tabIndex = _props2.tabIndex;
+      var _props3 = this.props,
+          prefixCls = _props3.prefixCls,
+          vertical = _props3.vertical,
+          included = _props3.included,
+          disabled = _props3.disabled,
+          min = _props3.min,
+          max = _props3.max,
+          reverse = _props3.reverse,
+          handleGenerator = _props3.handle,
+          trackStyle = _props3.trackStyle,
+          handleStyle = _props3.handleStyle,
+          tabIndex = _props3.tabIndex;
 
@@ -443,2 +448,3 @@
           max: max,
+          reverse: reverse,
           disabled: disabled,
@@ -460,2 +466,3 @@ style: handleStyle[i],
           vertical: vertical,
+          reverse: reverse,
           included: included,
@@ -485,2 +492,3 @@ offset: offsets[i - 1],
   disabled: PropTypes.bool,
+  reverse: PropTypes.bool,
   tabIndex: PropTypes.arrayOf(PropTypes.number),
@@ -487,0 +495,0 @@ min: PropTypes.number,

es/Slider.js

@@ -106,4 +106,7 @@ import _extends from 'babel-runtime/helpers/extends';
     value: function onKeyboard(e) {
-      var valueMutator = utils.getKeyboardValueMutator(e);
+      var _props = this.props,
+          reverse = _props.reverse,
+          vertical = _props.vertical;
 
+      var valueMutator = utils.getKeyboardValueMutator(e, vertical, reverse);
       if (valueMutator) {
@@ -155,14 +158,15 @@ utils.pauseEvent(e);
 
-      var _props = this.props,
-          prefixCls = _props.prefixCls,
-          vertical = _props.vertical,
-          included = _props.included,
-          disabled = _props.disabled,
-          minimumTrackStyle = _props.minimumTrackStyle,
-          trackStyle = _props.trackStyle,
-          handleStyle = _props.handleStyle,
-          tabIndex = _props.tabIndex,
-          min = _props.min,
-          max = _props.max,
-          handleGenerator = _props.handle;
+      var _props2 = this.props,
+          prefixCls = _props2.prefixCls,
+          vertical = _props2.vertical,
+          included = _props2.included,
+          disabled = _props2.disabled,
+          minimumTrackStyle = _props2.minimumTrackStyle,
+          trackStyle = _props2.trackStyle,
+          handleStyle = _props2.handleStyle,
+          tabIndex = _props2.tabIndex,
+          min = _props2.min,
+          max = _props2.max,
+          reverse = _props2.reverse,
+          handleGenerator = _props2.handle;
       var _state = this.state,
@@ -183,2 +187,3 @@ value = _state.value,
         max: max,
+        reverse: reverse,
         index: 0,
@@ -198,2 +203,3 @@ tabIndex: tabIndex,
         offset: 0,
+        reverse: reverse,
         length: offset,
@@ -216,2 +222,3 @@ style: _extends({}, minimumTrackStyle, _trackStyle)
   tabIndex: PropTypes.number,
+  reverse: PropTypes.bool,
   min: PropTypes.number,
@@ -218,0 +225,0 @@ max: PropTypes.number

es/utils.js

@@ -117,15 +117,15 @@ import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
 
-export function getKeyboardValueMutator(e) {
+export function getKeyboardValueMutator(e, vertical, reverse) {
+  var increase = 'increase';
+  var decrease = 'decrease';
+  var method = increase;
   switch (e.keyCode) {
     case keyCode.UP:
+      method = vertical && reverse ? decrease : increase;break;
     case keyCode.RIGHT:
-      return function (value, props) {
-        return calculateNextValue('increase', value, props);
-      };
-
+      method = !vertical && reverse ? decrease : increase;break;
     case keyCode.DOWN:
+      method = vertical && reverse ? increase : decrease;break;
     case keyCode.LEFT:
-      return function (value, props) {
-        return calculateNextValue('decrease', value, props);
-      };
+      method = !vertical && reverse ? increase : decrease;break;
 
@@ -152,2 +152,5 @@ case keyCode.END:
   }
+  return function (value, props) {
+    return calculateNextValue(method, value, props);
+  };
 }

HISTORY.md

 # History
 ----
 
+## 8.7.0
+
+[Feature] Supprot `reverse` prop.
+
 ## 8.6.0
@@ -5,0 +9,0 @@

lib/common/createSlider.js

@@ -234,5 +234,11 @@ 'use strict';
         var slider = this.sliderRef;
+        var _props2 = this.props,
+            vertical = _props2.vertical,
+            reverse = _props2.reverse;
+
         var rect = slider.getBoundingClientRect();
-
-        return this.props.vertical ? rect.top : rect.left + window.pageXOffset;
+        if (vertical) {
+          return reverse ? rect.bottom : rect.top;
+        }
+        return window.pageXOffset + (reverse ? rect.right : rect.left);
       }
@@ -297,6 +303,6 @@ }, {
       value: function calcValue(offset) {
-        var _props2 = this.props,
-            vertical = _props2.vertical,
-            min = _props2.min,
-            max = _props2.max;
+        var _props3 = this.props,
+            vertical = _props3.vertical,
+            min = _props3.min,
+            max = _props3.max;
 
@@ -310,3 +316,4 @@ var ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength());
       value: function calcValueByPos(position) {
-        var pixelOffset = position - this.getSliderStart();
+        var sign = this.props.reverse ? -1 : +1;
+        var pixelOffset = sign * (position - this.getSliderStart());
         var nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
@@ -318,5 +325,5 @@ return nextValue;
       value: function calcOffset(value) {
-        var _props3 = this.props,
-            min = _props3.min,
-            max = _props3.max;
+        var _props4 = this.props,
+            min = _props4.min,
+            max = _props4.max;
 
@@ -336,19 +343,20 @@ var ratio = (value - min) / (max - min);
 
-        var _props4 = this.props,
-            prefixCls = _props4.prefixCls,
-            className = _props4.className,
-            marks = _props4.marks,
-            dots = _props4.dots,
-            step = _props4.step,
-            included = _props4.included,
-            disabled = _props4.disabled,
-            vertical = _props4.vertical,
-            min = _props4.min,
-            max = _props4.max,
-            children = _props4.children,
-            maximumTrackStyle = _props4.maximumTrackStyle,
-            style = _props4.style,
-            railStyle = _props4.railStyle,
-            dotStyle = _props4.dotStyle,
-            activeDotStyle = _props4.activeDotStyle;
+        var _props5 = this.props,
+            prefixCls = _props5.prefixCls,
+            className = _props5.className,
+            marks = _props5.marks,
+            dots = _props5.dots,
+            step = _props5.step,
+            included = _props5.included,
+            disabled = _props5.disabled,
+            vertical = _props5.vertical,
+            reverse = _props5.reverse,
+            min = _props5.min,
+            max = _props5.max,
+            children = _props5.children,
+            maximumTrackStyle = _props5.maximumTrackStyle,
+            style = _props5.style,
+            railStyle = _props5.railStyle,
+            dotStyle = _props5.dotStyle,
+            activeDotStyle = _props5.activeDotStyle;
 
@@ -381,2 +389,3 @@ var _get$call = (0, _get3['default'])(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'render', this).call(this),
             vertical: vertical,
+            reverse: reverse,
             marks: marks,
@@ -403,3 +412,4 @@ dots: dots,
             max: max,
-            min: min
+            min: min,
+            reverse: reverse
           }),
@@ -428,2 +438,3 @@ children
     style: _propTypes2['default'].object,
+    reverse: _propTypes2['default'].bool,
     minimumTrackStyle: _propTypes2['default'].object, // just for compatibility, will be deperecate
@@ -465,2 +476,3 @@ maximumTrackStyle: _propTypes2['default'].object, // just for compatibility, will be deperecate
     vertical: false,
+    reverse: false,
     trackStyle: [{}],
@@ -467,0 +479,0 @@ handleStyle: [{}],

lib/common/Marks.js

@@ -32,2 +32,3 @@ 'use strict';
       vertical = _ref.vertical,
+      reverse = _ref.reverse,
       marks = _ref.marks,
@@ -59,12 +60,10 @@ included = _ref.included,
 
-    var bottomStyle = {
-      marginBottom: '-50%',
-      bottom: (point - min) / range * 100 + '%'
-    };
+    var bottomStyle = (0, _defineProperty3['default'])({
+      marginBottom: '-50%'
+    }, reverse ? 'top' : 'bottom', (point - min) / range * 100 + '%');
 
-    var leftStyle = {
-      left: (point - min) / range * 100 + '%',
+    var leftStyle = (0, _defineProperty3['default'])({
       transform: 'translateX(-50%)',
       msTransform: 'translateX(-50%)'
-    };
+    }, reverse ? 'right' : 'left', reverse ? (point - min / 4) / range * 100 + '%' : (point - min) / range * 100 + '%');
 
@@ -100,2 +99,3 @@ var style = vertical ? bottomStyle : leftStyle;
   vertical: _propTypes2['default'].bool,
+  reverse: _propTypes2['default'].bool,
   marks: _propTypes2['default'].object,
@@ -102,0 +102,0 @@ included: _propTypes2['default'].bool,

lib/common/Steps.js

@@ -11,5 +11,5 @@ 'use strict';
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _extends4 = require('babel-runtime/helpers/extends');
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _extends5 = _interopRequireDefault(_extends4);
 
@@ -52,2 +52,3 @@ var _react = require('react');
       vertical = _ref.vertical,
+      reverse = _ref.reverse,
       marks = _ref.marks,
@@ -71,8 +72,8 @@ dots = _ref.dots,
     var isActived = !included && point === upperBound || included && point <= upperBound && point >= lowerBound;
-    var style = vertical ? (0, _extends3['default'])({ bottom: offset }, dotStyle) : (0, _extends3['default'])({ left: offset }, dotStyle);
+    var style = vertical ? (0, _extends5['default'])({}, dotStyle, (0, _defineProperty3['default'])({}, reverse ? 'top' : 'bottom', offset)) : (0, _extends5['default'])({}, dotStyle, (0, _defineProperty3['default'])({}, reverse ? 'right' : 'left', offset));
     if (isActived) {
-      style = (0, _extends3['default'])({}, style, activeDotStyle);
+      style = (0, _extends5['default'])({}, style, activeDotStyle);
     }
 
-    var pointClassName = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-dot', true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-dot-active', isActived), _classNames));
+    var pointClassName = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-dot', true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-dot-active', isActived), (0, _defineProperty3['default'])(_classNames, prefixCls + '-dot-reverse', reverse), _classNames));
 
@@ -101,3 +102,4 @@ return _react2['default'].createElement('span', { className: pointClassName, style: style, key: point });
   marks: _propTypes2['default'].object,
-  vertical: _propTypes2['default'].bool
+  vertical: _propTypes2['default'].bool,
+  reverse: _propTypes2['default'].bool
 };
@@ -104,0 +106,0 @@

lib/common/Track.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _react = require('react');
@@ -19,2 +23,4 @@
 var Track = function Track(props) {
+  var _ref, _ref2;
+
   var className = props.className,
@@ -25,13 +31,7 @@ included = props.included,
       length = props.length,
-      style = props.style;
+      style = props.style,
+      reverse = props.reverse;
 
+  var positonStyle = vertical ? (_ref = {}, (0, _defineProperty3['default'])(_ref, reverse ? 'top' : 'bottom', offset + '%'), (0, _defineProperty3['default'])(_ref, reverse ? 'bottom' : 'top', 'auto'), (0, _defineProperty3['default'])(_ref, 'height', length + '%'), _ref) : (_ref2 = {}, (0, _defineProperty3['default'])(_ref2, reverse ? 'right' : 'left', offset + '%'), (0, _defineProperty3['default'])(_ref2, reverse ? 'left' : 'right', 'auto'), (0, _defineProperty3['default'])(_ref2, 'width', length + '%'), _ref2);
 
-  var positonStyle = vertical ? {
-    bottom: offset + '%',
-    height: length + '%'
-  } : {
-    left: offset + '%',
-    width: length + '%'
-  };
-
   var elStyle = (0, _extends3['default'])({}, style, positonStyle);
@@ -38,0 +38,0 @@ return included ? _react2['default'].createElement('div', { className: className, style: elStyle }) : null;

lib/Handle.js

@@ -123,5 +123,8 @@ 'use strict';
     value: function render() {
+      var _ref2, _ref3;
+
       var _props = this.props,
           prefixCls = _props.prefixCls,
           vertical = _props.vertical,
+          reverse = _props.reverse,
           offset = _props.offset,
@@ -134,10 +137,9 @@ style = _props.style,
           tabIndex = _props.tabIndex,
-          restProps = (0, _objectWithoutProperties3['default'])(_props, ['prefixCls', 'vertical', 'offset', 'style', 'disabled', 'min', 'max', 'value', 'tabIndex']);
+          restProps = (0, _objectWithoutProperties3['default'])(_props, ['prefixCls', 'vertical', 'reverse', 'offset', 'style', 'disabled', 'min', 'max', 'value', 'tabIndex']);
 
 
       var className = (0, _classnames2['default'])(this.props.className, (0, _defineProperty3['default'])({}, prefixCls + '-handle-click-focused', this.state.clickFocused));
+      var positionStyle = vertical ? (_ref2 = {}, (0, _defineProperty3['default'])(_ref2, reverse ? 'top' : 'bottom', offset + '%'), (0, _defineProperty3['default'])(_ref2, reverse ? 'bottom' : 'top', 'auto'), (0, _defineProperty3['default'])(_ref2, 'transform', 'translateY(+50%)'), _ref2) : (_ref3 = {}, (0, _defineProperty3['default'])(_ref3, reverse ? 'right' : 'left', offset + '%'), (0, _defineProperty3['default'])(_ref3, reverse ? 'left' : 'right', 'auto'), (0, _defineProperty3['default'])(_ref3, 'transform', 'translateX(' + (reverse ? '+' : '-') + '50%)'), _ref3);
+      var elStyle = (0, _extends3['default'])({}, style, positionStyle);
 
-      var postionStyle = vertical ? { bottom: offset + '%' } : { left: offset + '%' };
-      var elStyle = (0, _extends3['default'])({}, style, postionStyle);
-
       var _tabIndex = tabIndex || 0;
@@ -183,4 +185,5 @@ if (disabled || tabIndex === null) {
   value: _propTypes2['default'].number,
-  tabIndex: _propTypes2['default'].number
+  tabIndex: _propTypes2['default'].number,
+  reverse: _propTypes2['default'].bool
 };
 module.exports = exports['default'];

lib/Range.js

@@ -209,4 +209,8 @@ 'use strict';
     value: function onKeyboard(e) {
-      var valueMutator = utils.getKeyboardValueMutator(e);
+      var _props = this.props,
+          reverse = _props.reverse,
+          vertical = _props.vertical;
 
+      var valueMutator = utils.getKeyboardValueMutator(e, vertical, reverse);
+
       if (valueMutator) {
@@ -288,7 +292,7 @@ utils.pauseEvent(e);
     value: function getPoints() {
-      var _props = this.props,
-          marks = _props.marks,
-          step = _props.step,
-          min = _props.min,
-          max = _props.max;
+      var _props2 = this.props,
+          marks = _props2.marks,
+          step = _props2.step,
+          min = _props2.min,
+          max = _props2.max;
 
@@ -456,13 +460,14 @@ var cache = this._getPointsCache;
           bounds = _state2.bounds;
-      var _props2 = this.props,
-          prefixCls = _props2.prefixCls,
-          vertical = _props2.vertical,
-          included = _props2.included,
-          disabled = _props2.disabled,
-          min = _props2.min,
-          max = _props2.max,
-          handleGenerator = _props2.handle,
-          trackStyle = _props2.trackStyle,
-          handleStyle = _props2.handleStyle,
-          tabIndex = _props2.tabIndex;
+      var _props3 = this.props,
+          prefixCls = _props3.prefixCls,
+          vertical = _props3.vertical,
+          included = _props3.included,
+          disabled = _props3.disabled,
+          min = _props3.min,
+          max = _props3.max,
+          reverse = _props3.reverse,
+          handleGenerator = _props3.handle,
+          trackStyle = _props3.trackStyle,
+          handleStyle = _props3.handleStyle,
+          tabIndex = _props3.tabIndex;
 
@@ -493,2 +498,3 @@
           max: max,
+          reverse: reverse,
           disabled: disabled,
@@ -510,2 +516,3 @@ style: handleStyle[i],
           vertical: vertical,
+          reverse: reverse,
           included: included,
@@ -535,2 +542,3 @@ offset: offsets[i - 1],
   disabled: _propTypes2['default'].bool,
+  reverse: _propTypes2['default'].bool,
   tabIndex: _propTypes2['default'].arrayOf(_propTypes2['default'].number),
@@ -537,0 +545,0 @@ min: _propTypes2['default'].number,

lib/Slider.js

@@ -148,4 +148,7 @@ 'use strict';
     value: function onKeyboard(e) {
-      var valueMutator = utils.getKeyboardValueMutator(e);
+      var _props = this.props,
+          reverse = _props.reverse,
+          vertical = _props.vertical;
 
+      var valueMutator = utils.getKeyboardValueMutator(e, vertical, reverse);
       if (valueMutator) {
@@ -197,14 +200,15 @@ utils.pauseEvent(e);
 
-      var _props = this.props,
-          prefixCls = _props.prefixCls,
-          vertical = _props.vertical,
-          included = _props.included,
-          disabled = _props.disabled,
-          minimumTrackStyle = _props.minimumTrackStyle,
-          trackStyle = _props.trackStyle,
-          handleStyle = _props.handleStyle,
-          tabIndex = _props.tabIndex,
-          min = _props.min,
-          max = _props.max,
-          handleGenerator = _props.handle;
+      var _props2 = this.props,
+          prefixCls = _props2.prefixCls,
+          vertical = _props2.vertical,
+          included = _props2.included,
+          disabled = _props2.disabled,
+          minimumTrackStyle = _props2.minimumTrackStyle,
+          trackStyle = _props2.trackStyle,
+          handleStyle = _props2.handleStyle,
+          tabIndex = _props2.tabIndex,
+          min = _props2.min,
+          max = _props2.max,
+          reverse = _props2.reverse,
+          handleGenerator = _props2.handle;
       var _state = this.state,
@@ -225,2 +229,3 @@ value = _state.value,
         max: max,
+        reverse: reverse,
         index: 0,
@@ -240,2 +245,3 @@ tabIndex: tabIndex,
         offset: 0,
+        reverse: reverse,
         length: offset,
@@ -257,2 +263,3 @@ style: (0, _extends3['default'])({}, minimumTrackStyle, _trackStyle)
   tabIndex: _propTypes2['default'].number,
+  reverse: _propTypes2['default'].bool,
   min: _propTypes2['default'].number,
@@ -259,0 +266,0 @@ max: _propTypes2['default'].number

lib/utils.js

@@ -146,15 +146,15 @@ 'use strict';
 
-function getKeyboardValueMutator(e) {
+function getKeyboardValueMutator(e, vertical, reverse) {
+  var increase = 'increase';
+  var decrease = 'decrease';
+  var method = increase;
   switch (e.keyCode) {
     case _KeyCode2['default'].UP:
+      method = vertical && reverse ? decrease : increase;break;
     case _KeyCode2['default'].RIGHT:
-      return function (value, props) {
-        return calculateNextValue('increase', value, props);
-      };
-
+      method = !vertical && reverse ? decrease : increase;break;
     case _KeyCode2['default'].DOWN:
+      method = vertical && reverse ? increase : decrease;break;
     case _KeyCode2['default'].LEFT:
-      return function (value, props) {
-        return calculateNextValue('decrease', value, props);
-      };
+      method = !vertical && reverse ? increase : decrease;break;
 
@@ -181,2 +181,5 @@ case _KeyCode2['default'].END:
   }
+  return function (value, props) {
+    return calculateNextValue(method, value, props);
+  };
 }

package.json

 {
   "name": "rc-slider",
-  "version": "8.6.13",
+  "version": "8.7.0",
   "description": "Slider UI component for React",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -107,2 +107,3 @@ # rc-slider
 | included | boolean | `true` | If the value is `true`, it means a continuous value interval, otherwise, it is a independent value. |
+| reverse | boolean | `false` | If the value is `true`, it means the component is rendered reverse. |
 | disabled | boolean | `false` | If `true`, handles can't be moved. |
@@ -109,0 +110,0 @@ | dots | boolean | `false` | When the `step` value is greater than 1, you can set the `dots` to  `true` if you want to render the slider with dots. |

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

1108651

increased by1.28%

Lines of code

13542

increased by0.87%

Number of lines in readme file

164

increased by0.61%

No dependency changes