lucid-ui/lib/components/ProgressBar/ProgressBar.js

A UI component library from AppNexus.

import _keys from "lodash/keys";
import _get from "lodash/get";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps, getFirst } from '../../util/component-types';
var cx = lucidClassNames.bind('&-ProgressBar');
var number = PropTypes.number,
    string = PropTypes.string,
    oneOf = PropTypes.oneOf,
    node = PropTypes.node;

var Title = function Title(_props) {
  return null;
};

Title.displayName = 'ProgressBar.Title';
Title.propName = 'Title';
Title.peek = {
  description: "\n\t\tContent displayed at the top of the ProgressBar.\n\t"
};
var defaultProps = {
  kind: 'default',
  percentComplete: 0
};
export var ProgressBar = function ProgressBar(props) {
  var kind = props.kind,
      percentComplete = props.percentComplete,
      className = props.className,
      passThroughs = _objectWithoutProperties(props, ["kind", "percentComplete", "className"]);

  var titleChildProp = _get(getFirst(props, ProgressBar.Title), 'props', {});

  return /*#__PURE__*/React.createElement("div", _extends({}, omitProps(passThroughs, undefined, _keys(ProgressBar.propTypes)), {
    className: cx('&', className, {
      '&-default': kind === 'default',
      '&-success': kind === 'success',
      '&-danger': kind === 'danger',
      '&-info': kind === 'info',
      '&-warning': kind === 'warning'
    })
  }), /*#__PURE__*/React.createElement("title", _extends({}, titleChildProp, {
    className: cx('&-title')
  })), /*#__PURE__*/React.createElement("div", {
    className: cx('&-bar-container')
  }, /*#__PURE__*/React.createElement("div", {
    className: cx("&-bar", "&-bar-".concat(kind), _defineProperty({}, "&-bar-".concat(kind, "-is-pulsed"), percentComplete < 100))
  }), /*#__PURE__*/React.createElement("div", {
    className: cx("&-bar-overlay"),
    style: {
      width: "".concat(100 - percentComplete, "%")
    }
  })));
};
ProgressBar.defaultProps = defaultProps;
ProgressBar.Title = Title;
ProgressBar.displayName = 'ProgressBar';
ProgressBar.peek = {
  description: "\n\t\t\t\tA Progress Bar component is used to indicate progress in a procedure\n\t\t\t\tconsisting of numerous discrete steps or continuous operation.\n\t\t\t",
  categories: ['communication']
};
ProgressBar.propTypes = {
  className: string,
  kind: oneOf(['default', 'success', 'danger', 'info', 'warning']),
  percentComplete: number,
  children: node,
  Title: node
};
export default ProgressBar;