typescript: replace unknown & any with SliderRef (#42420)

components/slider/index.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import type { SliderProps as RcSliderProps } from 'rc-slider';
 import RcSlider from 'rc-slider';
-import * as React from 'react';
+import type { SliderRef } from 'rc-slider/lib/Slider';
+import React from 'react';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { TooltipPlacement } from '../tooltip';
-import warning from '../_util/warning';
 import SliderTooltip from './SliderTooltip';
-
 import useStyle from './style';
 
 export type SliderMarks = RcSliderProps['marks'];
@@ -97,156 +97,153 @@ interface SliderRange {
 
 export type Opens = { [index: number]: boolean };
 
-const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
-  (props, ref: any) => {
-    const {
-      prefixCls: customizePrefixCls,
-      range,
-      className,
-      rootClassName,
-
-      // Deprecated Props
-      tooltipPrefixCls: legacyTooltipPrefixCls,
-      tipFormatter: legacyTipFormatter,
-      tooltipVisible: legacyTooltipVisible,
-      getTooltipPopupContainer: legacyGetTooltipPopupContainer,
-      tooltipPlacement: legacyTooltipPlacement,
-
-      ...restProps
-    } = props;
-
-    const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
-    const [opens, setOpens] = React.useState<Opens>({});
-
-    const toggleTooltipOpen = (index: number, open: boolean) => {
-      setOpens((prev: Opens) => ({ ...prev, [index]: open }));
-    };
-
-    const getTooltipPlacement = (placement?: TooltipPlacement, vertical?: boolean) => {
-      if (placement) {
-        return placement;
-      }
-      if (!vertical) {
-        return 'top';
-      }
-      return direction === 'rtl' ? 'left' : 'right';
-    };
-
-    const prefixCls = getPrefixCls('slider', customizePrefixCls);
+const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    range,
+    className,
+    rootClassName,
+    // Deprecated Props
+    tooltipPrefixCls: legacyTooltipPrefixCls,
+    tipFormatter: legacyTipFormatter,
+    tooltipVisible: legacyTooltipVisible,
+    getTooltipPopupContainer: legacyGetTooltipPopupContainer,
+    tooltipPlacement: legacyTooltipPlacement,
+
+    ...restProps
+  } = props;
+
+  const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
+  const [opens, setOpens] = React.useState<Opens>({});
+
+  const toggleTooltipOpen = (index: number, open: boolean) => {
+    setOpens((prev: Opens) => ({ ...prev, [index]: open }));
+  };
+
+  const getTooltipPlacement = (placement?: TooltipPlacement, vertical?: boolean) => {
+    if (placement) {
+      return placement;
+    }
+    if (!vertical) {
+      return 'top';
+    }
+    return direction === 'rtl' ? 'left' : 'right';
+  };
+
+  const prefixCls = getPrefixCls('slider', customizePrefixCls);
+
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
+  const cls = classNames(
+    className,
+    rootClassName,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    hashId,
+  );
+
+  // make reverse default on rtl direction
+  if (direction === 'rtl' && !restProps.vertical) {
+    restProps.reverse = !restProps.reverse;
+  }
+
+  // Range config
+  const [mergedRange, draggableTrack] = React.useMemo(() => {
+    if (!range) {
+      return [false];
+    }
 
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    return typeof range === 'object' ? [true, range.draggableTrack] : [true, false];
+  }, [range]);
+
+  // Warning for deprecated usage
+  if (process.env.NODE_ENV !== 'production') {
+    [
+      ['tooltipPrefixCls', 'prefixCls'],
+      ['getTooltipPopupContainer', 'getPopupContainer'],
+      ['tipFormatter', 'formatter'],
+      ['tooltipPlacement', 'placement'],
+      ['tooltipVisible', 'open'],
+    ].forEach(([deprecatedName, newName]) => {
+      warning(
+        !(deprecatedName in props),
+        'Slider',
+        `\`${deprecatedName}\` is deprecated, please use \`tooltip.${newName}\` instead.`,
+      );
+    });
+  }
 
-    const cls = classNames(
-      className,
-      rootClassName,
-      {
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      },
-      hashId,
-    );
+  const handleRender: RcSliderProps['handleRender'] = (node, info) => {
+    const { index, dragging } = info;
 
-    // make reverse default on rtl direction
-    if (direction === 'rtl' && !restProps.vertical) {
-      restProps.reverse = !restProps.reverse;
-    }
+    const { tooltip = {}, vertical } = props;
 
-    // Range config
-    const [mergedRange, draggableTrack] = React.useMemo(() => {
-      if (!range) {
-        return [false];
-      }
-
-      return typeof range === 'object' ? [true, range.draggableTrack] : [true, false];
-    }, [range]);
-
-    // Warning for deprecated usage
-    if (process.env.NODE_ENV !== 'production') {
-      [
-        ['tooltipPrefixCls', 'prefixCls'],
-        ['getTooltipPopupContainer', 'getPopupContainer'],
-        ['tipFormatter', 'formatter'],
-        ['tooltipPlacement', 'placement'],
-        ['tooltipVisible', 'open'],
-      ].forEach(([deprecatedName, newName]) => {
-        warning(
-          !(deprecatedName in props),
-          'Slider',
-          `\`${deprecatedName}\` is deprecated, please use \`tooltip.${newName}\` instead.`,
-        );
-      });
+    const tooltipProps: SliderTooltipProps = {
+      ...tooltip,
+    };
+    const {
+      open: tooltipOpen,
+      placement: tooltipPlacement,
+      getPopupContainer: getTooltipPopupContainer,
+      prefixCls: customizeTooltipPrefixCls,
+      formatter: tipFormatter,
+    } = tooltipProps;
+
+    let mergedTipFormatter;
+    if (tipFormatter || tipFormatter === null) {
+      mergedTipFormatter = tipFormatter;
+    } else if (legacyTipFormatter || legacyTipFormatter === null) {
+      mergedTipFormatter = legacyTipFormatter;
+    } else {
+      mergedTipFormatter = defaultFormatter;
     }
 
-    const handleRender: RcSliderProps['handleRender'] = (node, info) => {
-      const { index, dragging } = info;
-
-      const { tooltip = {}, vertical } = props;
-
-      const tooltipProps: SliderTooltipProps = {
-        ...tooltip,
-      };
-      const {
-        open: tooltipOpen,
-        placement: tooltipPlacement,
-        getPopupContainer: getTooltipPopupContainer,
-        prefixCls: customizeTooltipPrefixCls,
-        formatter: tipFormatter,
-      } = tooltipProps;
-
-      let mergedTipFormatter;
-      if (tipFormatter || tipFormatter === null) {
-        mergedTipFormatter = tipFormatter;
-      } else if (legacyTipFormatter || legacyTipFormatter === null) {
-        mergedTipFormatter = legacyTipFormatter;
-      } else {
-        mergedTipFormatter = defaultFormatter;
-      }
-
-      const isTipFormatter = mergedTipFormatter ? opens[index] || dragging : false;
-      const open =
-        tooltipOpen ?? legacyTooltipVisible ?? (tooltipOpen === undefined && isTipFormatter);
-
-      const passedProps = {
-        ...node.props,
-        onMouseEnter: () => toggleTooltipOpen(index, true),
-        onMouseLeave: () => toggleTooltipOpen(index, false),
-      };
-
-      const tooltipPrefixCls = getPrefixCls(
-        'tooltip',
-        customizeTooltipPrefixCls ?? legacyTooltipPrefixCls,
-      );
+    const isTipFormatter = mergedTipFormatter ? opens[index] || dragging : false;
+    const open =
+      tooltipOpen ?? legacyTooltipVisible ?? (tooltipOpen === undefined && isTipFormatter);
 
-      return (
-        <SliderTooltip
-          prefixCls={tooltipPrefixCls}
-          title={mergedTipFormatter ? mergedTipFormatter(info.value) : ''}
-          open={open}
-          placement={getTooltipPlacement(tooltipPlacement ?? legacyTooltipPlacement, vertical)}
-          key={index}
-          overlayClassName={`${prefixCls}-tooltip`}
-          getPopupContainer={
-            getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer
-          }
-        >
-          {React.cloneElement(node, passedProps)}
-        </SliderTooltip>
-      );
+    const passedProps = {
+      ...node.props,
+      onMouseEnter: () => toggleTooltipOpen(index, true),
+      onMouseLeave: () => toggleTooltipOpen(index, false),
     };
 
-    return wrapSSR(
-      <RcSlider
-        {...(restProps as SliderRangeProps)}
-        step={restProps.step!}
-        range={mergedRange}
-        draggableTrack={draggableTrack}
-        className={cls}
-        ref={ref}
-        prefixCls={prefixCls}
-        handleRender={handleRender}
-      />,
+    const tooltipPrefixCls = getPrefixCls(
+      'tooltip',
+      customizeTooltipPrefixCls ?? legacyTooltipPrefixCls,
+    );
+
+    return (
+      <SliderTooltip
+        prefixCls={tooltipPrefixCls}
+        title={mergedTipFormatter ? mergedTipFormatter(info.value) : ''}
+        open={open}
+        placement={getTooltipPlacement(tooltipPlacement ?? legacyTooltipPlacement, vertical)}
+        key={index}
+        overlayClassName={`${prefixCls}-tooltip`}
+        getPopupContainer={
+          getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer
+        }
+      >
+        {React.cloneElement(node, passedProps)}
+      </SliderTooltip>
     );
-  },
-);
+  };
+
+  return wrapSSR(
+    <RcSlider
+      {...restProps}
+      step={restProps.step}
+      range={mergedRange}
+      draggableTrack={draggableTrack}
+      className={cls}
+      ref={ref}
+      prefixCls={prefixCls}
+      handleRender={handleRender}
+    />,
+  );
+});
 
 if (process.env.NODE_ENV !== 'production') {
   Slider.displayName = 'Slider';