fix slider lint issues

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<number | number[] | null>(null);
 
   return (
     <div>

src/Handles/Handle.tsx

@@ -6,7 +6,7 @@ import type { OnStartMove } from '../interface';
 import { getDirectionStyle, getIndex } from '../util';
 
 interface RenderProps {
-  index: number;
+  index: number | null;
   prefixCls: string;
   value: number;
   dragging: boolean;
@@ -18,7 +18,7 @@ export interface HandleProps
   prefixCls: string;
   style?: React.CSSProperties;
   value: number;
-  valueIndex: number;
+  valueIndex: number | null;
   dragging: boolean;
   draggingDelete: boolean;
   onStartMove: OnStartMove;
@@ -71,23 +71,27 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
 
   // ============================ Events ============================
   const onInternalStartMove = (e: React.MouseEvent | React.TouchEvent) => {
-    if (!disabled) {
+    if (!disabled && valueIndex !== null) {
       onStartMove(e, valueIndex);
     }
   };
 
   const onInternalFocus = (e: React.FocusEvent<HTMLDivElement>) => {
-    onFocus?.(e, valueIndex);
+    if (valueIndex !== null) {
+      onFocus?.(e, valueIndex);
+    }
   };
 
   const onInternalMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
-    onMouseEnter(e, valueIndex);
+    if (valueIndex !== null) {
+      onMouseEnter(e, valueIndex);
+    }
   };
 
   // =========================== Keyboard ===========================
   const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (!disabled && keyboard) {
-      let offset: number | 'min' | 'max' = null;
+    if (!disabled && keyboard && valueIndex !== null) {
+      let offset: number | 'min' | 'max' | null = null;
 
       // Change the value
       switch (e.which || e.keyCode) {
@@ -161,7 +165,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,
@@ -187,7 +191,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
       className={clsx(
         handlePrefixCls,
         {
-          [`${handlePrefixCls}-${valueIndex + 1}`]: valueIndex !== null && range,
+          ...(valueIndex !== null && range ? { [`${handlePrefixCls}-${valueIndex + 1}`]: true } : {}),
           [`${handlePrefixCls}-dragging`]: dragging,
           [`${handlePrefixCls}-dragging-delete`]: draggingDelete,
         },

src/Handles/index.tsx

@@ -125,7 +125,7 @@ const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
           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

@@ -70,8 +70,8 @@ export interface SliderProps<ValueType = number | number[]> {
   min?: number;
   max?: number;
   step?: number | null;
-  value?: ValueType;
-  defaultValue?: ValueType;
+  value?: ValueType | null;
+  defaultValue?: ValueType | null;
   onChange?: (value: ValueType) => void;
   /** @deprecated It's always better to use `onChange` instead */
   onBeforeChange?: (value: ValueType) => void;
@@ -109,7 +109,7 @@ export interface SliderProps<ValueType = number | number[]> {
   track?: boolean;
 
   // Accessibility
-  tabIndex?: number | number[];
+  tabIndex?: number | null | (number | null)[];
   ariaLabelForHandle?: string | string[];
   ariaLabelledByForHandle?: string | string[];
   ariaRequired?: boolean;
@@ -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),
         };
@@ -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
@@ -287,6 +289,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
     return returnValues;
   }, [mergedValue, rangeEnabled, mergedMin, count, formatValue]);
+  const rawValuesRef = React.useRef(rawValues);
+  rawValuesRef.current = rawValues;
 
   // =========================== onChange ===========================
   const getTriggerValue = (triggerValues: number[]) =>
@@ -308,7 +312,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 +336,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(
@@ -349,6 +353,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     rangeEditable,
     minCount,
   );
+  const draggingValueRef = React.useRef(draggingValue);
+  draggingValueRef.current = draggingValue;
 
   /**
    * When `rangeEditable` will insert a new value in the values array.
@@ -395,7 +401,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 +420,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 +446,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>(null);
 
   const onHandleOffsetChange = (offset: number | 'min' | 'max', valueIndex: number) => {
     if (!disabled) {
@@ -455,9 +461,9 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
   React.useEffect(() => {
     if (keyboardValue !== null) {
-      const valueIndex = rawValues.indexOf(keyboardValue);
+      const valueIndex = rawValuesRef.current.indexOf(keyboardValue);
       if (valueIndex >= 0) {
-        handlesRef.current.focus(valueIndex);
+        handlesRef.current!.focus(valueIndex);
       }
     }
 
@@ -484,9 +490,9 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   // Auto focus for updated handle
   const dragging = draggingIndex !== -1;
   React.useEffect(() => {
-    if (!dragging) {
-      const valueIndex = rawValues.lastIndexOf(draggingValue);
-      handlesRef.current.focus(valueIndex);
+    if (!dragging && draggingValueRef.current !== null && draggingValueRef.current !== undefined) {
+      const valueIndex = rawValuesRef.current.lastIndexOf(draggingValueRef.current);
+      handlesRef.current!.focus(valueIndex);
     }
   }, [dragging]);
 
@@ -509,7 +515,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 +526,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/Track.tsx

@@ -11,7 +11,7 @@ export interface TrackProps {
   replaceCls?: string;
   start: number;
   end: number;
-  index: number;
+  index: number | null;
   onStartMove?: OnStartMove;
 }
 
@@ -60,7 +60,7 @@ const Track: React.FC<TrackProps> = (props) => {
     clsx(
       trackPrefixCls,
       {
-        [`${trackPrefixCls}-${index + 1}`]: index !== null && range,
+        ...(index !== null && range ? { [`${trackPrefixCls}-${index + 1}`]: true } : {}),
         [`${prefixCls}-track-draggable`]: onStartMove,
       },
       classNames.track,

src/context.ts

@@ -12,7 +12,7 @@ export interface SliderContextProps {
   included?: boolean;
   step: number | null;
   range?: boolean;
-  tabIndex: number | number[];
+  tabIndex: number | null | (number | null)[];
   ariaLabelForHandle?: string | string[];
   ariaLabelledByForHandle?: string | string[];
   ariaRequired?: boolean;
@@ -40,13 +40,13 @@ export interface UnstableContextProps {
   onDragStart?: (info: {
     rawValues: number[];
     draggingIndex: number;
-    draggingValue: number;
+    draggingValue?: number;
   }) => void;
   onDragChange?: (info: {
     rawValues: number[];
     deleteIndex: number;
     draggingIndex: number;
-    draggingValue: number;
+    draggingValue?: number;
   }) => void;
 }