rc-slider - npm Package Compare versions

Comparing version 10.6.2 to 11.0.0

es/Handles/Handle.d.ts

@@ -8,2 +8,3 @@ import * as React from 'react';
     dragging: boolean;
+    draggingDelete: boolean;
 }
@@ -16,3 +17,5 @@ export interface HandleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onFocus' | 'onMouseEnter'> {
     dragging: boolean;
+    draggingDelete: boolean;
     onStartMove: OnStartMove;
+    onDelete: (index: number) => void;
     onOffsetChange: (value: number | 'min' | 'max', valueIndex: number) => void;
@@ -19,0 +22,0 @@ onFocus: (e: React.FocusEvent<HTMLDivElement>, index: number) => void;

es/Handles/Handle.js

@@ -5,3 +5,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "value", "valueIndex", "onStartMove", "style", "render", "dragging", "onOffsetChange", "onChangeComplete", "onFocus", "onMouseEnter"];
+var _excluded = ["prefixCls", "value", "valueIndex", "onStartMove", "onDelete", "style", "render", "dragging", "draggingDelete", "onOffsetChange", "onChangeComplete", "onFocus", "onMouseEnter"];
 import cls from 'classnames';
@@ -17,5 +17,7 @@ import KeyCode from "rc-util/es/KeyCode";
     onStartMove = props.onStartMove,
+    onDelete = props.onDelete,
     style = props.style,
     render = props.render,
     dragging = props.dragging,
+    draggingDelete = props.draggingDelete,
     onOffsetChange = props.onOffsetChange,
@@ -89,2 +91,6 @@ onChangeComplete = props.onChangeComplete,
           break;
+        case KeyCode.BACKSPACE:
+        case KeyCode.DELETE:
+          onDelete(valueIndex);
+          break;
       }
@@ -140,3 +146,3 @@ if (offset !== null) {
     ref: ref,
-    className: cls(handlePrefixCls, _defineProperty(_defineProperty({}, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), valueIndex !== null && range), "".concat(handlePrefixCls, "-dragging"), dragging), classNames.handle),
+    className: cls(handlePrefixCls, _defineProperty(_defineProperty(_defineProperty({}, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), valueIndex !== null && range), "".concat(handlePrefixCls, "-dragging"), dragging), "".concat(handlePrefixCls, "-dragging-delete"), draggingDelete), classNames.handle),
     style: _objectSpread(_objectSpread(_objectSpread({}, positionStyle), style), styles.handle)
@@ -151,3 +157,4 @@ }, divProps, restProps));
       value: value,
-      dragging: dragging
+      dragging: dragging,
+      draggingDelete: draggingDelete
     });
@@ -154,0 +161,0 @@ }

es/Handles/index.d.ts

@@ -12,2 +12,3 @@ import * as React from 'react';
     onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
+    onDelete: (index: number) => void;
     handleRender?: HandleProps['render'];
