fix slider lint issues (#1070)

Author: zombieJ

docs/examples/components/TooltipSlider.tsx

@@ -16,7 +16,7 @@ interface HandleTooltipProps {
 const HandleTooltip: React.FC<HandleTooltipProps> = (props) => {
   const { value, children, visible, tipFormatter = (val) => `${val} %`, ...restProps } = props;
 
-  const tooltipRef = React.useRef<TooltipRef>();
+  const tooltipRef = React.useRef<TooltipRef>(null);
   const rafRef = React.useRef<number | null>(null);
 
   function cancelKeepAlign() {

docs/examples/slider.tsx

@@ -60,7 +60,7 @@ class NullableSlider extends React.Component<any, any> {
 }
 
 const NullableRangeSlider = () => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState<any>(null);
 
   return (
     <div>

src/Handles/Handle.tsx

@@ -87,7 +87,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
   // =========================== Keyboard ===========================
   const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
     if (!disabled && keyboard) {
-      let offset: number | 'min' | 'max' = null;
+      let offset: number | 'min' | 'max' | undefined;
 
       // Change the value
       switch (e.which || e.keyCode) {
@@ -131,7 +131,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
           break;
       }
 
-      if (offset !== null) {
+      if (offset !== undefined) {
         e.preventDefault();
         onOffsetChange(offset, valueIndex);
       }
@@ -161,7 +161,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
 
   if (valueIndex !== null) {
     divProps = {
-      tabIndex: disabled ? null : getIndex(tabIndex, valueIndex),
+      tabIndex: disabled ? undefined : getIndex(tabIndex, valueIndex) ?? undefined,
       role: 'slider',
       'aria-valuemin': min,
       'aria-valuemax': max,

src/Handles/index.tsx

@@ -120,12 +120,12 @@ const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
           key="a11y"
           {...handleProps}
           value={values[activeIndex]}
-          valueIndex={null}
+          valueIndex={null!}
           dragging={draggingIndex !== -1}
           draggingDelete={draggingDelete}
           render={activeHandleRender}
           style={{ pointerEvents: 'none' }}
-          tabIndex={null}
+          tabIndex={undefined}
           aria-hidden
         />
       )}

src/Marks/index.tsx

@@ -17,7 +17,7 @@ export interface MarksProps {
 }
 
 const Marks: React.FC<MarksProps> = (props) => {
-  const { prefixCls, marks, onClick } = props;
+  const { prefixCls, marks = [], onClick } = props;
 
   const markPrefixCls = `${prefixCls}-mark`;
 

src/Slider.tsx

@@ -185,8 +185,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     ariaValueTextFormatterForHandle,
   } = props;
 
-  const handlesRef = React.useRef<HandlesRef>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const handlesRef = React.useRef<HandlesRef | null>(null);
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
 
   const direction = React.useMemo<Direction>(() => {
     if (vertical) {
@@ -214,9 +214,11 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
   // ============================ Marks =============================
   const markList = React.useMemo<InternalMarkObj[]>(() => {
-    return Object.keys(marks || {})
+    const markRecord = marks || {};
+
+    return Object.keys(markRecord)
       .map<InternalMarkObj>((key) => {
-        const mark = marks[key];
+        const mark = markRecord[key];
         const markObj: InternalMarkObj = {
           value: Number(key),
         };
@@ -243,10 +245,10 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   const [formatValue, offsetValues] = useOffset(
     mergedMin,
     mergedMax,
-    mergedStep,
+    mergedStep as number,
     markList,
     allowCross,
-    mergedPush,
+    mergedPush as false | number,
   );
 
   // ============================ Values ============================
@@ -269,7 +271,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
       // When count provided or value is `undefined`, we fill values
       if (count || mergedValue === undefined) {
-        const pointCount = count >= 0 ? count + 1 : 2;
+        const pointCount = count !== undefined && count >= 0 ? count + 1 : 2;
         returnValues = returnValues.slice(0, pointCount);
 
         // Fill with count
@@ -308,7 +310,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   const finishChange = useEvent((draggingDelete?: boolean) => {
     // Trigger from `useDrag` will tell if it's a delete action
     if (draggingDelete) {
-      handlesRef.current.hideHelp();
+      handlesRef.current!.hideHelp();
     }
 
     const finishValue = getTriggerValue(rawValues);
@@ -332,8 +334,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     triggerChange(cloneNextValues);
 
     const nextFocusIndex = Math.max(0, index - 1);
-    handlesRef.current.hideHelp();
-    handlesRef.current.focus(nextFocusIndex);
+    handlesRef.current!.hideHelp();
+    handlesRef.current!.focus(nextFocusIndex);
   };
 
   const [draggingIndex, draggingValue, draggingDelete, cacheValues, onStartDrag] = useDrag(
@@ -395,7 +397,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
       if (e) {
         (document.activeElement as HTMLElement)?.blur?.();
-        handlesRef.current.focus(focusIndex);
+        handlesRef.current!.focus(focusIndex);
         onStartDrag(e, focusIndex, cloneNextValues);
       } else {
         // https://github.com/ant-design/ant-design/issues/49997
@@ -414,7 +416,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     e.preventDefault();
 
     const { width, height, left, top, bottom, right } =
-      containerRef.current.getBoundingClientRect();
+      containerRef.current!.getBoundingClientRect();
     const { clientX, clientY } = e;
 
     let percent: number;
@@ -440,7 +442,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   };
 
   // =========================== Keyboard ===========================
-  const [keyboardValue, setKeyboardValue] = React.useState<number>(null);
+  const [keyboardValue, setKeyboardValue] = React.useState<number>(null!);
 
   const onHandleOffsetChange = (offset: number | 'min' | 'max', valueIndex: number) => {
     if (!disabled) {
@@ -457,11 +459,12 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     if (keyboardValue !== null) {
       const valueIndex = rawValues.indexOf(keyboardValue);
       if (valueIndex >= 0) {
-        handlesRef.current.focus(valueIndex);
+        handlesRef.current!.focus(valueIndex);
       }
     }
 
-    setKeyboardValue(null);
+    setKeyboardValue(null!);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [keyboardValue]);
 
   // ============================= Drag =============================
@@ -486,8 +489,9 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   React.useEffect(() => {
     if (!dragging) {
       const valueIndex = rawValues.lastIndexOf(draggingValue);
-      handlesRef.current.focus(valueIndex);
+      handlesRef.current!.focus(valueIndex);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dragging]);
 
   // =========================== Included ===========================
@@ -509,7 +513,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   // ============================= Refs =============================
   React.useImperativeHandle(ref, () => ({
     focus: () => {
-      handlesRef.current.focus(0);
+      handlesRef.current!.focus(0);
     },
     blur: () => {
       const { activeElement } = document;
@@ -520,9 +524,10 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   }));
 
   // ========================== Auto Focus ==========================
+  const autoFocusRef = React.useRef(autoFocus);
   React.useEffect(() => {
-    if (autoFocus) {
-      handlesRef.current.focus(0);
+    if (autoFocusRef.current) {
+      handlesRef.current!.focus(0);
     }
   }, []);
 

src/Tracks/index.tsx

@@ -49,7 +49,7 @@ const Tracks: React.FC<TrackProps> = (props) => {
   const tracksNode =
     trackList?.length && (classNames.tracks || styles.tracks) ? (
       <Track
-        index={null}
+        index={null!}
         prefixCls={prefixCls}
         start={trackList[0].start}
         end={trackList[trackList.length - 1].end}

src/hooks/useDrag.ts

@@ -15,7 +15,7 @@ function getPosition(e: React.MouseEvent | React.TouchEvent | MouseEvent | Touch
 }
 
 function useDrag(
-  containerRef: React.RefObject<HTMLDivElement>,
+  containerRef: React.RefObject<HTMLDivElement | null>,
   direction: Direction,
   rawValues: number[],
   min: number,
@@ -33,15 +33,15 @@ function useDrag(
   returnValues: number[],
   onStartMove: OnStartMove,
 ] {
-  const [draggingValue, setDraggingValue] = React.useState(null);
+  const [draggingValue, setDraggingValue] = React.useState<number>(null!);
   const [draggingIndex, setDraggingIndex] = React.useState(-1);
   const [draggingDelete, setDraggingDelete] = React.useState(false);
   const [cacheValues, setCacheValues] = React.useState(rawValues);
   const [originValues, setOriginValues] = React.useState(rawValues);
 
-  const mouseMoveEventRef = React.useRef<(event: MouseEvent) => void>(null);
-  const mouseUpEventRef = React.useRef<(event: MouseEvent) => void>(null);
-  const touchEventTargetRef = React.useRef<EventTarget>(null);
+  const mouseMoveEventRef = React.useRef<EventListener | null>(null);
+  const mouseUpEventRef = React.useRef<EventListener | null>(null);
+  const touchEventTargetRef = React.useRef<EventTarget | null>(null);
 
   const { onDragStart, onDragChange } = React.useContext(UnstableContext);
 
@@ -54,11 +54,19 @@ function useDrag(
   // Clean up event
   React.useEffect(
     () => () => {
-      document.removeEventListener('mousemove', mouseMoveEventRef.current);
-      document.removeEventListener('mouseup', mouseUpEventRef.current);
+      if (mouseMoveEventRef.current) {
+        document.removeEventListener('mousemove', mouseMoveEventRef.current);
+      }
+      if (mouseUpEventRef.current) {
+        document.removeEventListener('mouseup', mouseUpEventRef.current);
+      }
       if (touchEventTargetRef.current) {
-        touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
-        touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
+        if (mouseMoveEventRef.current) {
+          touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
+        }
+        if (mouseUpEventRef.current) {
+          touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
+        }
       }
     },
     [],
@@ -82,7 +90,7 @@ function useDrag(
         rawValues: nextValues,
         deleteIndex: deleteMark ? draggingIndex : -1,
         draggingIndex,
-        draggingValue: nextValue,
+        draggingValue: nextValue as number,
       });
     }
   };
@@ -149,14 +157,14 @@ function useDrag(
     }
 
     // Moving
-    const onMouseMove = (event: MouseEvent | TouchEvent) => {
+    const onMouseMove: EventListener = (event) => {
       event.preventDefault();
 
-      const { pageX: moveX, pageY: moveY } = getPosition(event);
+      const { pageX: moveX, pageY: moveY } = getPosition(event as MouseEvent | TouchEvent);
       const offsetX = moveX - startX;
       const offsetY = moveY - startY;
 
-      const { width, height } = containerRef.current.getBoundingClientRect();
+      const { width, height } = containerRef.current!.getBoundingClientRect();
 
       let offSetPercent: number;
       let removeDist: number;
@@ -192,14 +200,18 @@ function useDrag(
     };
 
     // End
-    const onMouseUp = (event: MouseEvent | TouchEvent) => {
+    const onMouseUp: EventListener = (event) => {
       event.preventDefault();
 
       document.removeEventListener('mouseup', onMouseUp);
       document.removeEventListener('mousemove', onMouseMove);
       if (touchEventTargetRef.current) {
-        touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
-        touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
+        if (mouseMoveEventRef.current) {
+          touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
+        }
+        if (mouseUpEventRef.current) {
+          touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
+        }
       }
       mouseMoveEventRef.current = null;
       mouseUpEventRef.current = null;

src/hooks/useOffset.ts

@@ -52,9 +52,9 @@ export default function useOffset(
         const maxDecimal = Math.max(getDecimal(step), getDecimal(max), getDecimal(min));
         const fixedValue = Number(stepValue.toFixed(maxDecimal));
 
-        return min <= fixedValue && fixedValue <= max ? fixedValue : null;
+        return min <= fixedValue && fixedValue <= max ? fixedValue : null!;
       }
-      return null;
+      return null!;
     },
     [step, min, max, formatRangeValue],
   );
@@ -168,6 +168,9 @@ export default function useOffset(
     } else if (offset === 'max') {
       return max;
     }
+
+    // Unreachable since `offset` is typed as number | 'min' | 'max'.
+    return max;
   };
 
   /** Same as `offsetValue` but return `changed` mark to tell value changed */

src/hooks/useRange.ts

@@ -22,6 +22,6 @@ export default function useRange(
       warning(!editable || !draggableTrack, '`editable` can not work with `draggableTrack`.');
     }
 
-    return [true, editable, !editable && draggableTrack, minCount || 0, maxCount];
+    return [true, !!editable, !editable && !!draggableTrack, minCount || 0, maxCount];
   }, [range]);
 }