feat: update vc-slider to 8.6.6

components/vc-slider/demo/slider.jsx

@@ -3,7 +3,8 @@ import Tooltip from '../../vc-tooltip';
 import '../assets/index.less';
 import '../../vc-tooltip/assets/bootstrap.less';
 
-const { Handle } = Slider;
+
+const { createSliderWithTooltip } = Slider;
 
 function log(value) {
   console.log(value); //eslint-disable-line
@@ -73,72 +74,7 @@ const DynamicBounds = {
   },
 };
 
-const SliderWithTooltip = {
+const SliderWithTooltip = createSliderWithTooltip(Slider);
-  data() {
-    return {
-      visibles: [],
-    };
-  },
-  methods: {
-    handleTooltipVisibleChange(index, visible) {
-      this.visibles[index] = visible;
-      this.visibles = { ...this.visibles };
-    },
-    handleRange(h, { value, dragging, index, disabled, style, ...restProps }) {
-      const tipFormatter = value => `${value}%`;
-      const tipProps = { overlayClassName: 'foo' };
-
-      const {
-        prefixCls = 'rc-slider-tooltip',
-        overlay = tipFormatter(value),
-        placement = 'top',
-        visible = visible || false,
-        ...restTooltipProps
-      } = tipProps;
-
-      let handleStyleWithIndex;
-      if (Array.isArray(style)) {
-        handleStyleWithIndex = style[index] || style[0];
-      } else {
-        handleStyleWithIndex = style;
-      }
-
-      const tooltipProps = {
-        props: {
-          prefixCls,
-          overlay,
-          placement,
-          visible: (!disabled && (this.visibles[index] || dragging)) || visible,
-          ...restTooltipProps,
-        },
-        key: index,
-      };
-      const handleProps = {
-        props: {
-          value,
-          ...restProps,
-        },
-        on: {
-          mouseenter: () => this.handleTooltipVisibleChange(index, true),
-          mouseleave: () => this.handleTooltipVisibleChange(index, false),
-          visibleChange: log,
-        },
-        style: {
-          ...handleStyleWithIndex,
-        },
-      };
-
-      return (
-        <Tooltip {...tooltipProps}>
-          <Handle {...handleProps} />
-        </Tooltip>
-      );
-    },
-  },
-  render() {
-    return <Slider handle={this.handleRange} />;
-  },
-};
 
 export default {
   render() {
@@ -176,7 +112,11 @@ export default {
         </div>
         <div style={style}>
           <p style={pStyle}>Slider with tooltip, with custom `tipFormatter`</p>
-          <SliderWithTooltip />
+          <SliderWithTooltip
+            tipFormatter={v => `${v} %`}
+            tipProps={{ overlayClassName: 'foo' }}
+            onChange={log}
+          />
         </div>
         <div style={style}>
           <p style={pStyle}>

components/vc-slider/src/Range.jsx

@@ -116,10 +116,13 @@ const Range = {
       nextBounds[this.prevMovedHandleIndex] = value;
       this.onChange({ bounds: nextBounds });
     },
-    onEnd() {
+    onEnd(force) {
-      this.setState({ sHandle: null });
+      const {sHandle} = this;
       this.removeDocumentEvents();
+      if(sHandle || force) {
         this.$emit('afterChange', this.bounds);
+      }
+      this.setState({ sHandle: null });
     },
     onMove(e, position) {
       utils.pauseEvent(e);
@@ -136,7 +139,7 @@ const Range = {
       if (valueMutator) {
         utils.pauseEvent(e);
         const { bounds, sHandle } = this;
-        const oldValue = bounds[sHandle];
+        const oldValue = bounds[sHandle === null ? this.recent : sHandle];
         const mutatedValue = valueMutator(oldValue, this.$props);
         const value = this.trimAlignValue(mutatedValue);
         if (value === oldValue) return;
@@ -201,9 +204,10 @@ const Range = {
 
     moveTo(value, isFromKeyboardEvent) {
       const nextBounds = [...this.bounds];
-      const { sHandle } = this;
+      const { sHandle, recent } = this;
-      nextBounds[sHandle] = value;
+      const handle = sHandle === null ? recent : sHandle;
-      let nextHandle = sHandle;
+      nextBounds[handle] = value;
+      let nextHandle = handle;
       if (this.$props.pushable !== false) {
         this.pushSurroundingHandles(nextBounds, nextHandle);
       } else if (this.$props.allowCross) {

components/vc-slider/src/Slider.jsx

@@ -100,10 +100,13 @@ const Slider = {
       this.prevMovedHandleIndex = 0;
       this.onChange({ sValue: value });
     },
-    onEnd() {
+    onEnd(force) {
-      this.setState({ dragging: false });
+      const { dragging } = this;
       this.removeDocumentEvents();
+      if(dragging || force) {
         this.$emit('afterChange', this.sValue);
+      }
+      this.setState({ dragging: false });
     },
     onMove(e, position) {
       utils.pauseEvent(e);

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

@@ -16,9 +16,6 @@ const Marks = {
     } = context.props;
     const { clickLabel } = context.listeners;
     const marksKeys = Object.keys(marks);
-    const marksCount = marksKeys.length;
-    const unit = marksCount > 1 ? 100 / (marksCount - 1) : 100;
-    const markWidth = unit * 0.9;
 
     const range = max - min;
     const elements = marksKeys
@@ -46,9 +43,9 @@ const Marks = {
         };
 
         const leftStyle = {
-          width: `${markWidth}%`,
-          marginLeft: `${-markWidth / 2}%`,
           left: `${((point - min) / range) * 100}%`,
+          transform: `translateX(-50%)`,
+          msTransform: `translateX(-50%)`,
         };
 
         const style = vertical ? bottomStyle : leftStyle;

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

@@ -158,7 +158,7 @@ export default function createSlider(Component) {
         }
       },
       onBlur(e) {
-        this.onEnd(e);
+        this.onEnd();
         this.$emit('blur', e);
       },
       onMouseUp() {
@@ -191,7 +191,7 @@ export default function createSlider(Component) {
       onClickMarkLabel(e, value) {
         e.stopPropagation();
         this.onChange({ sValue: value });
-        this.onEnd();
+        this.onEnd(true);
       },
       getSliderStart() {
         const slider = this.$refs.sliderRef;