/
SliderTrack.tsx
94 lines (86 loc) · 2.31 KB
/
SliderTrack.tsx
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
import type { HTMLAttributes } from "react";
import { forwardRef } from "react";
import cn from "classnames";
import { bem } from "@react-md/utils";
import { THUMB_1_VAR, THUMB_2_VAR } from "./constants";
import type { SliderPresentation } from "./types";
const styles = bem("rmd-slider-track");
type CSSProperties = React.CSSProperties & {
[THUMB_1_VAR]?: string;
[THUMB_2_VAR]?: string;
};
/**
* @remarks \@since 2.5.0
*/
export interface SliderTrackProps
extends HTMLAttributes<HTMLSpanElement>,
SliderPresentation {
/**
* Boolean if the track should animate the value position whenever the
* value changes. This should normally be set to `true` only when the track
* is "idle" and not being dragged.
*/
animate?: boolean;
/**
* This should be the current value as a percentage for the first thumb that
* appears within the slider.
*/
thumb1Percentage: string;
/**
* This should be the current value as a percentage for the second thumb that
* appears within the slider, but only when behaving as a range slider.
*/
thumb2Percentage?: string;
}
/**
* The `SliderTrack` component is used to show the distance that the slider can
* be dragged as well as a visual indication of the value. The main usage is to
* update the custom css properties for the thumb's values.
*
* @remarks \@since 2.5.0
*/
export const SliderTrack = forwardRef<HTMLSpanElement, SliderTrackProps>(
function SliderTrack(
{
style: propStyle,
className,
children,
animate = false,
vertical = false,
disabled = false,
thumb1Percentage,
thumb2Percentage,
...props
},
ref
) {
const style: CSSProperties = {
...propStyle,
[THUMB_1_VAR]: thumb1Percentage,
[THUMB_2_VAR]: thumb2Percentage,
};
return (
<span
{...props}
ref={ref}
style={style}
className={cn(
styles({
animate,
hoverable: !disabled,
disabled,
h: !vertical,
h1: !vertical && !thumb2Percentage,
h2: !vertical && thumb2Percentage,
v: vertical,
v1: vertical && !thumb2Percentage,
v2: vertical && thumb2Percentage,
}),
className
)}
>
{children}
</span>
);
}
);