@@ -21,2 +22,3 @@ /**
     draggingIndex: number;
+    draggingDelete: boolean;
     onChangeComplete?: () => void;
@@ -23,0 +25,0 @@ }

es/Handles/index.js

@@ -5,3 +5,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "style", "onStartMove", "onOffsetChange", "values", "handleRender", "activeHandleRender", "draggingIndex", "onFocus"];
+var _excluded = ["prefixCls", "style", "onStartMove", "onOffsetChange", "values", "handleRender", "activeHandleRender", "draggingIndex", "draggingDelete", "onFocus"];
 import * as React from 'react';
@@ -19,2 +19,3 @@ import { getIndex } from "../util";
     draggingIndex = props.draggingIndex,
+    draggingDelete = props.draggingDelete,
     onFocus = props.onFocus,
@@ -56,2 +57,3 @@ restProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(React.Fragment, null, values.map(function (value, index) {
+    var dragging = draggingIndex === index;
     return /*#__PURE__*/React.createElement(Handle, _extends({
@@ -65,3 +67,4 @@ ref: function ref(node) {
       },
-      dragging: draggingIndex === index,
+      dragging: dragging,
+      draggingDelete: dragging && draggingDelete,
       style: getIndex(style, index),
@@ -78,2 +81,3 @@ key: index,
     dragging: draggingIndex !== -1,
+    draggingDelete: draggingDelete,
     render: activeHandleRender,
@@ -80,0 +84,0 @@ style: {

es/hooks/useDrag.d.ts

 import * as React from 'react';
 import type { Direction, OnStartMove } from '../interface';
 import type { OffsetValues } from './useOffset';
-declare function useDrag(containerRef: React.RefObject<HTMLDivElement>, direction: Direction, rawValues: number[], min: number, max: number, formatValue: (value: number) => number, triggerChange: (values: number[]) => void, finishChange: () => void, offsetValues: OffsetValues): [
+declare function useDrag(containerRef: React.RefObject<HTMLDivElement>, direction: Direction, rawValues: number[], min: number, max: number, formatValue: (value: number) => number, triggerChange: (values: number[]) => void, finishChange: () => void, offsetValues: OffsetValues, editable: boolean): [
     draggingIndex: number,
     draggingValue: number,
+    draggingDelete: boolean,
     returnValues: number[],
@@ -8,0 +9,0 @@ onStartMove: OnStartMove

es/hooks/useDrag.js

@@ -5,2 +5,4 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
+/** Drag to delete offset. It's a user experience number for dragging out */
+var REMOVE_DIST = 130;
 function getPosition(e) {
@@ -13,3 +15,3 @@ var obj = 'touches' in e ? e.touches[0] : e;
 }
-function useDrag(containerRef, direction, rawValues, min, max, formatValue, triggerChange, finishChange, offsetValues) {
+function useDrag(containerRef, direction, rawValues, min, max, formatValue, triggerChange, finishChange, offsetValues, editable) {
   var _React$useState = React.useState(null),
@@ -23,10 +25,14 @@ _React$useState2 = _slicedToArray(_React$useState, 2),
     setDraggingIndex = _React$useState4[1];
-  var _React$useState5 = React.useState(rawValues),
+  var _React$useState5 = React.useState(false),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    cacheValues = _React$useState6[0],
-    setCacheValues = _React$useState6[1];
+    draggingDelete = _React$useState6[0],
+    setDraggingDelete = _React$useState6[1];
   var _React$useState7 = React.useState(rawValues),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    originValues = _React$useState8[0],
-    setOriginValues = _React$useState8[1];
+    cacheValues = _React$useState8[0],
+    setCacheValues = _React$useState8[1];
+  var _React$useState9 = React.useState(rawValues),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    originValues = _React$useState10[0],
+    setOriginValues = _React$useState10[1];
   var mouseMoveEventRef = React.useRef(null);
@@ -49,7 +55,7 @@ var mouseUpEventRef = React.useRef(null);
   }, []);
-  var flushValues = function flushValues(nextValues, nextValue) {
+  var flushValues = function flushValues(nextValues, nextValue, deleteMark) {
     // Perf: Only update state when value changed
     if (cacheValues.some(function (val, i) {
       return val !== nextValues[i];
-    })) {
+    }) || deleteMark) {
       if (nextValue !== undefined) {
@@ -59,8 +65,12 @@ setDraggingValue(nextValue);
       setCacheValues(nextValues);
-      triggerChange(nextValues);
+      var changeValues = nextValues;
+      if (deleteMark) {
+        changeValues = nextValues.filter(function (_, i) {
+          return i !== draggingIndex;
+        });
+      }
+      triggerChange(changeValues);
     }
   };
-  var updateCacheValue = useEvent(function (valueIndex, offsetPercent) {
-    // Basic point offset
-
+  var updateCacheValue = useEvent(function (valueIndex, offsetPercent, deleteMark) {
     if (valueIndex === -1) {
@@ -93,3 +103,3 @@ // >>>> Dragging on the track
       var next = offsetValues(cloneValues, offsetDist, valueIndex, 'dist');
-      flushValues(next.values, next.value);
+      flushValues(next.values, next.value, deleteMark);
     }
@@ -106,2 +116,4 @@ });
     setOriginValues(initialValues);
+    setCacheValues(initialValues);
+    setDraggingDelete(false);
     var _getPosition = getPosition(e),
@@ -123,16 +135,25 @@ startX = _getPosition.pageX,
       var offSetPercent;
+      var removeDist;
       switch (direction) {
         case 'btt':
           offSetPercent = -offsetY / height;
+          removeDist = offsetX;
           break;
         case 'ttb':
           offSetPercent = offsetY / height;
+          removeDist = offsetX;
           break;
         case 'rtl':
           offSetPercent = -offsetX / width;
+          removeDist = offsetY;
           break;
         default:
           offSetPercent = offsetX / width;
+          removeDist = offsetY;
       }
-      updateCacheValue(valueIndex, offSetPercent);
+
+      // Check if need mark remove
+      var deleteMark = editable ? Math.abs(removeDist) > REMOVE_DIST : false;
+      setDraggingDelete(deleteMark);
+      updateCacheValue(valueIndex, offSetPercent, deleteMark);
     };
@@ -168,8 +189,17 @@
     });
-    return sourceValues.every(function (val, index) {
-      return val === targetValues[index];
-    }) ? cacheValues : rawValues;
-  }, [rawValues, cacheValues]);
-  return [draggingIndex, draggingValue, returnValues, onStartMove];
+    var counts = {};
+    targetValues.forEach(function (val) {
+      counts[val] = (counts[val] || 0) + 1;
+    });
+    sourceValues.forEach(function (val) {
+      counts[val] = (counts[val] || 0) - 1;
+    });
+    var maxDiffCount = editable ? 1 : 0;
+    var diffCount = Object.values(counts).reduce(function (prev, next) {
+      return prev + next;
+    }, 0);
+    return diffCount <= maxDiffCount ? cacheValues : rawValues;
+  }, [rawValues, cacheValues, editable]);
+  return [draggingIndex, draggingValue, draggingDelete, returnValues, onStartMove];
 }
 export default useDrag;

