lucid-ui
Version:
A UI component library from AppNexus.
63 lines (62 loc) • 2.45 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps, getFirst } from '../../util/component-types';
const cx = lucidClassNames.bind('&-ProgressBar');
const { number, string, oneOf, node } = PropTypes;
const Title = (_props) => null;
Title.displayName = 'ProgressBar.Title';
Title.propName = 'Title';
Title.peek = {
description: `
Content displayed at the top of the ProgressBar.
`,
};
const defaultProps = {
kind: 'default',
percentComplete: 0,
};
export const ProgressBar = (props) => {
const { kind, percentComplete, className, ...passThroughs } = props;
const titleChildProp = _.get(getFirst(props, ProgressBar.Title), 'props', {});
return (React.createElement("div", Object.assign({}, omitProps(passThroughs, undefined, _.keys(ProgressBar.propTypes)), { className: cx('&', className, {
'&-default': kind === 'default',
'&-success': kind === 'success',
'&-danger': kind === 'danger',
'&-info': kind === 'info',
'&-warning': kind === 'warning',
}) }),
React.createElement("title", Object.assign({}, titleChildProp, { className: cx('&-title') })),
React.createElement("div", { className: cx('&-bar-container') },
React.createElement("div", { className: cx(`&-bar`, `&-bar-${kind}`, {
[`&-bar-${kind}-is-pulsed`]: percentComplete < 100,
}) }),
React.createElement("div", { className: cx(`&-bar-overlay`), style: { width: `${100 - percentComplete}%` } }))));
};
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;