web-toolkit/lib/components/LevelBar.js

A GTK inspired toolkit designed to build awesome web apps

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));

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

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

var _clsx = _interopRequireDefault(require("clsx"));

var _rambda = require("rambda");

/*
 * LevelBar.js
 */
var propTypes = {
  className: _propTypes.default.string,
  vertical: _propTypes.default.bool,

  /** The number active of segments */
  value: _propTypes.default.number,

  /** The number of segments */
  segments: _propTypes.default.number,

  /** The coloration of the active segments */
  level: _propTypes.default.oneOf(['empty', 'danger', 'warning', 'info', 'success'])
};
var defaultProps = {
  value: 0,
  segments: 5
};

function LevelBar(props, ref) {
  var className = props.className,
      value = props.value,
      segments = props.segments,
      vertical = props.vertical,
      levelValue = props.level,
      rest = (0, _objectWithoutProperties2.default)(props, ["className", "value", "segments", "vertical", "level"]);
  var percentage = value / (segments - 1);
  var level = percentage < 0.1 ? 'danger' : percentage < 0.5 ? 'warning' : percentage < 0.9 ? 'info' : 'success';
  return /*#__PURE__*/_react.default.createElement("span", Object.assign({
    className: (0, _clsx.default)('LevelBar', className, {
      vertical: vertical
    })
  }, rest, {
    ref: ref
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "LevelBar__content"
  }, (0, _rambda.range)(0, segments).map(function (n) {
    return /*#__PURE__*/_react.default.createElement("span", {
      key: n,
      className: (0, _clsx.default)('LevelBar__rail', value < n ? 'empty' : levelValue || level)
    });
  })));
}

var Export = _react.default.forwardRef(LevelBar);

Export.propTypes = propTypes;
Export.defaultProps = defaultProps;
var _default = Export;
exports.default = _default;
//# sourceMappingURL=LevelBar.js.map