es/Slider.d.ts

@@ -18,2 +18,6 @@ import * as React from 'react';
  */
+export type RangeConfig = {
+    editable?: boolean;
+    draggableTrack?: boolean;
+};
 export interface SliderProps<ValueType = number | number[]> {
@@ -30,3 +34,3 @@ prefixCls?: string;
     onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
-    range?: boolean;
+    range?: boolean | RangeConfig;
     count?: number;
@@ -46,4 +50,2 @@ min?: number;
     pushable?: boolean | number;
-    /** range only */
-    draggableTrack?: boolean;
     reverse?: boolean;
@@ -65,2 +67,3 @@ vertical?: boolean;
     activeHandleRender?: HandlesProps['handleRender'];
+    track?: boolean;
     tabIndex?: number | number[];
@@ -67,0 +70,0 @@ ariaLabelForHandle?: string | string[];

es/Slider.js

 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
 import cls from 'classnames';
+import { useEvent } from 'rc-util';
 import useMergedState from "rc-util/es/hooks/useMergedState";
@@ -18,2 +19,3 @@ import isEqual from "rc-util/es/isEqual";
 import useOffset from "./hooks/useOffset";
+import useRange from "./hooks/useRange";
 
@@ -66,3 +68,2 @@ /**
     pushable = _props$pushable === void 0 ? false : _props$pushable,
-    draggableTrack = props.draggableTrack,
     reverse = props.reverse,
@@ -82,2 +83,3 @@ vertical = props.vertical,
     activeHandleRender = props.activeHandleRender,
+    track = props.track,
     _props$tabIndex = props.tabIndex,
@@ -98,2 +100,7 @@ tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
   // ============================ Range =============================
+  var _useRange = useRange(range),
+    _useRange2 = _slicedToArray(_useRange, 3),
+    rangeEnabled = _useRange2[0],
+    rangeEditable = _useRange2[1],
+    rangeDraggableTrack = _useRange2[2];
   var mergedMin = React.useMemo(function () {
@@ -162,3 +169,3 @@ return isFinite(min) ? min : 0;
     // Format as range
-    if (range) {
+    if (rangeEnabled) {
       returnValues = _toConsumableArray(valueList);
@@ -187,11 +194,9 @@
     return returnValues;
-  }, [mergedValue, range, mergedMin, count, formatValue]);
+  }, [mergedValue, rangeEnabled, mergedMin, count, formatValue]);
 
   // =========================== onChange ===========================
-  var rawValuesRef = React.useRef(rawValues);
-  rawValuesRef.current = rawValues;
   var getTriggerValue = function getTriggerValue(triggerValues) {
-    return range ? triggerValues : triggerValues[0];
+    return rangeEnabled ? triggerValues : triggerValues[0];
   };
-  var triggerChange = function triggerChange(nextValues) {
+  var triggerChange = useEvent(function (nextValues) {
     // Order first
@@ -203,3 +208,3 @@ var cloneNextValues = _toConsumableArray(nextValues).sort(function (a, b) {
     // Trigger event if needed
-    if (onChange && !isEqual(cloneNextValues, rawValuesRef.current, true)) {
+    if (onChange && !isEqual(cloneNextValues, rawValues, true)) {
       onChange(getTriggerValue(cloneNextValues));
@@ -210,18 +215,37 @@ }
     setValue(cloneNextValues);
-  };
-  var finishChange = function finishChange() {
-    var finishValue = getTriggerValue(rawValuesRef.current);
+  });
+  var finishChange = useEvent(function () {
+    var finishValue = getTriggerValue(rawValues);
     onAfterChange === null || onAfterChange === void 0 || onAfterChange(finishValue);
     warning(!onAfterChange, '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.');
     onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete(finishValue);
+  });
+  var onDelete = function onDelete(index) {
+    if (!disabled && rangeEditable) {
+      var cloneNextValues = _toConsumableArray(rawValues);
+      cloneNextValues.splice(index, 1);
+      onBeforeChange === null || onBeforeChange === void 0 || onBeforeChange(getTriggerValue(cloneNextValues));
+      triggerChange(cloneNextValues);
+      var nextFocusIndex = Math.max(0, index - 1);
+      handlesRef.current.focus(nextFocusIndex);
+    }
   };
-  var _useDrag = useDrag(containerRef, direction, rawValues, mergedMin, mergedMax, formatValue, triggerChange, finishChange, offsetValues),
-    _useDrag2 = _slicedToArray(_useDrag, 4),
+  var _useDrag = useDrag(containerRef, direction, rawValues, mergedMin, mergedMax, formatValue, triggerChange, finishChange, offsetValues, rangeEditable),
+    _useDrag2 = _slicedToArray(_useDrag, 5),
     draggingIndex = _useDrag2[0],
     draggingValue = _useDrag2[1],
-    cacheValues = _useDrag2[2],
-    onStartDrag = _useDrag2[3];
+    draggingDelete = _useDrag2[2],
+    cacheValues = _useDrag2[3],
+    onStartDrag = _useDrag2[4];
+
+  /**
+   * When `rangeEditable` will insert a new value in the values array.
+   * Else it will replace the value in the values array.
+   */
   var changeToCloseValue = function changeToCloseValue(newValue, e) {
     if (!disabled) {
+      // Create new values
+      var cloneNextValues = _toConsumableArray(rawValues);
       var valueIndex = 0;
+      var valueBeforeIndex = 0; // Record the index which value < newValue
       var valueDist = mergedMax - mergedMin;
@@ -234,10 +258,16 @@ rawValues.forEach(function (val, index) {
         }
+        if (val < newValue) {
+          valueBeforeIndex = index;
+        }
       });
+      var focusIndex = valueIndex;
+      if (rangeEditable && valueDist !== 0) {
+        cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue);
+        focusIndex = valueBeforeIndex + 1;
+      } else {
+        cloneNextValues[valueIndex] = newValue;
+      }
 
-      // Create new values
-      var cloneNextValues = _toConsumableArray(rawValues);
-      cloneNextValues[valueIndex] = newValue;
-
-      // Fill value to match default 2
-      if (range && !rawValues.length && count === undefined) {
+      // Fill value to match default 2 (only when `rawValues` is empty)
+      if (rangeEnabled && !rawValues.length && count === undefined) {
         cloneNextValues.push(newValue);
@@ -250,4 +280,4 @@ }
         (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || (_document$activeEleme2 = _document$activeEleme.blur) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.call(_document$activeEleme);
-        handlesRef.current.focus(valueIndex);
-        onStartDrag(e, valueIndex, cloneNextValues);
+        handlesRef.current.focus(focusIndex);
+        onStartDrag(e, focusIndex, cloneNextValues);
       }
@@ -312,3 +342,3 @@ }
   var mergedDraggableTrack = React.useMemo(function () {
-    if (draggableTrack && mergedStep === null) {
+    if (rangeDraggableTrack && mergedStep === null) {
       if (process.env.NODE_ENV !== 'production') {
@@ -319,8 +349,8 @@ warning(false, '`draggableTrack` is not supported when `step` is `null`.');
     }
-    return draggableTrack;
-  }, [draggableTrack, mergedStep]);
-  var onStartMove = function onStartMove(e, valueIndex) {
+    return rangeDraggableTrack;
+  }, [rangeDraggableTrack, mergedStep]);
+  var onStartMove = useEvent(function (e, valueIndex) {
     onStartDrag(e, valueIndex);
-    onBeforeChange === null || onBeforeChange === void 0 || onBeforeChange(getTriggerValue(rawValuesRef.current));
-  };
+    onBeforeChange === null || onBeforeChange === void 0 || onBeforeChange(getTriggerValue(rawValues));
+  });
 
@@ -346,7 +376,7 @@ // Auto focus for updated handle
   var _React$useMemo = React.useMemo(function () {
-      if (!range) {
+      if (!rangeEnabled) {
         return [mergedMin, sortedCacheValues[0]];
       }
       return [sortedCacheValues[0], sortedCacheValues[sortedCacheValues.length - 1]];
-    }, [sortedCacheValues, range, mergedMin]),
+    }, [sortedCacheValues, rangeEnabled, mergedMin]),
     _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
