feat: update slider to 8.6.4

Author: tangjinzhou

components/vc-slider/index.js

@@ -1,3 +1,3 @@
-// base rc-slider 8.6.3
+// base rc-slider 8.6.4
 import Slider from './src/'
 export default Slider

components/vc-slider/src/Range.jsx

@@ -18,6 +18,8 @@ const rangeProps = {
   disabled: PropTypes.bool,
   tabIndex: PropTypes.arrayOf(PropTypes.number),
   prefixCls: PropTypes.string,
+  min: PropTypes.number,
+  max: PropTypes.number,
 }
 const Range = {
   name: 'Range',
@@ -76,7 +78,7 @@ const Range = {
 
       this.setState({ bounds: nextBounds })
 
-      if (bounds.some(v => utils.isValueOutOfRange(v, minAmaxProps))) {
+      if (value.some(v => utils.isValueOutOfRange(v, minAmaxProps))) {
         const newValues = value.map((v) => {
           return utils.ensureValueInRange(v, minAmaxProps)
         })
@@ -118,7 +120,7 @@ const Range = {
       this.onChange({ bounds: nextBounds })
     },
     onEnd () {
-      this.setState({ sHandle: null }, this.blur)
+      this.setState({ sHandle: null })
       this.removeDocumentEvents()
       this.$emit('afterChange', this.bounds)
     },

components/vc-slider/src/Slider.jsx

@@ -15,14 +15,16 @@ const Slider = {
     disabled: PropTypes.bool,
     autoFocus: PropTypes.bool,
     tabIndex: PropTypes.number,
+    min: PropTypes.number,
+    max: PropTypes.number,
   },
   data () {
     const defaultValue = this.defaultValue !== undefined
       ? this.defaultValue : this.min
     const value = this.value !== undefined
       ? this.value : defaultValue
 
-    if (process.env.NODE_ENV !== 'production') {
+    if (utils.isDev()) {
       warning(
         !hasProp(this, 'minimumTrackStyle'),
         'minimumTrackStyle will be deprecate, please use trackStyle instead.'
@@ -134,6 +136,9 @@ const Slider = {
       return this.sValue
     },
     trimAlignValue (v, nextProps = {}) {
+      if (v === null) {
+        return null
+      }
       const mergedProps = { ...this.$props, ...nextProps }
       const val = utils.ensureValueInRange(v, mergedProps)
       return utils.ensureValuePrecision(val, mergedProps)

components/vc-slider/src/common/Steps.jsx

@@ -6,7 +6,7 @@ const calcPoints = (vertical, marks, dots, step, min, max) => {
     dots ? step > 0 : true,
     '`Slider[step]` should be a positive number in order to make Slider[dots] work.'
   )
-  const points = Object.keys(marks).map(parseFloat)
+  const points = Object.keys(marks).map(parseFloat).sort((a, b) => a - b)
   if (dots) {
     for (let i = min; i <= max; i += step) {
       if (points.indexOf(i) === -1) {
@@ -19,7 +19,7 @@ const calcPoints = (vertical, marks, dots, step, min, max) => {
 
 const Steps = {
   functional: true,
-  render (createElement, context) {
+  render (h, context) {
     const { prefixCls, vertical, marks, dots, step, included,
       lowerBound, upperBound, max, min, dotStyle, activeDotStyle } = context.props
     const range = max - min

components/vc-slider/src/common/createSlider.jsx

@@ -69,10 +69,11 @@ export default function createSlider (Component) {
       activeDotStyle: {},
     }),
     data () {
-      if (process.env.NODE_ENV !== 'production') {
+      if (utils.isDev()) {
         const { step, max, min } = this
+        const isPointDiffEven = isFinite(max - min) ? (max - min) % step === 0 : true; // eslint-disable-line
         warning(
-          step && Math.floor(step) === step ? (max - min) % step === 0 : true,
+          step && Math.floor(step) === step ? isPointDiffEven : true,
           'Slider[max] - Slider[min] (%s) should be a multiple of Slider[step] (%s)',
           max - min,
           step
@@ -108,6 +109,9 @@ export default function createSlider (Component) {
     methods: {
       defaultHandle ({ index, ref, className, style, ...restProps }) {
         delete restProps.dragging
+        if (restProps.value === null) {
+          return null
+        }
         const handleProps = {
           props: {
             ...restProps,
@@ -195,12 +199,13 @@ export default function createSlider (Component) {
       onClickMarkLabel (e, value) {
         e.stopPropagation()
         this.onChange({ value })
+        this.onEnd()
       },
       getSliderStart () {
         const slider = this.$refs.sliderRef
         const rect = slider.getBoundingClientRect()
 
-        return this.vertical ? rect.top : rect.left
+        return this.vertical ? rect.top : (rect.left + window.pageXOffset)
       },
       getSliderLength () {
         const slider = this.$refs.sliderRef

components/vc-slider/src/utils.js

@@ -1,8 +1,16 @@
 import keyCode from '../../_util/KeyCode'
 
+export function isDev () {
+  return (process.env.NODE_ENV !== 'production')
+}
+
 export function isEventFromHandle (e, handles) {
-  return Object.keys(handles)
-    .some(key => e.target === handles[key].$el)
+  try {
+    return Object.keys(handles)
+      .some(key => e.target === handles[key].$el)
+  } catch (error) {
+    return false
+  }
 }
 
 export function isValueOutOfRange (value, { min, max }) {
@@ -54,7 +62,7 @@ export function getHandleCenterPosition (vertical, handle) {
   const coords = handle.getBoundingClientRect()
   return vertical
     ? coords.top + (coords.height * 0.5)
-    : coords.left + (coords.width * 0.5)
+    : window.pageXOffset + coords.left + (coords.width * 0.5)
 }
 
 export function ensureValueInRange (val, { max, min }) {
@@ -69,7 +77,7 @@ export function ensureValueInRange (val, { max, min }) {
 
 export function ensureValuePrecision (val, props) {
   const { step } = props
-  const closestPoint = getClosestPoint(val, props)
+  const closestPoint = isFinite(getClosestPoint(val, props)) ? getClosestPoint(val, props) : 0; // eslint-disable-line
   return step === null ? closestPoint
     : parseFloat(closestPoint.toFixed(getPrecision(step)))
 }
@@ -79,15 +87,32 @@ export function pauseEvent (e) {
   e.preventDefault()
 }
 
+export function calculateNextValue (func, value, props) {
+  const operations = {
+    increase: (a, b) => a + b,
+    decrease: (a, b) => a - b,
+  }
+
+  const indexToGet = operations[func](Object.keys(props.marks).indexOf(JSON.stringify(value)), 1)
+  const keyToGet = Object.keys(props.marks)[indexToGet]
+
+  if (props.step) {
+    return operations[func](value, props.step)
+  } else if (!!Object.keys(props.marks).length && !!props.marks[keyToGet]) {
+    return props.marks[keyToGet]
+  }
+  return value
+}
+
 export function getKeyboardValueMutator (e) {
   switch (e.keyCode) {
     case keyCode.UP:
     case keyCode.RIGHT:
-      return (value, props) => value + props.step
+      return (value, props) => calculateNextValue('increase', value, props)
 
     case keyCode.DOWN:
     case keyCode.LEFT:
-      return (value, props) => value - props.step
+      return (value, props) => calculateNextValue('decrease', value, props)
 
     case keyCode.END: return (value, props) => props.max
     case keyCode.HOME: return (value, props) => props.min

components/vc-steps/Step.jsx

@@ -14,7 +14,7 @@ export default {
     itemWidth: PropTypes.string,
     status: PropTypes.string,
     iconPrefix: PropTypes.string,
-    icon: PropTypes.node,
+    icon: PropTypes.any,
     adjustMarginRight: PropTypes.string,
     stepNumber: PropTypes.string,
     description: PropTypes.any,