2022-06-21 10:24:52 +08:00
|
|
|
import classNames from 'classnames';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { SliderProps as RcSliderProps } from 'rc-slider';
|
|
|
|
import RcSlider from 'rc-slider';
|
2022-06-21 10:24:52 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import { ConfigContext } from '../config-provider';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { TooltipPlacement } from '../tooltip';
|
2022-08-17 15:47:22 +08:00
|
|
|
import warning from '../_util/warning';
|
2020-01-06 20:09:12 +08:00
|
|
|
import SliderTooltip from './SliderTooltip';
|
2016-08-10 09:46:56 +08:00
|
|
|
|
2022-03-01 14:48:41 +08:00
|
|
|
export type SliderMarks = RcSliderProps['marks'];
|
2016-08-10 09:46:56 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
interface HandleGeneratorInfo {
|
2020-06-15 17:50:36 +08:00
|
|
|
value?: number;
|
2020-09-24 18:14:22 +08:00
|
|
|
dragging?: boolean;
|
2018-12-05 19:12:18 +08:00
|
|
|
index: number;
|
2018-12-07 20:02:01 +08:00
|
|
|
}
|
2019-11-30 18:10:48 +08:00
|
|
|
|
|
|
|
export type HandleGeneratorFn = (config: {
|
|
|
|
tooltipPrefixCls?: string;
|
|
|
|
prefixCls?: string;
|
|
|
|
info: HandleGeneratorInfo;
|
2020-09-24 18:14:22 +08:00
|
|
|
}) => React.ReactElement;
|
2017-11-21 14:53:25 +08:00
|
|
|
|
2022-08-17 15:47:22 +08:00
|
|
|
export interface SliderTooltipProps {
|
|
|
|
prefixCls?: string;
|
|
|
|
open?: boolean;
|
|
|
|
placement?: TooltipPlacement;
|
|
|
|
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
|
|
|
formatter?: null | ((value?: number) => React.ReactNode);
|
|
|
|
}
|
|
|
|
|
2020-07-01 23:29:28 +08:00
|
|
|
export interface SliderBaseProps {
|
2017-02-17 11:59:30 +08:00
|
|
|
prefixCls?: string;
|
2022-08-17 15:47:22 +08:00
|
|
|
/**
|
|
|
|
* @deprecated `tooltipPrefixCls` is deprecated which will be removed in next major version.
|
|
|
|
* Please use `tooltip.prefixCls` instead.
|
|
|
|
*/
|
2017-02-17 11:59:30 +08:00
|
|
|
tooltipPrefixCls?: string;
|
2019-11-13 14:34:10 +08:00
|
|
|
reverse?: boolean;
|
2016-08-10 09:46:56 +08:00
|
|
|
min?: number;
|
|
|
|
max?: number;
|
2020-10-02 22:15:12 +08:00
|
|
|
step?: null | number;
|
2016-08-10 09:46:56 +08:00
|
|
|
marks?: SliderMarks;
|
|
|
|
dots?: boolean;
|
|
|
|
included?: boolean;
|
|
|
|
disabled?: boolean;
|
2017-01-05 12:05:24 +08:00
|
|
|
vertical?: boolean;
|
2022-08-17 15:47:22 +08:00
|
|
|
/**
|
|
|
|
* @deprecated `tipFormatter` is deprecated which will be removed in next major version. Please
|
|
|
|
* use `tooltip.formatter` instead.
|
|
|
|
*/
|
2020-06-15 17:50:36 +08:00
|
|
|
tipFormatter?: null | ((value?: number) => React.ReactNode);
|
2017-09-10 02:32:00 +08:00
|
|
|
className?: string;
|
|
|
|
id?: string;
|
2018-11-13 22:55:17 +08:00
|
|
|
style?: React.CSSProperties;
|
2022-08-17 15:47:22 +08:00
|
|
|
/**
|
|
|
|
* @deprecated `tooltipVisible` is deprecated which will be removed in next major version. Please
|
|
|
|
* use `tooltip.open` instead.
|
|
|
|
*/
|
2018-11-01 11:40:47 +08:00
|
|
|
tooltipVisible?: boolean;
|
2022-08-17 15:47:22 +08:00
|
|
|
/**
|
|
|
|
* @deprecated `tooltipPlacement` is deprecated which will be removed in next major version.
|
|
|
|
* Please use `tooltip.placement` instead.
|
|
|
|
*/
|
2019-05-26 13:11:13 +08:00
|
|
|
tooltipPlacement?: TooltipPlacement;
|
2022-08-17 15:47:22 +08:00
|
|
|
tooltip?: SliderTooltipProps;
|
|
|
|
/**
|
|
|
|
* @deprecated `getTooltipPopupContainer` is deprecated which will be removed in next major
|
|
|
|
* version. Please use `tooltip.getPopupContainer` instead.
|
|
|
|
*/
|
2019-05-26 13:13:12 +08:00
|
|
|
getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
2020-10-02 22:16:18 +08:00
|
|
|
autoFocus?: boolean;
|
2016-08-10 09:46:56 +08:00
|
|
|
}
|
|
|
|
|
2020-07-01 23:29:28 +08:00
|
|
|
export interface SliderSingleProps extends SliderBaseProps {
|
|
|
|
range?: false;
|
|
|
|
value?: number;
|
|
|
|
defaultValue?: number;
|
|
|
|
onChange?: (value: number) => void;
|
|
|
|
onAfterChange?: (value: number) => void;
|
2020-10-09 09:37:26 +08:00
|
|
|
handleStyle?: React.CSSProperties;
|
|
|
|
trackStyle?: React.CSSProperties;
|
2023-04-17 17:33:32 +08:00
|
|
|
railStyle?: React.CSSProperties;
|
2020-07-01 23:29:28 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface SliderRangeProps extends SliderBaseProps {
|
2020-12-29 15:59:13 +08:00
|
|
|
range: true | SliderRange;
|
2020-07-01 23:29:28 +08:00
|
|
|
value?: [number, number];
|
|
|
|
defaultValue?: [number, number];
|
|
|
|
onChange?: (value: [number, number]) => void;
|
|
|
|
onAfterChange?: (value: [number, number]) => void;
|
2020-10-09 09:37:26 +08:00
|
|
|
handleStyle?: React.CSSProperties[];
|
|
|
|
trackStyle?: React.CSSProperties[];
|
2023-04-17 17:33:32 +08:00
|
|
|
railStyle?: React.CSSProperties;
|
2020-07-01 23:29:28 +08:00
|
|
|
}
|
|
|
|
|
2020-12-29 15:59:13 +08:00
|
|
|
interface SliderRange {
|
|
|
|
draggableTrack?: boolean;
|
|
|
|
}
|
|
|
|
|
2022-08-17 15:47:22 +08:00
|
|
|
export type Opens = { [index: number]: boolean };
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2020-09-24 18:14:22 +08:00
|
|
|
const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
|
|
|
|
(props, ref: any) => {
|
|
|
|
const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
|
2022-08-17 15:47:22 +08:00
|
|
|
const [opens, setOpens] = React.useState<Opens>({});
|
2017-12-01 18:01:14 +08:00
|
|
|
|
2022-08-17 15:47:22 +08:00
|
|
|
const toggleTooltipOpen = (index: number, open: boolean) => {
|
|
|
|
setOpens((prev: Opens) => ({ ...prev, [index]: open }));
|
2020-09-24 18:14:22 +08:00
|
|
|
};
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2020-09-24 18:14:22 +08:00
|
|
|
const getTooltipPlacement = (tooltipPlacement?: TooltipPlacement, vertical?: boolean) => {
|
|
|
|
if (tooltipPlacement) {
|
|
|
|
return tooltipPlacement;
|
|
|
|
}
|
|
|
|
if (!vertical) {
|
|
|
|
return 'top';
|
|
|
|
}
|
|
|
|
return direction === 'rtl' ? 'left' : 'right';
|
|
|
|
};
|
|
|
|
|
2022-08-17 15:47:22 +08:00
|
|
|
const { prefixCls: customizePrefixCls, range, className, ...restProps } = props;
|
2020-09-24 18:14:22 +08:00
|
|
|
const prefixCls = getPrefixCls('slider', customizePrefixCls);
|
|
|
|
const cls = classNames(className, {
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
});
|
2020-12-29 15:59:13 +08:00
|
|
|
|
2020-09-24 18:14:22 +08:00
|
|
|
// make reverse default on rtl direction
|
|
|
|
if (direction === 'rtl' && !restProps.vertical) {
|
|
|
|
restProps.reverse = !restProps.reverse;
|
|
|
|
}
|
2021-01-30 19:39:02 +08:00
|
|
|
|
2022-03-01 14:48:41 +08:00
|
|
|
// Range config
|
|
|
|
const [mergedRange, draggableTrack] = React.useMemo(() => {
|
|
|
|
if (!range) {
|
|
|
|
return [false];
|
|
|
|
}
|
|
|
|
|
|
|
|
return typeof range === 'object' ? [true, range.draggableTrack] : [true, false];
|
|
|
|
}, [range]);
|
|
|
|
|
2022-08-17 15:47:22 +08:00
|
|
|
// 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 which will be removed in next major version, please use \`tooltip.${newName}\` instead.`,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-03-01 14:48:41 +08:00
|
|
|
const handleRender: RcSliderProps['handleRender'] = (node, info) => {
|
|
|
|
const { index, dragging } = info;
|
|
|
|
|
|
|
|
const rootPrefixCls = getPrefixCls();
|
2022-08-17 15:47:22 +08:00
|
|
|
const { tooltip = {}, vertical } = props;
|
|
|
|
|
|
|
|
const tooltipProps: SliderTooltipProps = {
|
|
|
|
formatter:
|
|
|
|
props.tipFormatter ??
|
|
|
|
// eslint-disable-next-line func-names
|
|
|
|
function (value) {
|
|
|
|
return typeof value === 'number' ? value.toString() : '';
|
|
|
|
},
|
|
|
|
open: props.tooltipVisible,
|
|
|
|
placement: props.tooltipPlacement,
|
|
|
|
getPopupContainer: props.getTooltipPopupContainer,
|
|
|
|
...tooltip,
|
|
|
|
};
|
|
|
|
|
|
|
|
const {
|
|
|
|
open: tooltipOpen,
|
|
|
|
placement: tooltipPlacement,
|
|
|
|
getPopupContainer: getTooltipPopupContainer,
|
|
|
|
prefixCls: customizeTooltipPrefixCls,
|
|
|
|
formatter: tipFormatter,
|
|
|
|
} = tooltipProps;
|
2022-03-01 14:48:41 +08:00
|
|
|
|
2022-08-17 15:47:22 +08:00
|
|
|
const isTipFormatter = tipFormatter ? opens[index] || dragging : false;
|
|
|
|
const open = tooltipOpen || (tooltipOpen === undefined && isTipFormatter);
|
2022-03-01 14:48:41 +08:00
|
|
|
|
|
|
|
const passedProps = {
|
|
|
|
...node.props,
|
2022-08-17 15:47:22 +08:00
|
|
|
onMouseEnter: () => toggleTooltipOpen(index, true),
|
|
|
|
onMouseLeave: () => toggleTooltipOpen(index, false),
|
2022-03-01 14:48:41 +08:00
|
|
|
};
|
2021-01-30 19:39:02 +08:00
|
|
|
|
2022-08-17 15:47:22 +08:00
|
|
|
const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
|
|
|
|
|
2020-09-24 18:14:22 +08:00
|
|
|
return (
|
2022-03-01 14:48:41 +08:00
|
|
|
<SliderTooltip
|
|
|
|
prefixCls={tooltipPrefixCls}
|
|
|
|
title={tipFormatter ? tipFormatter(info.value) : ''}
|
2022-08-26 17:17:13 +08:00
|
|
|
open={open}
|
2022-03-01 14:48:41 +08:00
|
|
|
placement={getTooltipPlacement(tooltipPlacement, vertical)}
|
|
|
|
transitionName={`${rootPrefixCls}-zoom-down`}
|
|
|
|
key={index}
|
|
|
|
overlayClassName={`${prefixCls}-tooltip`}
|
|
|
|
getPopupContainer={getTooltipPopupContainer || getPopupContainer}
|
|
|
|
>
|
|
|
|
{React.cloneElement(node, passedProps)}
|
|
|
|
</SliderTooltip>
|
2020-09-24 18:14:22 +08:00
|
|
|
);
|
2022-03-01 14:48:41 +08:00
|
|
|
};
|
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
return (
|
2020-09-24 18:14:22 +08:00
|
|
|
<RcSlider
|
2022-03-01 14:48:41 +08:00
|
|
|
{...(restProps as SliderRangeProps)}
|
2020-10-02 22:15:12 +08:00
|
|
|
step={restProps.step!}
|
2022-03-01 14:48:41 +08:00
|
|
|
range={mergedRange}
|
|
|
|
draggableTrack={draggableTrack}
|
2020-01-02 19:10:16 +08:00
|
|
|
className={cls}
|
2020-04-22 15:58:57 +08:00
|
|
|
ref={ref}
|
2018-12-05 19:12:18 +08:00
|
|
|
prefixCls={prefixCls}
|
2022-03-01 14:48:41 +08:00
|
|
|
handleRender={handleRender}
|
2018-12-05 19:12:18 +08:00
|
|
|
/>
|
|
|
|
);
|
2020-09-24 18:14:22 +08:00
|
|
|
},
|
|
|
|
);
|
2020-04-22 15:58:57 +08:00
|
|
|
|
2022-06-21 10:24:52 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
Slider.displayName = 'Slider';
|
|
|
|
}
|
2020-04-25 22:46:21 +08:00
|
|
|
|
2020-04-22 15:58:57 +08:00
|
|
|
export default Slider;
|