@@ -392,3 +422,3 @@ includedStart = _React$useMemo2[0],
       includedEnd: includedEnd,
-      range: range,
+      range: rangeEnabled,
       tabIndex: tabIndex,
@@ -401,3 +431,3 @@ ariaLabelForHandle: ariaLabelForHandle,
     };
-  }, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle, styles, classNames]);
+  }, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, rangeEnabled, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle, styles, classNames]);
 
@@ -415,3 +445,3 @@ // ============================ Render ============================
     style: _objectSpread(_objectSpread({}, railStyle), styles === null || styles === void 0 ? void 0 : styles.rail)
-  }), /*#__PURE__*/React.createElement(Tracks, {
+  }), track !== false && /*#__PURE__*/React.createElement(Tracks, {
     prefixCls: prefixCls,
@@ -434,2 +464,3 @@ style: trackStyle,
     draggingIndex: draggingIndex,
+    draggingDelete: draggingDelete,
     onStartMove: onStartMove,
@@ -441,3 +472,4 @@ onOffsetChange: onHandleOffsetChange,
     activeHandleRender: activeHandleRender,
-    onChangeComplete: finishChange
+    onChangeComplete: finishChange,
+    onDelete: rangeEditable ? onDelete : undefined
   }), /*#__PURE__*/React.createElement(Marks, {
@@ -444,0 +476,0 @@ prefixCls: prefixCls,

lib/Handles/Handle.d.ts

@@ -8,2 +8,3 @@ import * as React from 'react';
     dragging: boolean;
+    draggingDelete: boolean;
 }
@@ -16,3 +17,5 @@ export interface HandleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onFocus' | 'onMouseEnter'> {
     dragging: boolean;
+    draggingDelete: boolean;
     onStartMove: OnStartMove;
+    onDelete: (index: number) => void;
     onOffsetChange: (value: number | 'min' | 'max', valueIndex: number) => void;
@@ -19,0 +22,0 @@ onFocus: (e: React.FocusEvent<HTMLDivElement>, index: number) => void;

lib/Handles/Handle.js

@@ -18,3 +18,3 @@ "use strict";
 var _util = require("../util");
-var _excluded = ["prefixCls", "value", "valueIndex", "onStartMove", "style", "render", "dragging", "onOffsetChange", "onChangeComplete", "onFocus", "onMouseEnter"];
+var _excluded = ["prefixCls", "value", "valueIndex", "onStartMove", "onDelete", "style", "render", "dragging", "draggingDelete", "onOffsetChange", "onChangeComplete", "onFocus", "onMouseEnter"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -27,5 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     onStartMove = props.onStartMove,
+    onDelete = props.onDelete,
     style = props.style,
     render = props.render,
     dragging = props.dragging,
+    draggingDelete = props.draggingDelete,
     onOffsetChange = props.onOffsetChange,
@@ -99,2 +101,6 @@ onChangeComplete = props.onChangeComplete,
           break;
+        case _KeyCode.default.BACKSPACE:
+        case _KeyCode.default.DELETE:
+          onDelete(valueIndex);
+          break;
       }
@@ -150,3 +156,3 @@ if (offset !== null) {
     ref: ref,
-    className: (0, _classnames.default)(handlePrefixCls, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), valueIndex !== null && range), "".concat(handlePrefixCls, "-dragging"), dragging), classNames.handle),
+    className: (0, _classnames.default)(handlePrefixCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), valueIndex !== null && range), "".concat(handlePrefixCls, "-dragging"), dragging), "".concat(handlePrefixCls, "-dragging-delete"), draggingDelete), classNames.handle),
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, positionStyle), style), styles.handle)
@@ -161,3 +167,4 @@ }, divProps, restProps));
       value: value,
