@age/quantum/ProgressBar/ProgressBar.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _theme = require("../shared/theme");

var _shared = require("../shared");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Bar = _styledComponents.default.div.withConfig({
  displayName: "ProgressBar__Bar",
  componentId: "jwzkxb-0"
})(["border-radius:8px;margin-top:8px;overflow:hidden;position:relative;", ""], function (_ref) {
  var height = _ref.height,
      width = _ref.width,
      background = _ref.background;
  return "\n    background-color: ".concat((0, _shared.hexToRgba)(background, 0.39), ";\n    height: ").concat(height, ";\n    width: ").concat(width, "; \n  ");
});

var Content = _styledComponents.default.div.withConfig({
  displayName: "ProgressBar__Content",
  componentId: "jwzkxb-1"
})(["border-radius:8px;display:inline-block;height:100%;left:0;position:absolute;top:0;transition:width 0.4s linear;", ""], function (_ref2) {
  var background = _ref2.background,
      progress = _ref2.progress;
  return "\n    background-color: ".concat(background, ";\n    width: ").concat(progress, "%;\n  ");
});

var Wrapper = _styledComponents.default.div.withConfig({
  displayName: "ProgressBar__Wrapper",
  componentId: "jwzkxb-2"
})(["display:flex;flex-direction:column;font-stretch:normal;font-style:normal;font-weight:normal;letter-spacing:0.18px;line-height:1.5;"]);

var ProgressLabel = _styledComponents.default.span.withConfig({
  displayName: "ProgressBar__ProgressLabel",
  componentId: "jwzkxb-3"
})(["", ""], function (_ref3) {
  var textColor = _ref3.textColor;
  return "\n    color: ".concat(textColor, ";\n  ");
});

ProgressLabel.displayName = 'ProgressLabel';

var ProgressBar = function ProgressBar(props) {
  var width = props.width,
      height = props.height,
      progressText = props.progressText,
      progressPercent = props.progressPercent,
      label = props.label,
      skin = props.skin,
      _props$theme$componen = props.theme.components.progressBar.skins[skin],
      background = _props$theme$componen.background,
      textColor = _props$theme$componen.textColor;
  var progressLabel = progressText === null ? progressPercent : progressText;
  return _react.default.createElement(Wrapper, null, _react.default.createElement(Bar, {
    background: background,
    height: height,
    width: width,
    role: "progressbar"
  }, _react.default.createElement(Content, {
    background: background,
    progress: progressPercent
  })), _react.default.createElement(ProgressLabel, {
    textColor: textColor
  }, progressLabel, label));
};

ProgressBar.defaultProps = {
  width: '250px',
  height: '8px',
  progressText: null,
  progressPercent: 0,
  skin: 'primary',
  theme: {
    components: {
      progressBar: _theme.components.progressBar
    }
  },
  label: '%'
};
ProgressBar.propTypes = {
  skin: _propTypes.default.oneOf(['neutral', 'primary', 'secondary']),
  theme: _propTypes.default.shape({
    components: _propTypes.default.shape({
      progressBar: _propTypes.default.object
    })
  }),
  width: _propTypes.default.string,
  height: _propTypes.default.string,
  progressText: _propTypes.default.number,
  progressPercent: _propTypes.default.number,
  label: _propTypes.default.string
};
var _default = ProgressBar;
exports.default = _default;