feat: range editable support minCount & maxCount (#1011)

* feat: support min & max count

* test: update test case

Author: zombieJ

assets/index.less

@@ -68,6 +68,7 @@
     cursor: -webkit-grab;
     cursor: grab;
     opacity: 0.8;
+    user-select: none;
     touch-action: pan-x;
 
     &-dragging&-dragging&-dragging {

docs/examples/editable.tsx

@@ -18,6 +18,8 @@ export default () => {
           // range
           range={{
             editable: true,
+            minCount: 1,
+            maxCount: 4,
           }}
           // track={false}
           min={0}

src/Slider.tsx

@@ -40,6 +40,10 @@ import type {
 export type RangeConfig = {
   editable?: boolean;
   draggableTrack?: boolean;
+  /** Set min count when `editable` */
+  minCount?: number;
+  /** Set max count when `editable` */
+  maxCount?: number;
 };
 
 export interface SliderProps<ValueType = number | number[]> {
@@ -59,6 +63,7 @@ export interface SliderProps<ValueType = number | number[]> {
 
   // Value
   range?: boolean | RangeConfig;
+  /** @deprecated Use `range.minCount` or `range.maxCount` to handle this */
   count?: number;
   min?: number;
   max?: number;
@@ -185,7 +190,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   }, [reverse, vertical]);
 
   // ============================ Range =============================
-  const [rangeEnabled, rangeEditable, rangeDraggableTrack] = useRange(range);
+  const [rangeEnabled, rangeEditable, rangeDraggableTrack, minCount, maxCount] = useRange(range);
 
   const mergedMin = React.useMemo(() => (isFinite(min) ? min : 0), [min]);
   const mergedMax = React.useMemo(() => (isFinite(max) ? max : 100), [max]);
@@ -312,17 +317,19 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   });
 
   const onDelete = (index: number) => {
-    if (!disabled && rangeEditable) {
-      const cloneNextValues = [...rawValues];
-      cloneNextValues.splice(index, 1);
+    if (disabled || !rangeEditable || rawValues.length <= minCount) {
+      return;
+    }
 
-      onBeforeChange?.(getTriggerValue(cloneNextValues));
-      triggerChange(cloneNextValues);
+    const cloneNextValues = [...rawValues];
+    cloneNextValues.splice(index, 1);
 
-      const nextFocusIndex = Math.max(0, index - 1);
-      handlesRef.current.hideHelp();
-      handlesRef.current.focus(nextFocusIndex);
-    }
+    onBeforeChange?.(getTriggerValue(cloneNextValues));
+    triggerChange(cloneNextValues);
+
+    const nextFocusIndex = Math.max(0, index - 1);
+    handlesRef.current.hideHelp();
+    handlesRef.current.focus(nextFocusIndex);
   };
 
   const [draggingIndex, draggingValue, draggingDelete, cacheValues, onStartDrag] = useDrag(
@@ -336,6 +343,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     finishChange,
     offsetValues,
     rangeEditable,
+    minCount,
   );
 
   /**
@@ -365,7 +373,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
       let focusIndex = valueIndex;
 
-      if (rangeEditable && valueDist !== 0) {
+      if (rangeEditable && valueDist !== 0 && (!maxCount || rawValues.length < maxCount)) {
         cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue);
         focusIndex = valueBeforeIndex + 1;
       } else {

src/hooks/useDrag.ts

@@ -23,6 +23,7 @@ function useDrag(
   finishChange: (draggingDelete: boolean) => void,
   offsetValues: OffsetValues,
   editable: boolean,
+  minCount: number,
 ): [
   draggingIndex: number,
   draggingValue: number,
@@ -159,7 +160,9 @@ function useDrag(
       }
 
       // Check if need mark remove
-      deleteMark = editable ? Math.abs(removeDist) > REMOVE_DIST : false;
+      deleteMark = editable
+        ? Math.abs(removeDist) > REMOVE_DIST && minCount < cacheValues.length
+        : false;
       setDraggingDelete(deleteMark);
 
       updateCacheValue(valueIndex, offSetPercent, deleteMark);

src/hooks/useRange.ts

@@ -4,18 +4,24 @@ import type { SliderProps } from '../Slider';
 
 export default function useRange(
   range?: SliderProps['range'],
-): [range: boolean, rangeEditable: boolean, rangeDraggableTrack: boolean] {
+): [
+  range: boolean,
+  rangeEditable: boolean,
+  rangeDraggableTrack: boolean,
+  minCount: number,
+  maxCount?: number,
+] {
   return useMemo(() => {
     if (range === true || !range) {
-      return [!!range, false, false];
+      return [!!range, false, false, 0];
     }
 
-    const { editable, draggableTrack } = range;
+    const { editable, draggableTrack, minCount, maxCount } = range;
 
     if (process.env.NODE_ENV !== 'production') {
       warning(!editable || !draggableTrack, '`editable` can not work with `draggableTrack`.');
     }
 
-    return [true, editable, !editable && draggableTrack];
+    return [true, editable, !editable && draggableTrack, minCount || 0, maxCount];
   }, [range]);
 }

tests/Range.test.tsx

@@ -751,5 +751,49 @@ describe('Range', () => {
       // 2 handle
       expect(container.querySelectorAll('.rc-slider-handle')).toHaveLength(0);
     });
+
+    it('not remove when minCount', () => {
+      const onChange = jest.fn();
+
+      const { container } = render(
+        <Slider
+          onChange={onChange}
+          min={0}
+          max={100}
+          defaultValue={[0]}
+          range={{ editable: true, minCount: 1 }}
+          activeHandleRender={(ori) => ori}
+        />,
+      );
+
+      const handle = container.querySelector('.rc-slider-handle');
+
+      // Key
+      fireEvent.mouseEnter(handle);
+      fireEvent.keyDown(handle, {
+        keyCode: keyCode.DELETE,
+      });
+      expect(onChange).not.toHaveBeenCalled();
+
+      // Mouse
+      doMouseMove(container, 0, 1000);
+      expect(onChange).toHaveBeenCalledWith([100]);
+    });
+
+    it('maxCount not add', () => {
+      const onChange = jest.fn();
+      const { container } = render(
+        <Slider
+          onChange={onChange}
+          min={0}
+          max={100}
+          value={[0, 100]}
+          range={{ editable: true, maxCount: 2 }}
+        />,
+      );
+
+      doMouseDown(container, 50, 'rc-slider', true);
+      expect(onChange).toHaveBeenCalledWith([0, 50]);
+    });
   });
 });