-      dragging: dragging
+      dragging: dragging,
+      draggingDelete: draggingDelete
     });
@@ -164,0 +171,0 @@ }

lib/Handles/index.d.ts

@@ -12,2 +12,3 @@ import * as React from 'react';
     onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
+    onDelete: (index: number) => void;
     handleRender?: HandleProps['render'];
@@ -21,2 +22,3 @@ /**
     draggingIndex: number;
+    draggingDelete: boolean;
     onChangeComplete?: () => void;
@@ -23,0 +25,0 @@ }

lib/Handles/index.js

@@ -16,3 +16,3 @@ "use strict";
 var _Handle = _interopRequireDefault(require("./Handle"));
-var _excluded = ["prefixCls", "style", "onStartMove", "onOffsetChange", "values", "handleRender", "activeHandleRender", "draggingIndex", "onFocus"];
+var _excluded = ["prefixCls", "style", "onStartMove", "onOffsetChange", "values", "handleRender", "activeHandleRender", "draggingIndex", "draggingDelete", "onFocus"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -29,2 +29,3 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     draggingIndex = props.draggingIndex,
+    draggingDelete = props.draggingDelete,
     onFocus = props.onFocus,
@@ -66,2 +67,3 @@ restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/React.createElement(React.Fragment, null, values.map(function (value, index) {
+    var dragging = draggingIndex === index;
     return /*#__PURE__*/React.createElement(_Handle.default, (0, _extends2.default)({
@@ -75,3 +77,4 @@ ref: function ref(node) {
       },
-      dragging: draggingIndex === index,
+      dragging: dragging,
+      draggingDelete: dragging && draggingDelete,
       style: (0, _util.getIndex)(style, index),
@@ -88,2 +91,3 @@ key: index,
     dragging: draggingIndex !== -1,
+    draggingDelete: draggingDelete,
     render: activeHandleRender,
@@ -90,0 +94,0 @@ style: {

lib/hooks/useDrag.d.ts

 import * as React from 'react';
 import type { Direction, OnStartMove } from '../interface';
 import type { OffsetValues } from './useOffset';
-declare function useDrag(containerRef: React.RefObject<HTMLDivElement>, direction: Direction, rawValues: number[], min: number, max: number, formatValue: (value: number) => number, triggerChange: (values: number[]) => void, finishChange: () => void, offsetValues: OffsetValues): [
+declare function useDrag(containerRef: React.RefObject<HTMLDivElement>, direction: Direction, rawValues: number[], min: number, max: number, formatValue: (value: number) => number, triggerChange: (values: number[]) => void, finishChange: () => void, offsetValues: OffsetValues, editable: boolean): [
     draggingIndex: number,
     draggingValue: number,
+    draggingDelete: boolean,
     returnValues: number[],
@@ -8,0 +9,0 @@ onStartMove: OnStartMove

lib/hooks/useDrag.js

@@ -15,2 +15,4 @@ "use strict";
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** Drag to delete offset. It's a user experience number for dragging out */
+var REMOVE_DIST = 130;
 function getPosition(e) {
@@ -23,3 +25,3 @@ var obj = 'touches' in e ? e.touches[0] : e;
 }
-function useDrag(containerRef, direction, rawValues, min, max, formatValue, triggerChange, finishChange, offsetValues) {
+function useDrag(containerRef, direction, rawValues, min, max, formatValue, triggerChange, finishChange, offsetValues, editable) {
   var _React$useState = React.useState(null),
@@ -33,10 +35,14 @@ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     setDraggingIndex = _React$useState4[1];
-  var _React$useState5 = React.useState(rawValues),
+  var _React$useState5 = React.useState(false),
     _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    cacheValues = _React$useState6[0],
-    setCacheValues = _React$useState6[1];
+    draggingDelete = _React$useState6[0],
+    setDraggingDelete = _React$useState6[1];
   var _React$useState7 = React.useState(rawValues),
     _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-    originValues = _React$useState8[0],
-    setOriginValues = _React$useState8[1];
+    cacheValues = _React$useState8[0],
+    setCacheValues = _React$useState8[1];
+  var _React$useState9 = React.useState(rawValues),
+    _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+    originValues = _React$useState10[0],
+    setOriginValues = _React$useState10[1];
   var mouseMoveEventRef = React.useRef(null);
@@ -59,7 +65,7 @@ var mouseUpEventRef = React.useRef(null);
   }, []);
-  var flushValues = function flushValues(nextValues, nextValue) {
+  var flushValues = function flushValues(nextValues, nextValue, deleteMark) {
     // Perf: Only update state when value changed
     if (cacheValues.some(function (val, i) {
       return val !== nextValues[i];
-    })) {
+    }) || deleteMark) {
       if (nextValue !== undefined) {
@@ -69,8 +75,12 @@ setDraggingValue(nextValue);
       setCacheValues(nextValues);
-      triggerChange(nextValues);
+      var changeValues = nextValues;
+      if (deleteMark) {
+        changeValues = nextValues.filter(function (_, i) {
+          return i !== draggingIndex;
+        });
+      }
+      triggerChange(changeValues);
     }
   };
-  var updateCacheValue = (0, _rcUtil.useEvent)(function (valueIndex, offsetPercent) {
-    // Basic point offset
-
+  var updateCacheValue = (0, _rcUtil.useEvent)(function (valueIndex, offsetPercent, deleteMark) {
     if (valueIndex === -1) {
@@ -103,3 +113,3 @@ // >>>> Dragging on the track
       var next = offsetValues(cloneValues, offsetDist, valueIndex, 'dist');
-      flushValues(next.values, next.value);
+      flushValues(next.values, next.value, deleteMark);
     }
@@ -116,2 +126,4 @@ });
     setOriginValues(initialValues);
+    setCacheValues(initialValues);
+    setDraggingDelete(false);
     var _getPosition = getPosition(e),
@@ -133,16 +145,25 @@ startX = _getPosition.pageX,
       var offSetPercent;
+      var removeDist;
       switch (direction) {
         case 'btt':
           offSetPercent = -offsetY / height;
+          removeDist = offsetX;
           break;
         case 'ttb':
           offSetPercent = offsetY / height;
+          removeDist = offsetX;
           break;
         case 'rtl':
           offSetPercent = -offsetX / width;
+          removeDist = offsetY;
           break;
         default:
           offSetPercent = offsetX / width;
+          removeDist = offsetY;
       }
-      updateCacheValue(valueIndex, offSetPercent);
+
+      // Check if need mark remove
+      var deleteMark = editable ? Math.abs(removeDist) > REMOVE_DIST : false;
+      setDraggingDelete(deleteMark);
+      updateCacheValue(valueIndex, offSetPercent, deleteMark);
     };
@@ -178,8 +199,17 @@
     });
-    return sourceValues.every(function (val, index) {
-      return val === targetValues[index];
-    }) ? cacheValues : rawValues;
-  }, [rawValues, cacheValues]);
-  return [draggingIndex, draggingValue, returnValues, onStartMove];
+    var counts = {};
+    targetValues.forEach(function (val) {
+      counts[val] = (counts[val] || 0) + 1;
+    });
+    sourceValues.forEach(function (val) {
+      counts[val] = (counts[val] || 0) - 1;
+    });
+    var maxDiffCount = editable ? 1 : 0;
+    var diffCount = Object.values(counts).reduce(function (prev, next) {
+      return prev + next;
+    }, 0);
+    return diffCount <= maxDiffCount ? cacheValues : rawValues;
+  }, [rawValues, cacheValues, editable]);
+  return [draggingIndex, draggingValue, draggingDelete, returnValues, onStartMove];
 }
 var _default = exports.default = useDrag;

