mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 23:46:28 +08:00
typescript: replace unknown & any with SliderRef (#42420)
This commit is contained in:
lijianan
GitHub
parent
7183eab0a9
commit
f1fda002a4
@ -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 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];
|
||||
}
|
||||
|
||||
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 handleRender: RcSliderProps['handleRender'] = (node, info) => {
|
||||
const { index, dragging } = info;
|
||||
|
||||
const { tooltip = {}, vertical } = props;
|
||||
|
||||
const tooltipProps: SliderTooltipProps = {
|
||||
...tooltip,
|
||||
};
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
range,
|
||||
className,
|
||||
rootClassName,
|
||||
open: tooltipOpen,
|
||||
placement: tooltipPlacement,
|
||||
getPopupContainer: getTooltipPopupContainer,
|
||||
prefixCls: customizeTooltipPrefixCls,
|
||||
formatter: tipFormatter,
|
||||
} = tooltipProps;
|
||||
|
||||
// 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;
|
||||
let mergedTipFormatter;
|
||||
if (tipFormatter || tipFormatter === null) {
|
||||
mergedTipFormatter = tipFormatter;
|
||||
} else if (legacyTipFormatter || legacyTipFormatter === null) {
|
||||
mergedTipFormatter = legacyTipFormatter;
|
||||
} else {
|
||||
mergedTipFormatter = defaultFormatter;
|
||||
}
|
||||
|
||||
// Range config
|
||||
const [mergedRange, draggableTrack] = React.useMemo(() => {
|
||||
if (!range) {
|
||||
return [false];
|
||||
}
|
||||
const isTipFormatter = mergedTipFormatter ? opens[index] || dragging : false;
|
||||
const open =
|
||||
tooltipOpen ?? legacyTooltipVisible ?? (tooltipOpen === undefined && isTipFormatter);
|
||||
|
||||
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 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,
|
||||
);
|
||||
|
||||
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';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user