Mirrors
/
ant-design
mirror of https://github.com/ant-design/ant-design.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
pull/42429/head
lijianan 2 years ago committed by GitHub
parent 7183eab0a9
commit f1fda002a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 140 additions and 143 deletions
Show Stats Download Patch File Download Diff File

283
components/slider/index.tsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save