lib/Slider.d.ts

@@ -18,2 +18,6 @@ import * as React from 'react';
  */
+export type RangeConfig = {
+    editable?: boolean;
+    draggableTrack?: boolean;
+};
 export interface SliderProps<ValueType = number | number[]> {
@@ -30,3 +34,3 @@ prefixCls?: string;
     onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
-    range?: boolean;
+    range?: boolean | RangeConfig;
     count?: number;
@@ -46,4 +50,2 @@ min?: number;
     pushable?: boolean | number;
-    /** range only */
-    draggableTrack?: boolean;
     reverse?: boolean;
@@ -65,2 +67,3 @@ vertical?: boolean;
     activeHandleRender?: HandlesProps['handleRender'];
+    track?: boolean;
     tabIndex?: number | number[];
@@ -67,0 +70,0 @@ ariaLabelForHandle?: string | string[];

lib/Slider.js

@@ -12,5 +12,6 @@ "use strict";
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _rcUtil = require("rc-util");
 var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
@@ -27,2 +28,3 @@ var _isEqual = _interopRequireDefault(require("rc-util/lib/isEqual"));
 var _useOffset3 = _interopRequireDefault(require("./hooks/useOffset"));
+var _useRange3 = _interopRequireDefault(require("./hooks/useRange"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -76,3 +78,2 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     pushable = _props$pushable === void 0 ? false : _props$pushable,
-    draggableTrack = props.draggableTrack,
     reverse = props.reverse,
@@ -92,2 +93,3 @@ vertical = props.vertical,
     activeHandleRender = props.activeHandleRender,
+    track = props.track,
     _props$tabIndex = props.tabIndex,
@@ -108,2 +110,7 @@ tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
   // ============================ Range =============================
+  var _useRange = (0, _useRange3.default)(range),
+    _useRange2 = (0, _slicedToArray2.default)(_useRange, 3),
+    rangeEnabled = _useRange2[0],
+    rangeEditable = _useRange2[1],
+    rangeDraggableTrack = _useRange2[2];
   var mergedMin = React.useMemo(function () {
@@ -172,3 +179,3 @@ return isFinite(min) ? min : 0;
     // Format as range
-    if (range) {
+    if (rangeEnabled) {
       returnValues = (0, _toConsumableArray2.default)(valueList);
@@ -197,11 +204,9 @@
     return returnValues;
-  }, [mergedValue, range, mergedMin, count, formatValue]);
+  }, [mergedValue, rangeEnabled, mergedMin, count, formatValue]);
 
   // =========================== onChange ===========================
-  var rawValuesRef = React.useRef(rawValues);
-  rawValuesRef.current = rawValues;
   var getTriggerValue = function getTriggerValue(triggerValues) {
-    return range ? triggerValues : triggerValues[0];
+    return rangeEnabled ? triggerValues : triggerValues[0];
   };
-  var triggerChange = function triggerChange(nextValues) {
+  var triggerChange = (0, _rcUtil.useEvent)(function (nextValues) {
     // Order first
@@ -213,3 +218,3 @@ var cloneNextValues = (0, _toConsumableArray2.default)(nextValues).sort(function (a, b) {
     // Trigger event if needed
-    if (onChange && !(0, _isEqual.default)(cloneNextValues, rawValuesRef.current, true)) {
+    if (onChange && !(0, _isEqual.default)(cloneNextValues, rawValues, true)) {
       onChange(getTriggerValue(cloneNextValues));
@@ -220,18 +225,37 @@ }
     setValue(cloneNextValues);
-  };
-  var finishChange = function finishChange() {
-    var finishValue = getTriggerValue(rawValuesRef.current);
+  });
+  var finishChange = (0, _rcUtil.useEvent)(function () {
+    var finishValue = getTriggerValue(rawValues);
     onAfterChange === null || onAfterChange === void 0 || onAfterChange(finishValue);
     (0, _warning.default)(!onAfterChange, '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.');
     onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete(finishValue);
+  });
+  var onDelete = function onDelete(index) {
+    if (!disabled && rangeEditable) {
+      var cloneNextValues = (0, _toConsumableArray2.default)(rawValues);
+      cloneNextValues.splice(index, 1);
+      onBeforeChange === null || onBeforeChange === void 0 || onBeforeChange(getTriggerValue(cloneNextValues));
+      triggerChange(cloneNextValues);
+      var nextFocusIndex = Math.max(0, index - 1);
+      handlesRef.current.focus(nextFocusIndex);
+    }
   };
-  var _useDrag = (0, _useDrag3.default)(containerRef, direction, rawValues, mergedMin, mergedMax, formatValue, triggerChange, finishChange, offsetValues),
-    _useDrag2 = (0, _slicedToArray2.default)(_useDrag, 4),
+  var _useDrag = (0, _useDrag3.default)(containerRef, direction, rawValues, mergedMin, mergedMax, formatValue, triggerChange, finishChange, offsetValues, rangeEditable),
+    _useDrag2 = (0, _slicedToArray2.default)(_useDrag, 5),
     draggingIndex = _useDrag2[0],
     draggingValue = _useDrag2[1],
-    cacheValues = _useDrag2[2],
-    onStartDrag = _useDrag2[3];
+    draggingDelete = _useDrag2[2],
+    cacheValues = _useDrag2[3],
+    onStartDrag = _useDrag2[4];
+
+  /**
+   * When `rangeEditable` will insert a new value in the values array.
+   * Else it will replace the value in the values array.
+   */
   var changeToCloseValue = function changeToCloseValue(newValue, e) {
     if (!disabled) {
+      // Create new values
+      var cloneNextValues = (0, _toConsumableArray2.default)(rawValues);
       var valueIndex = 0;
+      var valueBeforeIndex = 0; // Record the index which value < newValue
       var valueDist = mergedMax - mergedMin;
@@ -244,10 +268,16 @@ rawValues.forEach(function (val, index) {
         }
+        if (val < newValue) {
+          valueBeforeIndex = index;
+        }
       });
+      var focusIndex = valueIndex;
+      if (rangeEditable && valueDist !== 0) {
+        cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue);
+        focusIndex = valueBeforeIndex + 1;
+      } else {
+        cloneNextValues[valueIndex] = newValue;
+      }
 
-      // Create new values
-      var cloneNextValues = (0, _toConsumableArray2.default)(rawValues);
-      cloneNextValues[valueIndex] = newValue;
-
-      // Fill value to match default 2
-      if (range && !rawValues.length && count === undefined) {
+      // Fill value to match default 2 (only when `rawValues` is empty)
+      if (rangeEnabled && !rawValues.length && count === undefined) {
         cloneNextValues.push(newValue);
@@ -260,4 +290,4 @@ }
         (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || (_document$activeEleme2 = _document$activeEleme.blur) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.call(_document$activeEleme);
-        handlesRef.current.focus(valueIndex);
-        onStartDrag(e, valueIndex, cloneNextValues);
+        handlesRef.current.focus(focusIndex);
+        onStartDrag(e, focusIndex, cloneNextValues);
       }
@@ -322,3 +352,3 @@ }
   var mergedDraggableTrack = React.useMemo(function () {
-    if (draggableTrack && mergedStep === null) {
+    if (rangeDraggableTrack && mergedStep === null) {
       if (process.env.NODE_ENV !== 'production') {
@@ -329,8 +359,8 @@ (0, _warning.default)(false, '`draggableTrack` is not supported when `step` is `null`.');
     }
-    return draggableTrack;
-  }, [draggableTrack, mergedStep]);
-  var onStartMove = function onStartMove(e, valueIndex) {
+    return rangeDraggableTrack;
+  }, [rangeDraggableTrack, mergedStep]);
+  var onStartMove = (0, _rcUtil.useEvent)(function (e, valueIndex) {
     onStartDrag(e, valueIndex);
-    onBeforeChange === null || onBeforeChange === void 0 || onBeforeChange(getTriggerValue(rawValuesRef.current));
-  };
+    onBeforeChange === null || onBeforeChange === void 0 || onBeforeChange(getTriggerValue(rawValues));
+  });
 
@@ -356,7 +386,7 @@ // Auto focus for updated handle
   var _React$useMemo = React.useMemo(function () {
-      if (!range) {
+      if (!rangeEnabled) {
         return [mergedMin, sortedCacheValues[0]];
       }
       return [sortedCacheValues[0], sortedCacheValues[sortedCacheValues.length - 1]];
-    }, [sortedCacheValues, range, mergedMin]),
+    }, [sortedCacheValues, rangeEnabled, mergedMin]),
     _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 2),
@@ -402,3 +432,3 @@ includedStart = _React$useMemo2[0],
       includedEnd: includedEnd,
-      range: range,
+      range: rangeEnabled,
       tabIndex: tabIndex,
@@ -411,3 +441,3 @@ ariaLabelForHandle: ariaLabelForHandle,
     };
-  }, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle, styles, classNames]);
+  }, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, rangeEnabled, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle, styles, classNames]);
 
