/
CodebattleSliderBar.jsx
51 lines (45 loc) · 1.5 KB
/
CodebattleSliderBar.jsx
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
import React from 'react';
const handleClassnames = 'cb-slider-handle position-absolute rounded-circle';
const buttonClassnames = 'cb-slider-handle-button position-absolute rounded-circle bg-danger';
const sliderBarClassnames = 'cb-slider-bar position-absolute rounded';
const CodebattleSliderBar = ({ value: currentValue, lastIntent, isHold }) => {
const renderSliderBar = ({ value, className }) => (
<div
className={className}
style={{
width: `${value * 100}%`,
}}
/>
);
const renderSliderAction = ({ value, className }) => (
<div
className={className}
style={{
left: `${value * 100}%`,
}}
/>
);
const renderSliderHandle = ({ value, className, classNameButton }) => (
<div
className={className}
style={{
left: `${value * 100}%`,
}}
>
<div className={classNameButton} />
</div>
);
return (
<>
{renderSliderAction({ value: 0.5, className: 'cb-slider-action position-absolute bg-info' })}
<div className="cb-slider-timeline position-absolute rounded w-100 x-bg-gray">
{!isHold && renderSliderBar({ value: lastIntent, className: `${sliderBarClassnames} x-intent-background` })}
{renderSliderBar({ value: currentValue, className: `${sliderBarClassnames} bg-danger` })}
{renderSliderHandle({
value: currentValue, className: handleClassnames, classNameButton: buttonClassnames,
})}
</div>
</>
);
};
export default CodebattleSliderBar;