From f1fda002a4db77fb2b6c393a4edab67b13abdaf5 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 17 May 2023 10:06:44 +0800 Subject: [PATCH] typescript: replace unknown & any with SliderRef (#42420) --- components/slider/index.tsx | 283 ++++++++++++++++++------------------ 1 file changed, 140 insertions(+), 143 deletions(-) diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 545980d7b8..3f342d07bd 100644 --- a/components/slider/index.tsx +++ b/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( - (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({}); - - 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((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({}); + + 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 ( - - {React.cloneElement(node, passedProps)} - - ); + const passedProps = { + ...node.props, + onMouseEnter: () => toggleTooltipOpen(index, true), + onMouseLeave: () => toggleTooltipOpen(index, false), }; - return wrapSSR( - , + const tooltipPrefixCls = getPrefixCls( + 'tooltip', + customizeTooltipPrefixCls ?? legacyTooltipPrefixCls, + ); + + return ( + + {React.cloneElement(node, passedProps)} + ); - }, -); + }; + + return wrapSSR( + , + ); +}); if (process.env.NODE_ENV !== 'production') { Slider.displayName = 'Slider';