/
Slider.Skeleton.tsx
127 lines (116 loc) · 3.53 KB
/
Slider.Skeleton.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import PropTypes from 'prop-types';
import React, { HTMLAttributes, useState } from 'react';
import cx from 'classnames';
import { usePrefix } from '../../internal/usePrefix';
import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
import classNames from 'classnames';
import { LowerHandle, UpperHandle } from './SliderHandles';
export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
/**
* Specify an optional className to add to the form item wrapper.
*/
className?: string;
/**
* Specify whether the label should be hidden, or not
*/
hideLabel?: boolean;
/**
* Turn the slider into a range slider.
*/
twoHandles?: boolean;
}
const SliderSkeleton = ({
hideLabel,
className,
twoHandles,
...rest
}: SliderSkeletonProps) => {
const prefix = usePrefix();
const [isRtl, setIsRtl] = useState(false);
useIsomorphicEffect(() => {
setIsRtl(document ? document.dir === 'rtl' : false);
}, []);
const containerClasses = classNames(
`${prefix}--slider-container`,
`${prefix}--skeleton`,
{
[`${prefix}--slider-container--two-handles`]: twoHandles,
[`${prefix}--slider-container--rtl`]: isRtl,
}
);
const lowerThumbClasses = classNames(`${prefix}--slider__thumb`, {
[`${prefix}--slider__thumb--lower`]: twoHandles,
});
const upperThumbClasses = classNames(`${prefix}--slider__thumb`, {
[`${prefix}--slider__thumb--upper`]: twoHandles,
});
const lowerThumbWrapperClasses = classNames(
`${prefix}--slider__thumb-wrapper`,
{
[`${prefix}--slider__thumb-wrapper--lower`]: twoHandles,
}
);
const upperThumbWrapperClasses = classNames(
`${prefix}--slider__thumb-wrapper`,
{
[`${prefix}--slider__thumb-wrapper--upper`]: twoHandles,
}
);
return (
<div className={cx(`${prefix}--form-item`, className)} {...rest}>
{!hideLabel && (
<span className={`${prefix}--label ${prefix}--skeleton`} />
)}
<div className={containerClasses}>
<span className={`${prefix}--slider__range-label`} />
<div className={`${prefix}--slider`}>
<div className={`${prefix}--slider__track`} />
<div className={`${prefix}--slider__filled-track`} />
<div className={lowerThumbWrapperClasses}>
<div className={lowerThumbClasses}>
{twoHandles && !isRtl ? (
<LowerHandle />
) : twoHandles && isRtl ? (
<UpperHandle />
) : undefined}
</div>
</div>
{twoHandles ? (
<div className={upperThumbWrapperClasses}>
<div className={upperThumbClasses}>
{twoHandles && !isRtl ? (
<UpperHandle />
) : twoHandles && isRtl ? (
<LowerHandle />
) : undefined}
</div>
</div>
) : undefined}
</div>
<span className={`${prefix}--slider__range-label`} />
</div>
</div>
);
};
SliderSkeleton.propTypes = {
/**
* Specify an optional className to add to the form item wrapper.
*/
className: PropTypes.string,
/**
* Specify whether the label should be hidden, or not
*/
hideLabel: PropTypes.bool,
/**
* Turn the slider into a range slider.
*/
twoHandles: PropTypes.bool,
};
export default SliderSkeleton;
export { SliderSkeleton };