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 | 1x 1x 1x 1x 1x 1x 1x 1x 19x 19x 19x 1x 1x 1x 1x 1x | import _ from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; import { lucidClassNames } from '../../util/style-helpers'; import { getFirst, StandardProps } from '../../util/component-types'; const cx = lucidClassNames.bind('&-ProgressBar'); const { number, string, oneOf, node } = PropTypes; export interface ITitleProps extends StandardProps {} export 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 {...passThroughs} 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 \`ProgressBar\` is used to indicate progress in a procedure consisting of numerous discrete steps or continuous operation.`, categories: ['communication'], }; ProgressBar.propTypes = { /** Appended to the component-specific class names set on the root element. */ className: string, /** Applies a color style for the kind of ProgressBar. */ kind: oneOf(['default', 'success', 'danger', 'info', 'warning']), /** Percentage ProgressBar is complete. */ percentComplete: number, children: node, /* *Child Element* - Title contents. Only one \`Title\` is used. */ Title: node, }; export default ProgressBar; |