blob: 0bb8350c7be3059a136d8b95657aeefe468e4b21 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
/**
* rc-tooltip tooltip slider
*/
import * as React from "react";
import "rc-tooltip/assets/bootstrap.css";
import Slider from "rc-slider";
import type { SliderProps } from "rc-slider";
import raf from "rc-util/lib/raf";
import Tooltip from "rc-tooltip";
const HandleTooltip = (props: {
value: number;
children: React.ReactElement;
visible: boolean;
tipFormatter?: (value: number) => React.ReactNode;
}) => {
const {
value,
children,
visible,
tipFormatter = (val) => `${val} %`,
...restProps
} = props;
const tooltipRef = React.useRef<any>();
const rafRef = React.useRef<number | null>(null);
function cancelKeepAlign() {
raf.cancel(rafRef.current!);
}
function keepAlign() {
rafRef.current = raf(() => {
// tooltipRef.current?.forcePopupAlign();
});
}
React.useEffect(() => {
if (visible) {
keepAlign();
} else {
cancelKeepAlign();
}
return cancelKeepAlign;
}, [value, visible]);
return (
<Tooltip
placement="top"
overlay={tipFormatter(value)}
overlayInnerStyle={{ minHeight: "auto" }}
ref={tooltipRef}
visible={visible}
{...restProps}
>
{children}
</Tooltip>
);
};
export const handleRender: SliderProps["handleRender"] = (node, props) => {
return (
<HandleTooltip value={props.value} visible={props.dragging}>
{node}
</HandleTooltip>
);
};
const TooltipSlider = ({
tipFormatter,
tipProps,
...props
}: SliderProps & {
tipFormatter?: (value: number) => React.ReactNode;
tipProps: any;
}) => {
const tipHandleRender: SliderProps["handleRender"] = (node, handleProps) => {
return (
<HandleTooltip
value={handleProps.value}
visible={handleProps.dragging}
tipFormatter={tipFormatter}
{...tipProps}
>
{node}
</HandleTooltip>
);
};
return <Slider {...props} handleRender={tipHandleRender} />;
};
export default TooltipSlider;
|
