Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 176x 176x 176x 176x 176x 176x 176x 176x 19x 19x 19x 176x 176x 176x 176x 176x | 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;
|