feat: update vc-slider to 8.6.3

components/vc-slider/index.js

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

components/vc-slider/src/Handle.jsx

@@ -1,6 +1,8 @@
+import classNames from 'classnames'
 import PropTypes from '../../_util/vue-types'
 import BaseMixin from '../../_util/BaseMixin'
 import { getOptionProps } from '../../_util/props-util'
+import addEventListener from '../../_util/Dom/addEventListener'
 
 export default {
   name: 'Handle',
@@ -18,7 +20,42 @@ export default {
     // handleFocus: PropTypes.func.def(noop),
     // handleBlur: PropTypes.func.def(noop),
   },
+  data () {
+    return {
+      clickFocused: false,
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      // mouseup won't trigger if mouse moved out of handle
+      // so we listen on document here.
+      this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp)
+    })
+  },
+  beforeDestroy () {
+    if (this.onMouseUpListener) {
+      this.onMouseUpListener.remove()
+    }
+  },
   methods: {
+    setClickFocus (focused) {
+      this.setState({ clickFocused: focused })
+    },
+    handleMouseUp () {
+      if (document.activeElement === this.$refs.handle) {
+        this.setClickFocus(true)
+      }
+    },
+    handleBlur () {
+      this.setClickFocus(false)
+    },
+    handleKeyDown () {
+      this.setClickFocus(false)
+    },
+    clickFocus () {
+      this.setClickFocus(true)
+      this.focus()
+    },
     focus () {
       this.$refs.handle.focus()
     },
@@ -28,23 +65,27 @@ export default {
   },
   render () {
     const {
-      className, vertical, offset, disabled, min, max, value, tabIndex,
+      prefixCls, vertical, offset, disabled, min, max, value, tabIndex,
     } = getOptionProps(this)
 
+    const className = classNames(
+      this.$props.className,
+      {
+        [`${prefixCls}-handle-click-focused`]: this.clickFocused,
+      }
+    )
+
     const postionStyle = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` }
     const elStyle = {
       ...postionStyle,
     }
-    let ariaProps = {}
+    const ariaProps = {
-    if (value !== undefined) {
+      'aria-valuemin': min,
-      ariaProps = {
+      'aria-valuemax': max,
-        ...ariaProps,
+      'aria-valuenow': value,
-        'aria-valuemin': min,
+      'aria-disabled': !!disabled,
-        'aria-valuemax': max,
-        'aria-valuenow': value,
-        'aria-disabled': !!disabled,
-      }
     }
+
     const handleProps = {
       attrs: {
         role: 'slider',

components/vc-slider/src/Range.jsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames'
-import warning from 'warning'
 import PropTypes from '../../_util/vue-types'
 import BaseMixin from '../../_util/BaseMixin'
 import { initDefaultProps, hasProp } from '../../_util/props-util'
@@ -32,7 +31,7 @@ const Range = {
   }),
   data () {
     const { count, min, max } = this
-    const initialValue = Array.apply(null, Array(count + 1))
+    const initialValue = Array(...Array(count + 1))
       .map(() => min)
     const defaultValue = hasProp(this, 'defaultValue') ? this.defaultValue : initialValue
     let { value } = this
@@ -78,7 +77,10 @@ const Range = {
       this.setState({ bounds: nextBounds })
 
       if (bounds.some(v => utils.isValueOutOfRange(v, minAmaxProps))) {
-        this.$emit('change', nextBounds)
+        const newValues = value.map((v) => {
+          return utils.ensureValueInRange(v, minAmaxProps)
+        })
+        this.$emit('change', newValues)
       }
     },
     onChange (state) {
@@ -102,48 +104,46 @@ const Range = {
       this.startPosition = position
 
       const closestBound = this.getClosestBound(value)
-      const boundNeedMoving = this.getBoundNeedMoving(value, closestBound)
+      this.prevMovedHandleIndex = this.getBoundNeedMoving(value, closestBound)
 
       this.setState({
-        sHandle: boundNeedMoving,
+        sHandle: this.prevMovedHandleIndex,
-        recent: boundNeedMoving,
+        recent: this.prevMovedHandleIndex,
       })
 
-      const prevValue = bounds[boundNeedMoving]
+      const prevValue = bounds[this.prevMovedHandleIndex]
       if (value === prevValue) return
       const nextBounds = [...bounds]
-      nextBounds[boundNeedMoving] = value
+      nextBounds[this.prevMovedHandleIndex] = value
       this.onChange({ bounds: nextBounds })
     },
     onEnd () {
-      this.setState({ sHandle: null })
+      this.setState({ sHandle: null }, this.onBlur)
       this.removeDocumentEvents()
       this.$emit('afterChange', this.bounds)
     },
     onMove (e, position) {
       utils.pauseEvent(e)
-      const props = this.$props
       const { bounds, sHandle } = this
       const value = this.calcValueByPos(position)
       const oldValue = bounds[sHandle]
       if (value === oldValue) return
 
-      const nextBounds = [...bounds]
+      this.moveTo(value)
-      nextBounds[sHandle] = value
-      let nextHandle = sHandle
-      if (props.pushable !== false) {
-        this.pushSurroundingHandles(nextBounds, nextHandle)
-      } else if (props.allowCross) {
-        nextBounds.sort((a, b) => a - b)
-        nextHandle = nextBounds.indexOf(value)
-      }
-      this.onChange({
-        sHandle: nextHandle,
-        bounds: nextBounds,
-      })
     },
-    onKeyboard () {
+    onKeyboard (e) {
-      warning(true, 'Keyboard support is not yet supported for ranges.')
+      const valueMutator = utils.getKeyboardValueMutator(e)
+
+      if (valueMutator) {
+        utils.pauseEvent(e)
+        const { bounds, sHandle } = this
+        const oldValue = bounds[sHandle]
+        const mutatedValue = valueMutator(oldValue, this.$props)
+        const value = this.trimAlignValue(mutatedValue)
+        if (value === oldValue) return
+        const isFromKeyboardEvent = true
+        this.moveTo(value, isFromKeyboardEvent)
+      }
     },
     getClosestBound (value) {
       const { bounds } = this
@@ -152,7 +152,7 @@ const Range = {
         if (value > bounds[i]) { closestBound = i }
       }
       if (Math.abs(bounds[closestBound + 1] - value) < Math.abs(bounds[closestBound] - value)) {
-        closestBound = closestBound + 1
+        closestBound += 1
       }
       return closestBound
     },
@@ -197,6 +197,33 @@ const Range = {
       }
       return this._getPointsCache.points
     },
+
+    moveTo (value, isFromKeyboardEvent) {
+      const nextBounds = [...this.bounds]
+      const { sHandle } = this
+      nextBounds[sHandle] = value
+      let nextHandle = sHandle
+      if (this.$props.pushable !== false) {
+        this.pushSurroundingHandles(nextBounds, nextHandle)
+      } else if (this.$props.allowCross) {
+        nextBounds.sort((a, b) => a - b)
+        nextHandle = nextBounds.indexOf(value)
+      }
+      this.onChange({
+        handle: nextHandle,
+        bounds: nextBounds,
+      })
+      if (isFromKeyboardEvent) {
+        // known problem: because setState is async,
+        // so trigger focus will invoke handler's onEnd and another handler's onStart too early,
+        // cause onBeforeChange and onAfterChange receive wrong value.
+        // here use setState callback to hack，but not elegant
+        this.setState({}, () => {
+          this.handlesRefs[nextHandle].focus()
+        })
+      }
+    },
+
     pushSurroundingHandles (bounds, handle) {
       const value = bounds[handle]
       let { pushable: threshold } = this
@@ -322,6 +349,7 @@ const Range = {
           [handleClassName]: true,
           [`${handleClassName}-${i + 1}`]: true,
         }),
+        prefixCls,
         vertical,
         offset: offsets[i],
         value: v,

components/vc-slider/src/Slider.jsx

@@ -98,6 +98,7 @@ const Slider = {
       this.startPosition = position
       if (value === sValue) return
 
+      this.prevMovedHandleIndex = 0
       this.onChange({ sValue: value })
     },
     onEnd () {
@@ -170,6 +171,7 @@ const Slider = {
       const offset = this.calcOffset(sValue)
       const handle = handleGenerator(this.$createElement, {
         className: `${prefixCls}-handle`,
+        prefixCls,
         vertical,
         offset,
         value: sValue,

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

@@ -11,10 +11,10 @@ const Marks = {
       included,
       upperBound,
       lowerBound,
-      max, min,
+      max,
+      min,
     } = context.props
-    // antd未开发完成
+    const { clickLabel } = context.listeners
-    // const { clickLabel } = context.listeners
     const marksKeys = Object.keys(marks)
     const marksCount = marksKeys.length
     const unit = marksCount > 1 ? 100 / (marksCount - 1) : 100
@@ -56,6 +56,8 @@ const Marks = {
           class={markClassName}
           style={markStyle}
           key={point}
+          onMousedown={(e) => clickLabel(e, point)}
+          onTouchstart={(e) => clickLabel(e, point)}
         >
           {markLabel}
         </span>

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

@@ -8,9 +8,10 @@ const calcPoints = (vertical, marks, dots, step, min, max) => {
   )
   const points = Object.keys(marks).map(parseFloat)
   if (dots) {
-    for (let i = min; i <= max; i = i + step) {
+    for (let i = min; i <= max; i += step) {
-      if (points.indexOf(i) >= 0) continue
+      if (points.indexOf(i) === -1) {
-      points.push(i)
+        points.push(i)
+      }
     }
   }
   return points

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

@@ -80,12 +80,6 @@ export default function createSlider (Component) {
       }
       return {}
     },
-    beforeDestroy () {
-      this.$nextTick(() => {
-        // if (super.componentWillUnmount) super.componentWillUnmount()
-        this.removeDocumentEvents()
-      })
-    },
     mounted () {
       this.$nextTick(() => {
         // Snapshot testing cannot handle refs, so be sure to null-check this.
@@ -93,6 +87,12 @@ export default function createSlider (Component) {
         // this.setHandleRefs()
       })
     },
+    beforeDestroy () {
+      this.$nextTick(() => {
+        // if (super.componentWillUnmount) super.componentWillUnmount()
+        this.removeDocumentEvents()
+      })
+    },
     computed: {
       handlesRefs () {
         const handlesRefs = []
@@ -152,23 +152,10 @@ export default function createSlider (Component) {
         this.onEnd(e)
         this.$emit('blur', e)
       },
-      addDocumentTouchEvents () {
+      onMouseUp () {
-        // just work for Chrome iOS Safari and Android Browser
+        if (this.handlesRefs[this.prevMovedHandleIndex]) {
-        this.onTouchMoveListener = addEventListener(this.document, 'touchmove', this.onTouchMove)
+          this.handlesRefs[this.prevMovedHandleIndex].clickFocus()
-        this.onTouchUpListener = addEventListener(this.document, 'touchend', this.onEnd)
+        }
-      },
-      addDocumentMouseEvents () {
-        this.onMouseMoveListener = addEventListener(this.document, 'mousemove', this.onMouseMove)
-        this.onMouseUpListener = addEventListener(this.document, 'mouseup', this.onEnd)
-      },
-      removeDocumentEvents () {
-        /* eslint-disable no-unused-expressions */
-        this.onTouchMoveListener && this.onTouchMoveListener.remove()
-        this.onTouchUpListener && this.onTouchUpListener.remove()
-
-        this.onMouseMoveListener && this.onMouseMoveListener.remove()
-        this.onMouseUpListener && this.onMouseUpListener.remove()
-        /* eslint-enable no-unused-expressions */
       },
       onMouseMove (e) {
         if (!this.$refs.sliderRef) {
@@ -192,15 +179,9 @@ export default function createSlider (Component) {
           this.onKeyboard(e)
         }
       },
-      focus () {
+      onClickMarkLabel (e, value) {
-        if (!this.disabled) {
+        e.stopPropagation()
-          this.handlesRefs[0].focus()
+        this.onChange({ value })
-        }
-      },
-      blur () {
-        if (!this.disabled) {
-          this.handlesRefs[0].blur()
-        }
       },
       getSliderStart () {
         const slider = this.$refs.sliderRef
@@ -217,6 +198,38 @@ export default function createSlider (Component) {
         const coords = slider.getBoundingClientRect()
         return this.vertical ? coords.height : coords.width
       },
+      addDocumentTouchEvents () {
+        // just work for Chrome iOS Safari and Android Browser
+        this.onTouchMoveListener = addEventListener(this.document, 'touchmove', this.onTouchMove)
+        this.onTouchUpListener = addEventListener(this.document, 'touchend', this.onEnd)
+      },
+      addDocumentMouseEvents () {
+        this.onMouseMoveListener = addEventListener(this.document, 'mousemove', this.onMouseMove)
+        this.onMouseUpListener = addEventListener(this.document, 'mouseup', this.onEnd)
+      },
+      removeDocumentEvents () {
+        /* eslint-disable no-unused-expressions */
+        this.onTouchMoveListener && this.onTouchMoveListener.remove()
+        this.onTouchUpListener && this.onTouchUpListener.remove()
+
+        this.onMouseMoveListener && this.onMouseMoveListener.remove()
+        this.onMouseUpListener && this.onMouseUpListener.remove()
+        /* eslint-enable no-unused-expressions */
+      },
+      focus () {
+        if (!this.disabled) {
+          this.handlesRefs[0].focus()
+        }
+      },
+      blur () {
+        if (!this.disabled) {
+          Object.keys(this.handlesRefs).forEach((key) => {
+            if (this.handlesRefs[key] && this.handlesRefs[key].blur) {
+              this.handlesRefs[key].blur()
+            }
+          })
+        }
+      },
       calcValue (offset) {
         const { vertical, min, max } = this
         const ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength())
@@ -268,6 +281,9 @@ export default function createSlider (Component) {
           min,
           className: `${prefixCls}-mark`,
         },
+        listeners: {
+          clickLabel: disabled ? noop : this.onClickMarkLabel,
+        },
       }
       return (
         <div
@@ -275,6 +291,7 @@ export default function createSlider (Component) {
           class={sliderClassName}
           onTouchstart={disabled ? noop : this.onTouchStart}
           onMousedown={disabled ? noop : this.onMouseDown}
+          onMouseup={disabled ? noop : this.onMouseUp}
           onKeydown={disabled ? noop : this.onKeyDown}
           onFocus={disabled ? noop : this.onFocus}
           onBlur={disabled ? noop : this.onBlur}

components/vc-slider/src/createSliderWithTooltip.jsx

@@ -10,7 +10,7 @@ export default function createSliderWithTooltip (Component) {
     props: {
       ...Component.props,
       tipFormatter: PropTypes.func.def((value) => { return value }),
-      handleStyle: PropTypes.arrayOf(PropTypes.object),
+      handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
       tipProps: PropTypes.object.def({}),
     },
     data () {
@@ -40,8 +40,16 @@ export default function createSliderWithTooltip (Component) {
           prefixCls = 'rc-slider-tooltip',
           overlay = tipFormatter(value),
           placement = 'top',
-          visible = visible || false,
+          visible = false,
-          ...restTooltipProps } = tipProps
+          ...restTooltipProps
+        } = tipProps
+
+        let handleStyleWithIndex
+        if (Array.isArray(handleStyle)) {
+          handleStyleWithIndex = handleStyle[index] || handleStyle[0]
+        } else {
+          handleStyleWithIndex = handleStyle
+        }
 
         const tooltipProps = {
           props: {
@@ -63,7 +71,7 @@ export default function createSliderWithTooltip (Component) {
             mouseleave: () => this.handleTooltipVisibleChange(index, false),
           },
           style: {
-            ...handleStyle[0],
+            ...handleStyleWithIndex,
           },
         }