-
-
Notifications
You must be signed in to change notification settings - Fork 922
/
ProgressBar.tsx
51 lines (43 loc) 路 1.35 KB
/
ProgressBar.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
import React from 'react';
import PropTypes from 'prop-types';
import { useClassNames } from '../utils';
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
interface ProgressBarProps extends WithAsProps {
vertical?: boolean;
rtl?: boolean;
start?: number;
end?: number;
}
const ProgressBar: RsRefForwardingComponent<'div', ProgressBarProps> = React.forwardRef(
(props: ProgressBarProps, ref) => {
const {
as: Component = 'div',
classPrefix = 'slider-progress-bar',
vertical,
rtl,
end = 0,
start = 0,
style,
className
} = props;
const { merge, withClassPrefix } = useClassNames(classPrefix);
const sizeKey = vertical ? 'height' : 'width';
const dirKey = rtl ? 'right' : 'left';
const startKey = vertical ? 'bottom' : dirKey;
const styles = { ...style, [startKey]: `${start}%`, [sizeKey]: `${end - start}%` };
const classes = merge(className, withClassPrefix());
return <Component ref={ref} style={styles} className={classes} />;
}
);
ProgressBar.displayName = 'ProgressBar';
ProgressBar.propTypes = {
as: PropTypes.elementType,
classPrefix: PropTypes.string,
style: PropTypes.object,
className: PropTypes.string,
vertical: PropTypes.bool,
rtl: PropTypes.bool,
start: PropTypes.number,
end: PropTypes.number
};
export default ProgressBar;