-
Notifications
You must be signed in to change notification settings - Fork 11
/
RangeBar.tsx
50 lines (43 loc) · 1.1 KB
/
RangeBar.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
import { Colors } from '../constants/Colors';
import { TimeRange } from '../utils/TimeValueRange';
import React from 'react';
import styled from 'styled-components';
// == styles =======================================================================================
const Bar = styled.div`
position: absolute;
top: 0;
height: 100%;
border-radius: 1px;
background: ${ Colors.accent };
`;
const Root = styled.div`
background: ${ Colors.black };
`;
// == component ====================================================================================
interface Props {
className?: string;
range: TimeRange;
length: number;
width: number;
}
const RangeBar = ( props: Props ): JSX.Element => {
const { className, range, length, width } = props;
const x = range.t0 / length * width;
const w = ( range.t1 - range.t0 ) / length * width;
return (
<Root
className={ className }
style={ {
width: `${ width }px`
} }
>
<Bar
style={ {
left: `${ x }px`,
width: `${ w }px`
} }
/>
</Root>
);
};
export { RangeBar };