fix: add tooltipProps prop to slider props

MorisR · Dec 15, 2021 · 3389651 · 3389651
1 parent 678cf49
commit 3389651
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md
@@ -30,6 +30,7 @@ To input a value in a range.
 | tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode \| null | IDENTITY | |
 | tooltipPlacement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - | |
 | tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - | |
+| tooltipProps | The tooltip props | [TooltipProps](/components/tooltip/#API) | - | |
 | value | The value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | - | |
 | vertical | If true, the slider will be vertical | boolean | false | |
 | onAfterChange | Fire when onmouseup is fired | (value) => void | - | |

diff --git a/components/slider/index.tsx b/components/slider/index.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import RcSlider, { Range as RcRange, Handle as RcHandle } from 'rc-slider';
 import classNames from 'classnames';
-import { TooltipPlacement } from '../tooltip';
+import { TooltipPlacement, TooltipProps } from '../tooltip';
 import SliderTooltip from './SliderTooltip';
 import { ConfigContext } from '../config-provider';
+import { getTransitionName } from '../_util/motion';
 
 export interface SliderMarks {
  [key: number]:
@@ -44,6 +45,7 @@ export interface SliderBaseProps {
  style?: React.CSSProperties;
  tooltipVisible?: boolean;
  tooltipPlacement?: TooltipPlacement;
+ tooltipProps?: Partial<TooltipProps>;
  getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  autoFocus?: boolean;
 }
@@ -103,22 +105,28 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
  tooltipVisible,
  tooltipPlacement,
  getTooltipPopupContainer,
+ tooltipProps = {},
  vertical,
  } = props;
  const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
  const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
  const rootPrefixCls = getPrefixCls();
-
+ const transitionName = getTransitionName(
+ rootPrefixCls,
+ 'zoom-down',
+ tooltipProps.transitionName,
+ );
  return (
  <SliderTooltip
  prefixCls={tooltipPrefixCls}
  title={tipFormatter ? tipFormatter(value) : ''}
  visible={visible}
  placement={getTooltipPlacement(tooltipPlacement, vertical)}
- transitionName={`${rootPrefixCls}-zoom-down`}
  key={index}
  overlayClassName={`${prefixCls}-tooltip`}
  getPopupContainer={getTooltipPopupContainer || getPopupContainer}
+ {...tooltipProps}
+ transitionName={transitionName}
  >
  <RcHandle
  {...restProps}

diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md
@@ -31,6 +31,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
 | tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip | value => ReactNode \| null | IDENTITY | |
 | tooltipPlacement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - | |
 | tooltipVisible | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | |
+| tooltipProps | Tooltip props | [TooltipProps](/components/tooltip/#API) | - | |
 | value | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | - | |
 | vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
 | onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | (value) => void | - | |