@@ -425,3 +455,3 @@ // ============================ Render ============================
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, railStyle), styles === null || styles === void 0 ? void 0 : styles.rail)
-  }), /*#__PURE__*/React.createElement(_Tracks.default, {
+  }), track !== false && /*#__PURE__*/React.createElement(_Tracks.default, {
     prefixCls: prefixCls,
@@ -444,2 +474,3 @@ style: trackStyle,
     draggingIndex: draggingIndex,
+    draggingDelete: draggingDelete,
     onStartMove: onStartMove,
@@ -451,3 +482,4 @@ onOffsetChange: onHandleOffsetChange,
     activeHandleRender: activeHandleRender,
-    onChangeComplete: finishChange
+    onChangeComplete: finishChange,
+    onDelete: rangeEditable ? onDelete : undefined
   }), /*#__PURE__*/React.createElement(_Marks.default, {
@@ -454,0 +486,0 @@ prefixCls: prefixCls,

package.json

 {
   "name": "rc-slider",
-  "version": "10.6.2",
+  "version": "11.0.0",
   "description": "Slider UI component for React",
@@ -54,2 +54,3 @@ "keywords": [
     "@types/jest": "^29.5.1",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.2.42",
@@ -56,0 +57,0 @@ "@types/react-dom": "^18.0.11",

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

164687

increased by5.46%

Number of package files

68

increased by6.25%

Lines of code

3681

increased by5.96%

Worsened metrics

Dev dependency count

27

increased by3.85%

Number of low supply chain risk alerts

10

increased by25%

No dependency changes