All files / components/ProgressBar 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
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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps, getFirst, StandardProps } from '../../util/component-types';
 
const cx = lucidClassNames.bind('&-ProgressBar');
 
const { number, string, oneOf, node } = PropTypes;
 
interface ITitleProps extends StandardProps {}
 
interface IProgressBarProps
	extends StandardProps,
		React.DetailedHTMLProps<
			React.HTMLAttributes<HTMLDivElement>,
			HTMLDivElement
		> {
	/** Applies a color style for the kind of ProgressBar. */
	kind: 'default' | 'success' | 'danger' | 'info' | 'warning';
 
	/** Percentage ProgressBar is complete. */
	percentComplete: number;
 
	/** *Child Element* - Title contents. Only one \`Title\` is used. */
	Title?: string | React.ReactNode & { props: ITitleProps };
}
 
const Title = (_props: ITitleProps): null => null;
Title.displayName = 'ProgressBar.Title';
Title.propName = 'Title';
Title.peek = {
	description: `
		Content displayed at the top of the ProgressBar.
	`,
};
 
const defaultProps = {
	kind: 'default' as const,
	percentComplete: 0,
};
 
export const ProgressBar = (props: IProgressBarProps): React.ReactElement => {
	const { kind, percentComplete, className, ...passThroughs } = props;
 
	const titleChildProp = _.get(getFirst(props, ProgressBar.Title), 'props', {});
 
	return (
		<div
			{...omitProps(passThroughs, undefined, _.keys(ProgressBar.propTypes))}
			className={cx('&', className, {
				'&-default': kind === 'default',
				'&-success': kind === 'success',
				'&-danger': kind === 'danger',
				'&-info': kind === 'info',
				'&-warning': kind === 'warning',
			})}
		>
			<title {...titleChildProp} className={cx('&-title')} />
			<div className={cx('&-bar-container')}>
				<div
					className={cx(`&-bar`, `&-bar-${kind}`, {
						[`&-bar-${kind}-is-pulsed`]: percentComplete < 100,
					})}
				/>
				<div
					className={cx(`&-bar-overlay`)}
					style={{ width: `${100 - percentComplete}%` }}
				/>
			</div>
		</div>
	);
};
 
ProgressBar.defaultProps = defaultProps;
ProgressBar.Title = Title;
ProgressBar.displayName = 'ProgressBar';
ProgressBar.peek = {
	description: `
				A Progress Bar component is used to indicate progress in a procedure
				consisting of numerous discrete steps or continuous operation.
			`,
 
	categories: ['communication'],
};
ProgressBar.propTypes = {
	className: string`
		Appended to the component-specific class names set on the root element.
	`,
 
	kind: oneOf(['default', 'success', 'danger', 'info', 'warning'])`
		Applies a color style for the kind of ProgressBar.
	`,
 
	percentComplete: number`
		Percentage ProgressBar is complete.
	`,
 
	children: node,
 
	Title: node`
		*Child Element* - Title contents. Only one \`Title\` is used.
	`,
};
 
export default ProgressBar;